css动画效果大全,css3动画效果大全代码
我们知道css3动画可以实现很漂亮的动画效果，例如：水纹波动，电池充电.那么下面看看如何实现的
1.水纹波动效果实现：html:
差异
span /span
span /span
span /span
/div css:海洋{
宽度：300像素
高度：300像素
背景色：白色烟雾；
背景图像：线性渐变（深蓝色、rgba(255，255，255，0) 80%、rgba(255，255，255，0.5))；
边框半径：5px
box-shadow: 0 2px 30px rgba(0，0，0，0.2)；
位置：相对；
溢出：隐藏；
}。大海。挥手{
位置：绝对；顶：-250 px；左：-100px；宽度：500像素
高度：500像素
背景：深蓝
边界半径：43%;
滤镜：不透明度(0.4);
动画：漂移线性无限；
转化-起源：50% 48%;
}。大海wave:n-of-type(1){ animation-duration:5s；}。大海wave:n-of-type(2){动画-时长：7s；}。大海wave:n-of-type(3){动画-时长：9s；背景色：橙色；滤镜：不透明度(0.1);}
@关键帧漂移{ from { transform:rotate(360度))；}
}
2.电池充电效果html:
差异
差异
差异
差异
span /span span /span
/div
/div
/div
/div CSS:电池{宽度：150像素高度：250像素背景：# fff边框半径：8px边框：1px纯色# eee边距：100像素自动0自动位置：相对；}。电池：在{内容：""之前；宽度：30px高度：20px显示：块；背景：# eee位置：绝对；左：60pxtop:-20px；z指数：9;border-radius:6px 6px 0 0；}。蝙蝠箱{宽度：150 px高度：250像素溢出：隐藏；显示器：flex对齐-项目：柔性端；}。电池宽度：100%;高度：0;边距-顶部：150像素；位置：相对；背景：线性梯度（到底部、# 7 abcf 0%、#00BCD4 44%、# 2196 F3 100%)；动画：bty轻松进出5s无限；边框半径：0 0 6px 6px}。波形{宽度：100%;高度：150像素边框半径：20px位置：相对；左：0;顶：-150 px；z指数：1;}。波跨度{宽度：300像素高度：350像素显示：块；边界半径：20% 10%;动画：波浪渐入渐出6s无限；位置：绝对；顶：-140 px；左：-50px；}。波跨度：第n类(1){背景：rgba(255，255，255，1)；过渡延迟：0;边界半径：30%;}。波跨度：第n型(2){背景：rgba(255，255，255，25);过渡延迟：3;边界半径：48%;变换：旋转(-320度)}。波跨度：第n型(3){背景：rgba(255，255，255，45);过渡延迟：7;边界半径：30%;变换：旋转(40度)}
@关键帧类型{
0{
高度：0;
滤镜：色调旋转(14度);
}
25%{
身高：30%;
滤镜：色调旋转(45度);
}
50%{
身高：60%;
滤镜：色调旋转(75度);
}
100%{
身高：100%;
滤镜：色相旋转(80度);
}
}
@关键帧波{
100%{
变换：旋转(720度);
}
} 3.元素临近相融合特效：
html:
差异
分区/分区
分区/分区
/div css:box {宽度：300 px高度：100像素边框：1px纯色# eee位置：相对；滤镜：对比度(15);背景：# fff}。球1 {宽度：60px高度：60px背景：# 333;边界半径：50%;位置：绝对；左：0;top:20px；动画：lef缓出4s无限；滤镜：模糊(6px)；}。球2 {宽度：30px高度：30px背景：# 0000FF边界半径：50%;位置：绝对；右：0;top:35px；动画：钻机缓出4s无限；滤镜：模糊(6px)；}
@关键帧左{
0%{
左：0;
}
100%{
左：50%;
}
}
@关键帧绑定{
0%{
右：0;
}
100% {
右：50%;
}
} 细节注意：融合元素父级使用滤镜：对比，并且设置一个背景色（没有背景元素有模糊效果)
融合子元素使用虚化滤镜
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。