介绍 & lt; section 类=癲emo"祝辞,,
& lt;才能div 类=癰ox"祝辞,,
,,,,& lt; div 类=發eaf"祝辞& lt;/div>,,
,,,,& lt; div 类=發eaf"祝辞& lt;/div>,,
,,,,& lt; div 类=發eaf"祝辞& lt;/div>,,
,,,,& lt; div 类=發eaf"祝辞& lt;/div>,,
,,,,& lt; div 类=發eaf"祝辞& lt;/div>,,
,,,,& lt; div 类=發eaf"祝辞& lt;/div>,
,,,,& lt; div 类=發eaf"祝辞& lt;/div>,,
,,,,& lt; div 类=發eaf"祝辞& lt;/div>,,
,,,,& lt; div 类=發eaf"祝辞& lt;/div>,,
& lt;才能/div>,,
& lt;/section> View Code
body {
,,,背景颜色:# 000;
},,,,,,
.demo {
,,保证金:0 px 汽车;
,,,宽度:500 px;
}/*莲花花瓣的容器*/.box {
,,,位置:相对,/*设置相对定位,因为花瓣都要进行绝对定位*/,,,
,,,身高:400 px;
,,margin-top: 400 px
}/*花瓣进行绝对定位*/.box .leaf {
,,,位置:绝对;
}/*绘制莲花花瓣*/.leaf {
,,margin-top: 0 px;
,,,宽度:200 px;
,,,身高:200 px;
,,,这个特性:200 px 0 px;/*制作花瓣角*/,,,背景:-moz-linear-gradient(45度,rgba (188190192 1), 8%, rgba(99年158年,31日,1),30%,rgba(99年158年,31日,1),100%);/*制作花瓣颜色*/,,,,,,,背景:,-webkit-linear-gradient(45度,rgba (188190192 1), 8%, rgba(99年158年,31日,1),30%,rgba(99年158年,31日,1),100%);/*制作花瓣颜色*/,,,不透明度:6;
,,过滤器:α(不透明度=50);
:,,变换,旋转(135度),/*花瓣旋转135度*/,,,transform-origin:, top 权利;/*重置花瓣旋转原点,这个很重要*/}
@keyframes show-2 {
,,,0%,{
,,,,变换:,旋转(135度);
,,,}
,,,50%,{
,,,,变换:,旋转(45度);
,,,}
,,,{100%
,,,,变换:,旋转(135度);
,,,}
}
@keyframes show-3 {
,,,0%,{
,,,,变换:,旋转(135度);
,,,}
,,,50%,{
,,,,变换:,旋转(65度);
,,,}
,,,{100%
,,,,变换:,旋转(135度);
,,,}
}
@keyframes show-4 {
,,,0%,{
,,,,变换:,旋转(135度);
,,,}
,,,50%,{
,,,,变换:,旋转(85度);
,,,}
,,,{100%
,,,,变换:,旋转(135度);
,,,}
}
@keyframes show-5 {
,,,0%,{
,,,,变换:,旋转(135度);
,,,}
,,,50%,{
,,,,变换:,旋转(105度);
,,,}
,,,{100%
,,,,变换:,旋转(135度);
,,,}
}
@keyframes show-6 {
,,,0%,{
,,,,变换:,旋转(135度);
,,,}
,,,50%,{
,,,,变换:,旋转(165度);
,,,}
,,,{100%
,,,,变换:,旋转(135度);
,,,}
}
@keyframes show-7 {
,,,0%,{
,,,,变换:,旋转(135度);
,,,}
,,,50%,{
,,,,变换:,旋转(185度);
,,,}
,,,{100%
,,,,变换:,旋转(135度);
,,,}
}
@keyframes show-8 {
,,,0%,{
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关CSS3如何实现莲花绽放的动画效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强>先来看效果:
这效果看起来挺炫,但原理并不复杂,能实现一片花瓣动起来,就能实现9片花瓣。效果的叠加而已。
<强> HTML:
<强> CSS:
