css3 呼吸的莲花_CSS3 莲花盛开动画

See the Pen CSS3 Lotus by haiqing wang (@whqet) onCodePen.

大家先来看看效果，纯CSS3实现，为了简化问题，使用LESS和prefix free。

下面来开工，先看html

CSS3制作莲花开放

利用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:[email protected] * 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:@[email protected]+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:[email protected] * 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:@[email protected]+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前端开发技术，分享网页相关资源。

---------------------------------------------------------------

原文：http://blog.csdn.net/whqet/article/details/18954031