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