css3圆环旋转效果动画怎么做

html-css026

css3圆环旋转效果动画怎么做,第1张

1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。

2、然后写html结构，只需要一个div元素即可，class名字叫做img

3、设置其边框为不同的颜色，边框宽度设置成100px。

4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。

5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码

6、来看一下最后的效果，还是不错的。

transform 不会使DOM脱离文档流，当通过 translateX 等属性值移动了元素后，它仍然占据原来的位置。

好处是， transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。

MDN animation

深入浅出CSS动画

MDN animate()

监听 CSS animation 动画的事件:

这些监听事件对 animate() 是无效的。

页面顶部经常会见到水平无限轮播的公告。

由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。

假设我们永远只有一条最新的公告

原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。

逻辑实现：父元素设置了 overflow: hidden ，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。

兼容性：如果不支持 animate() ，那么我们可以动态创建 <style>+ @keyframes ，插入 <head>, 但也要记得移除。

您可以使用 CSS 动画来实现门打开后展示灯笼自上而下的动画效果。具体步骤如下：

1. 在 HTML 中创建门和灯笼的元素，并给这些元素添加类名。例如：

<div class="door">门</div>

<div class="lantern">灯笼</div>

2. 在 CSS 中为门添加打开的样式。例如，可以使用 transform 属性来旋转门：

.door {

transform: rotate(90deg)

}

3. 为灯笼添加动画样式。可以使用 CSS 的 animation 属性来实现动画效果。例如，可以使用以下样式来使灯笼从上方移动到下方：

.lantern {

animation: moveDown 1s ease-in-out

}

@keyframes moveDown {

from {

top: -100px

}

to {

top: 100px

}

}

4. 使用 JavaScript 来控制动画的播放。可以在门打开后调用灯笼元素的 classList.add 方法，来添加动画类名，从而触发动画的播放。

例如：

document.querySelector('.door').addEventListener('click', function() {

document.querySelector('.lantern').classList.add('lantern-animation')

})

希望这些信息能帮助到您！