本文介绍并演示了两种不常用的CSS动画效果：呼吸灯效果和图片闪烁效果。呼吸灯效果通过改变元素的透明度实现，而图片闪烁效果则是通过调整图片的缩放比例来完成。这两种效果都使用了关键帧动画，可以无限循环播放。
记录一些不常用但是常见的css样式
1.呼吸灯效果
.breath-light{
opacity: 0.5;
overflow: hidden;
-webkit-animation-name: breath;
-webkit-animation-duration: 700ms;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-name: breath;
animation-duration: 700ms;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-name:scaleDraw;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:5s;
}
@keyframes breath{
from { opacity: 0.5; }
50% { opacity: 1; }
to { opacity: 0.5; }
}
@-webkit-keyframes breath{
from { opacity: 0.5; }
50% { opacity: 1; }
to { opacity: 0.5; }
}
2.图片闪烁效果
.breath-light{
-webkit-animation-name:scaleDraw;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:5s;
}
@keyframes scaleDraw {
0% {
transform:scale(0.9);
}
25% {
transform:scale(1.1);
}
50% {
transform:scale(0.9);
}
75% {
transform:scale(1.1);
}
}
.breath-light{
-webkit-animation-name:scaleDraw;
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:5s;
}
@keyframes scaleDraw {
0% {
transform:scale(0.9);
}
25% {
transform:scale(1.1);
}
50% {
transform:scale(0.9);
}
75% {
transform:scale(1.1);
}
}
扫一扫
4214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
