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前端開發技術，分享網頁相關資源。
---------------------------------------------------------------