CSS3自旋动画
我已经回顾了很多演示，并且不知道为什么我无法使CSS3自旋起作用。我正在使用最新的稳定版Chrome。div { margin: 20px; width: 100px; height: 100px; background: #f00; -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-...
2024-01-10CSS3旋转动画
无法使此动画图像正常工作，它应该进行360度旋转。我猜下面的CSS有点问题，因为它保持静止。.image { float: left; margin: 0 auto; position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin-top: -60px; margin-left: -60px; -webkit-animation-name: spin; ...
2024-01-10CSS水平滚动
我正在尝试创建<div>一系列只能水平滚动的照片。它应该看起来像这样的但是，只有通过指定<div>包含照片的的宽度，才能实现上述目的（因此它们不会“自动换行”）。如果我不放宽-看起来像这样；使用CSS可以防止固定宽度的图像发生变化，该怎么办。谢谢回答：您可以使用display:inline-block与white...
2024-01-10带有渐变的CSS3动画
真的没有办法使用CSS为渐变背景设置动画吗？就像是：@-webkit-keyframes pulse { 0% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } 50% { background: -webkit...
2024-01-10CSS过渡自动宽度
我有一个元素，其内容更改时我想为其宽度设置动画。它具有width:auto，并且永远不会改变。我已经看到了这个技巧，但这是为了在两个值之间进行转换并设置一个。我根本不操纵值，仅操纵内容，我希望元素的大小随动画而变化。CSS完全有可能吗？这是我的代码的简化版本：.myspan { background-color: #d...
2024-01-10使用CSS检查滚动
我正在尝试创建一个纯100％CSS（无jQuery）“返回页首”按钮，但是我希望该按钮仅在访客向下滚动页面时显示。是否可以通过CSS进行检查？因此，如果访客向下滚动，请显示“返回顶部”按钮。谢谢！回答：通过光标位置确定一种执行此操作的方法是仅.toTop在用户将鼠标悬停在页面本身，标题和导...
2024-01-10左右流动的CSS列
假设我有一个div，其中将包含一组元素（div），这些元素可能具有不同的高度，但是所有元素的宽度都相同。目前，我已经通过同位素+砌体实现了这一目标，但是由于某些浏览器已经支持CSS3多列，因此我希望为这些浏览器提供唯一的CSS解决方案，而其余的则使用Javascript。这是我一直在尝试的CSS：.div...
2024-01-10CSS：动画与过渡
因此，我了解了如何同时执行CSS3过渡和动画。我用谷歌搜索的不清楚是什么时候使用它。例如，如果我想使球弹跳，很明显，动画是必经之路。我可以提供关键帧，而浏览器将做中间帧，并且我将获得一个不错的动画。然而，在某些情况下，无论哪种方式都可以达到上述效果。一个简单而常见的示例...
2024-01-10CSS无尽旋转动画
我想通过CSS旋转加载图标。我有一个图标和以下代码：<style>#test { width: 32px; height: 32px; background: url('refresh.png');}.rotating { -webkit-transform: rotate(360deg); -webkit-transition-duration: 1s; -webkit-transition-delay: now; -webkit-animation-timing...
2024-01-10CSS3动画中的虚线边框动画
我想在我的WP博客中添加它。这样，每个新的div帖子的边框上都会有此动画。但是问题在于它在SVG中。无论如何，我可以在不使用SVG的情况下使此动画工作，并且我也不想使用javascript。可以说代码是：.go { width: 900px; height: 200px; border: 8px dashed;}<div class="go"></div>回答：CSS可以做到这一点，并...
2024-01-10在CSS3动画中模仿眨眼标签
我真的很想让一段文字闪烁传统风格，而不使用javascript或文字修饰。没有过渡，只有 blink ， blink ， blink ！ ：这不同于该问题，因为我要求不连续转换的_闪烁_ ，而其他问题的OP询问如何 用连续转换 来 代替 闪烁 __回答：最初的Netscape <blink>具有80％的占空比。这很接近，尽管实数<blink>仅影响文本...
2024-01-10滚动滞后CSS3框阴影属性？
我box-shadow最近在页面的一部分中添加了，以为其提供与Mac OS X应用程序相同的阴影边框效果。看起来不错，但我注意到在页面上上下滚动会使其滞后。我通常只会在页面上贴满恼人的背景图像，大量图像和嵌入视频（咳嗽MySpace咳嗽）的页面上看到此图像。我最初决定使用box-shadow，因为我发现它可以消...
2024-01-10将参数传递给CSS动画
p { animation-duration: 3s; animation-name: slidein;}@keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; }}对于上面的动画CSS代码，我想知道是否有任何方法可以从Javascript 传递margin-left和width作为参数传递。回答：使用CSS变量，您可以轻松地做到这一...
2024-01-10在CSS3动画结束时保持最终状态
我正在opacity: 0;CSS 中设置的某些元素上运行动画。动画类应用于onClick，并使用关键帧将不透明度从更改0为1（除其他外）。不幸的是，动画结束后，元素会返回到opacity:0（在Firefox和Chrome中）。我自然会想到，动画元素会保持最终状态，而不是覆盖其原始属性。这不是真的吗 如果没有，我如何才能做到...
2024-01-10仅限移动设备上的自适应CSS样式
我试图使我的自适应CSS样式 在平板电脑和智能手机上起作用。基本上，我有一种桌面风格，一种移动风格：肖像风格和一种移动风格：风景风格。我完全不希望移动样式干扰桌面演示。我玩过无数次媒体查询，但是结果要么移动样式显示在桌面上，要么移动样式仅显示在移动设备上，但只有一组规则...
2024-01-10CSS：纯CSS滚动动画
我一直在寻找一种仅使用CSS3单击位于页面顶部的按钮时向下滚动的方法。但这对于我的需求而言有点太先进了，因为我只希望浏览器单击页面顶部的一个按钮即可向下滚动，所以我想知道：是否可以在没有输入按钮的情况下进行那些CSS滚动，有锚标签？HTML看起来像这样： <a href="#" class="button">Learn more<...
2024-01-10用CSS过渡动画最大高度
我想创建仅由类名支持的展开/折叠动画（使用JavaScript来切换类名）。我要上一堂课 max-height: 4em; overflow: hidden;另一个max-height: 255em;（我也尝试过value none，它根本没有动画）进行动画处理： transition: max-height 0.50s ease-in-out;我使用CSS过渡在它们之间进行切换，但是浏览器似乎在为所有这些多余em的动画...
2024-01-10角2+动态地生成的CSS
对于一个给定的js变量，其具有在它的样式信息：角2+动态地生成的CSSmenuBgColor = "red"; 在AngularJS我能够使用动态地嵌入样式：<div> <style> .menuElement{ background-color:{{menuBgColor}} } </style> <div class="menuElement">...</div> </div> 在Angular2 + I不能像上面那样使用。当视图在浏览器变量中呈现...
2024-01-10使用CSS3过渡延迟鼠标移出/悬停
我有一个可以在悬停时改变大小的盒子。但是，我想延迟mouseout阶段，以便在恢复旧尺寸之前，该框将新尺寸保留几秒钟。div { width: 70px; -webkit-transition: .5s all; }div:hover { width:130px;}是否可以只使用CSS3而无需Javascript？我只需要关心支持 。回答：div { width: 70px; -webkit-transition: ....
2024-01-10CSS3 100vh在移动浏览器中不是恒定的
我有一个非常奇怪的问题……在每个浏览器和移动版本中，我都遇到了以下问题：加载页面时，所有浏览器都有一个顶部菜单（例如，显示地址栏），当您开始滚动页面时，该菜单会向上滑动。有时 仅在视口的可见部分计算100vh ，因此当浏览器栏向上滑动时100vh会增加（以像素为单位）由于尺寸已更...
2024-01-10CSS在5秒后自动隐藏元素
页面加载后5秒钟是否可以隐藏元素？我想做完全相同的事情，但希望通过CSS过渡获得相同的结果。有什么创意吗？还是我问的问题超出了CSS过渡/动画的限制？回答：但是您无法以可能立即想到的方式进行操作，因为您无法为原本依赖的属性（例如display，或更改尺寸和设置为overflow:hidden）设置动画...
2024-01-10如何使CSS浮动在一行中？
我想在同一行上使用两个项目float: left作为左侧的项目。我一个人就能做到这一点没有问题。问题是， 即使您将浏览器的尺寸调整得很小 ，我也希望这两项 同一行。您知道…就像桌子一样。 __我们的目标是 无论在什么情况下都 不会包裹右边的物品。我该如何使用CSS告诉浏览器，我宁愿 不是包装它...
2024-01-10使用CSS自动流动2列文字
我有类似于以下代码：<p>This is paragraph 1. Lorem ipsum ... </p><p>This is paragraph 2. Lorem ipsum ... </p><p>This is paragraph 3. Lorem ipsum ... </p><p>This is paragraph 4. Lorem ipsum ... </p><p>This is paragraph 5. Lorem ipsum ... </p><p>This is paragraph 6. Lo...
2024-01-10如何循环播放CSS3过渡？
以下样式只是如何在CSS3中设置过渡的示例。有没有纯粹的CSS技巧可以使此循环播放？div { width:100px; height:100px; background:red; transition:width 0.1s; -webkit-transition:width 0.1s; /* Safari and Chrome */ -moz-transition:width 0.1s; /* Firefox 4 */ -o-transition:width 0....
2024-01-10CSS3转换：IE中的缩放
我想使用CSS3属性transform：scale。div{ transform: scale(0.5,0.5);}有没有办法在Internet Explorer 8及更低版本中模仿它？可能与filterJava解决方案有关？我在网上搜索没有任何结果。非常感谢Vincent回答：IE9支持转换：-ms-transform: scale(0.5,0.5);对于其他版本的IE，存在复杂的语法。像这样：filter: progid:DXImageTr...
2024-01-10
