本文探讨了如何使用CSS动画关键帧和绝对定位创建三个视觉动态元素：淡入效果的div，颜色渐变的橙色方块，以及位置动态的珊瑚色矩形。通过`@keyframes`定义动画，展示了如何控制元素的透明度和位置变化。
#demo1 {
position: absolute;
top: 60px;
width: 300px;
height: 150px;
background-color: lightblue;
animation: myanim 4s infinite;
}
#demo2 {
position: absolute;
top: 90px;
left: 30px;
width: 300px;
height: 150px;
background-color: orange;
animation: myanim 3s infinite;
}
#demo3 {
position: absolute;
top: 120px;
left: 60px;
width: 350px;
height: 150px;
background-color: coral;
}
@keyframes myanim {
30% {
opacity: 0.4;
}
}
Showing opacity
End div
Start div
#demo1 {
position: absolute;
top: 60px;
width: 300px;
height: 150px;
background-color: lightblue;
animation: myanim 4s infinite;
}
#demo2 {
position: absolute;
top: 90px;
left: 30px;
width: 300px;
height: 150px;
background-color: orange;
animation: myanim 3s infinite;
}
#demo3 {
position: absolute;
top: 120px;
left: 60px;
width: 350px;
height: 150px;
background-color: coral;
}
@keyframes myanim {
30% {
opacity: 0.4;
}
}
Showing opacity
扫一扫
2321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
