css-animations相关内容
我正在尝试这样做,当我打开页面时,test将显示为红色,testing将显示为白色。我希望保留打开页面时使用的延迟(如果运行程序,您将看到该延迟)。 css #hero h1 { display: block; width: fit-content; font-size: 3rem; position: relative; color: transparent;
..
我需要用纯css实现无限退回效果,所以我引用了this站点,最后做了this。 数据-lang=“js”数据-隐藏=“假”数据-控制台=“真”数据-巴贝尔=“假”> .animated { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-fill-mode: bot
..
我有一个div,我在其中为内容制作动画: 数据-lang=“js”数据-隐藏=“假”数据-控制台=“假”数据-巴贝尔=“假”> #container { position: relative; width: 100px; height: 100px; border-style: inset; } #content { visibility: hidden; -web
..
这里有一个演示: http://codepen.io/Tiger0915/pen/GgjVLN 我在.circlediv的hover上有一个keyframe动画。当您将鼠标悬停在其上时,它可以正常工作。 @include keyframes(bounce-bulge) { 0% { transform: scale(1); } 20% { transfor
..
我想使用如下所示的关键帧动画分别为两个(或多个)CSS变换属性设置动画: @keyframes translatex { 100% { transform: translateX(100px); } } @keyframes rotatez { 100% { transform: rotateZ(80deg); } } HT
..
默认情况下,如果您停止将鼠标悬停在某个元素上,则任何属性的转换也将停止。简单示例: li { position: relative; transition: 1s; left: 0; } li:hover { left: 20px; }
Item
Item
Item
I
..
我正在尝试构建一个每个列表项都有一系列动画的菜单。它可以工作,但是在动画之后,该项目再次消失。它看起来好像没有使用.Animated的Visible属性。您能给我任何解决此问题的指导吗?
Hello World
Hello World
..
目前,我的屏幕中心有一个固定的图像,它在鼠标滚动时水平移动。我现在想在这个组件的上方和下方添加一个高度为100vh的屏幕。当我尝试这样做时,我的固定组件会自动移动到我想清空的屏幕顶部。我曾尝试向图像添加页边距顶部:100vh,但已将其移出屏幕。 这里有两件事我有问题。1是如何在100vh窗口之后将此组件放在屏幕中央,2是如何仅在用户到达该特定组件时启动动画。因为现在设置项目时,图像和文本会在
..
我有一个动画,用于交替body并更改其背景颜色。一切都运行得很好,但是当动画运行时,我可以看到我的CPU是100%。起初我认为这可能是由于@keyframes,但是当我从交替颜色更改代码时,我看到CPU过载减少了非常严重,持续下降了40%。所以我明白这可能是动画造成的。 以下是我的CSS代码: body { background: linear-gradient(45deg, #F
..
我有以下代码来显示/隐藏基于CSS类的传送带上的按钮。除hideButton外,所有内容都按预期工作,动画完成后,显示不会设置为“无”。 其效果是,尽管该按钮褪色,但它仍然位于基础项目的顶部,并防止单击击中它们。 .pills-tab-carousel__button { position: absolute; top: 0; height: 100%; line-he
..
我有一个CSS动画,它使用变换相对于其当前位置四处移动。 CSS fish { animation: fishanimation 4s ease-in-out infinite alternate; } @keyframes fishanimation { 0% { transform: translateY(20px); } 100% { tr
..
当前,我正在尝试在Reaction中实现以下视差效果,即我的图像垂直于固定位置,但随文本从左向右移动。 我已经使用useEffect实现了这一点,其中我获取总高度像素并相应地移动我的组件。问题是它在我的屏幕上看起来很完美,但一旦我把它调整到一个更大或更小的屏幕上,布局就会变得摇摇欲坠。不管怎么说,有没有同样的效果,但反应友好。您可以随意编辑CodeSandBox CodeSandBox
..
我有一个沿x轴旋转的3D CSS轮子/圆柱体动画。我的问题是动画似乎在容器之外上下移动。下面的GIF示例. 上面的代码可以在这里找到:https://jsfiddle.net/thelevicole/bkt0v1mc/ (function($) { const $wheel = $('.wheel .wheel__inner'); const items = 28; co
..
我阅读了几篇关于从中心缩放SVG路径的文章,但都不起作用。 div { width: 100px; height: 100px; background: rgba(0,0,0,0.2)} #circle { transform: scale(1) translate(0px, 0px); animation:
..
我正在寻找可以为button's colored gradient background创建CSS动画的CSS规则。 我只是试着玩一下,然后这样做了:https://codepen.io/prashant-nadsoftdev/pen/bKzOrB。 .custom-btn { background: linear-gradient(105deg, #f6d365, #fda08
..
在学习CSS动画时,我面临着相当大的卡壳。 我将制作一个“转换:翻译”动画,该动画显示内容宽度溢出的文本,如下所示。 How it works?: (Youtube video link) var div1 = document.getElementById("div1"); var cont = document.getElementById("content"); var i
..
我正在尝试使用CSS3-动画调整我的网站上的一些容器的大小。 这是我的容器: .new-place-wrapper { background: #004682; display: inline-block; margin-top: 70px; animation-name: newplace; animation-duration: 1s; anim
..
我想知道如何使用HTML5/CSS3连续填充表单以创建加载图标(微调器)。 填充应遵循红线(3),并在到达末端时使形状保持相同方向(6) 如果它是一条细线,我可以使用伪线动画,但是像这样一个更粗的形状如何做到这一点呢?
..
我正在尝试实现全屏无限滚动背景效果,该效果必须延伸到视口的整个高度和宽度。 这里是demo。 我尝试过的解决方案是获取一个具有视口的100vh和100vw的包装元素,然后在其中放置2个高度为100%的,它们具有相同的背景图像和background-size: cover属性。我使用的图片大小为:1920px×808px。 然后我在包装器元素上应用了以下动画: @keyfra
..
所以我只是个初学者,我只是想弄明白动画和它们是如何工作的。 我的计划是将球在一条线上无限地移动多少度(比方说90度)。以下是我想知道的几个问题: 有没有更好的方法来使用规则相同且略有不同(具有不同轮换)的类? 如何才能使球在不同旋转的新线上移动? .line, .line-deg90 { background-color: hsl(0, 0%, 0%); height:
..