CSS3 莲花盛开动画
See the Pen CSS3 Lotus by haiqing wang (@whqet) onCodePen.
大家先来看看效果,纯CSS3实现,为了简化问题,使用LESS和prefix free。
下面来开工,先看html
<header id="header"> <hgrounp class="white blank"> <h1>CSS3制作莲花开放</h1> </hgrounp> </header> <section class="demo"> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> </section>利用div.leaf这个DIV来实现叶子。
CSS部分,Less的一些变量和Mixin,主要有opacity、animate和transform。
/*定义变量*/ @leafWidth:150px; @bgColor:#333; /*定义Mixins*/ // OPACITY .opacity(@val){ opacity:@val; @cent:@val*100; filter:~"alpha(opacity=@{cent})"; } // Animations .animate(@val){ -webkit-animation: @val; -moz-animation: @val; -o-animation: @val; animation: @val; } // Animation Delay .animate-delay(@val){ -webkit-animation-delay: @val; -moz-animation-delay: @val; -o-animation-delay: @val; animation-delay: @val; } // Transform MIXIN .transform (@val;@origin:0 0) { -webkit-transform: @val; -webkit-transform-origin: @origin; -moz-transform: @val; -moz-transform-origin: @origin; -ms-transform: @val; -ms-transform-origin: @origin; -o-transform: @val; -o-transform-origin: @origin; transform: @val; transform-origin: @origin; }然后是布局的CSS
body{ background-color: @bgColor; } .demo{ width:@leafWidth*1.5; height: @leafWidth*1.5; margin: 300px auto 0; position: relative; .transform(rotate(135deg),center center); .leaf{ width: @leafWidth; height: @leafWidth; border-radius: @leafWidth 0px; background: linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%); .opacity(.5); position: absolute; margin-top: 400px; } }
这里,使用border-radius将矩形div变成叶子形状,利用linear-gradient实现叶子填充。
然后将叶子位置初始化
@iterations:10; @degrees:360/@iterations * 1deg; // Looping generator .loop (@index) when (@index>0){ &:nth-child(@{iterations}n + @{index}){ // Create a skew which is a number of degrees from the root element .animate-delay(@index/10 * 1s); @rotate:@index*@degrees+180deg; .transform(rotate(@rotate), top right); } .loop((@index - 1)); }LESS循环遍历.leaf,进行位置初始化,动画延迟设置。
然后定义关键帧动画
@keyframes openAnimate{ to { .transform(rotate(360deg),top right); } }在.leaf的css里,调用刚刚的遍历循环和动画。
.leaf{ width: @leafWidth; height: @leafWidth; border-radius: @leafWidth 0px; background: linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%); .opacity(.5); position: absolute; margin-top: 400px; //设置动画和遍历 .animate(openAnimate 6s ease-in-out infinite alternate); .loop(@iterations); }
完成版的CSS如下所示。
/*定义变量*/ @leafWidth:150px; @bgColor:#333; /*定义Mixins*/ // OPACITY .opacity(@val){ opacity:@val; @cent:@val*100; filter:~"alpha(opacity=@{cent})"; } // Animations .animate(@val){ -webkit-animation: @val; -moz-animation: @val; -o-animation: @val; animation: @val; } // Animation Delay .animate-delay(@val){ -webkit-animation-delay: @val; -moz-animation-delay: @val; -o-animation-delay: @val; animation-delay: @val; } // Transform MIXIN .transform (@val;@origin:0 0) { -webkit-transform: @val; -webkit-transform-origin: @origin; -moz-transform: @val; -moz-transform-origin: @origin; -ms-transform: @val; -ms-transform-origin: @origin; -o-transform: @val; -o-transform-origin: @origin; transform: @val; transform-origin: @origin; } @iterations:10; @degrees:360/@iterations * 1deg; // Looping generator .loop (@index) when (@index>0){ &:nth-child(@{iterations}n + @{index}){ // Create a skew which is a number of degrees from the root element .animate-delay(@index/10 * 1s); @rotate:@index*@degrees+180deg; .transform(rotate(@rotate), top right); } .loop((@index - 1)); } @keyframes openAnimate{ to { .transform(rotate(360deg),top right); } } body{ background-color: @bgColor; } .demo{ width:@leafWidth*1.5; height: @leafWidth*1.5; margin: 300px auto 0; position: relative; .transform(rotate(135deg),center center); .leaf{ width: @leafWidth; height: @leafWidth; border-radius: @leafWidth 0px; background: linear-gradient(45deg, rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%); .opacity(.5); position: absolute; margin-top: 400px; .animate(openAnimate 6s ease-in-out infinite alternate); .loop(@iterations); } }好了,整个效果就是这样。
大家可以到我的codepen在线修改、体验,或是下载收藏本效果。
---------------------------------------------------------------
前端开发whqet,关注web前端开发技术,分享网页相关资源。
---------------------------------------------------------------
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。