CSS3 莲花盛开动画
来源:互联网 发布:java编写桌面应用程序 编辑:程序博客网 时间:2024/04/27 18:38
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前端开发技术,分享网页相关资源。
---------------------------------------------------------------
12 0
- CSS3 莲花盛开动画
- CSS3 莲花盛开动画
- 纯CSS3动态莲花
- css3动画
- css3动画
- css3动画
- css3动画
- css3动画
- CSS3动画
- css3.动画
- CSS3动画
- CSS3动画
- CSS3动画
- css3-动画
- CSS3动画
- css3动画
- css3动画
- CSS3 动画
- subversion 的服务运行方法
- VC下fopen如何支持中文
- starting jquery
- 普通人的编辑利器——Vim
- 最小/大堆删除元素算法
- CSS3 莲花盛开动画
- 黑马程序员_7K面试题_银行业务系统
- 建一个读书日志~~
- git学习
- Union和Union All的区别
- Java对象存储
- Java杂记
- Java初始化与清理
- SQL Connect By 的例子