css3 呼吸的莲花_CSS3制作莲花盛开动画
[css]代码库
CSS3制作莲花盛开动画
body {
background-color: #d4d4d4;
}
.demo {
margin: 40px auto 0;
width: 500px;
}
.box {
position: relative;
height: 400px;
}
.box .leaf {
position: absolute;
}
.leaf {
margin-top: 400px;
width: 300px;
height: 300px;
border-radius: 300px 0px;
background: -*-linear-gradient(45deg, rgba(188, 190, 192, 1) 8%, rgba(158, 31, 99, 1) 30%, rgba(158, 31, 99, 1) 100%);
opacity: 0.5;
filter:alpha(opacity=50);
transform: rotate(45deg);
transform-origin: top right;
}
.leaf:nth-child(2) {
animation: show-2 5s ease-in-out infinite;
}
.leaf:nth-child(3) {
animation: show-3 5s ease-in-out infinite;
}
.leaf:nth-child(4) {
animation: show-4 5s ease-in-out infinite;
}
.leaf:nth-child(5) {
animation: show-5 5s ease-in-out infinite;
}
.leaf:nth-child(6) {
animation: show-6 5s ease-in-out infinite;
}
.leaf:nth-child(7) {
animation: show-7 5s ease-in-out infinite;
}
.leaf:nth-child(8) {
animation: show-8 5s ease-in-out infinite;
}
@keyframes show-2 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(71deg);
}
}
@keyframes show-3 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(96deg);
}
}
@keyframes show-4 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(123deg);
}
}
@keyframes show-5 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(149deg);
}
}
@keyframes show-6 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(175deg);
}
}
@keyframes show-7 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(200deg);
}
}
@keyframes show-8 {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(225deg);
}
}
CSS3制作莲花盛开动画
作者:藤藤
[代码运行效果截图]
[源代码打包下载]
css3 呼吸的莲花_CSS3制作莲花盛开动画相关推荐
- css3 呼吸的莲花_CSS3制作莲花开放
案例的结构是非常的简单,就是用八个Div当作莲花的八个花瓣; 这里所用到的CSS3知识点并不复杂,只是要对他的概念了解清楚.特别是动画属性Animation里的每个属性值的概念,因为你没有理解清楚他们 ...
- css3 呼吸的莲花_CSS3实现莲花绽放的动画效果
这篇文章我们来讲一下在网站建设中,CSS3实现莲花绽放的动画效果.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 先来看效果: 这效果看起来挺炫,但原理并不复杂,能实现一片花 ...
- css3蒲公英飘动效果_css3 云朵飘动效果动画
先贴代码: css部分: @-webkit-keyframes fadeIn { 0% { opacity: 0.2;width:100%; /*初始状态 透明度为0.2大小为100%*/ } 10% ...
- css3 呼吸的莲花_CSS3 莲花盛开动画
1 2 3 CSS3制作莲花开放动画-柯乐义 4 5 6 /*定义Mixins*/ 7 @keyframes openAnimate{ 8 to {9 -webkit-transform:rotate ...
- CSS3 莲花盛开动画
点击这里查看效果:http://keleyi.com/a/bjad/32gxxsaw.htm 或者:http://keleyi.com/keleyi/phtml/css3/10a.htm 效果图: 代 ...
- css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYP ...
- 基于html5动画效果毕业论文,毕业设计(论文)-基于HTML5和CSS3的响应式网页制作.doc...
第PAGE \* MERGEFORMAT1页(共16页) 全日制本科生毕业论文 题 目: 基于HTML5和CSS3的响应式网页制作 学 院: 计算机与信息科学学院 专业年级: 计算机科学与技术2011 ...
- 满屏飞舞的心HTML动画,CSS3制作蝴蝶飞舞动画
CSS3制作蝴蝶飞舞动画 body{ background-color: lightblue; } #container { perspective: 600px; perspective-origi ...
最新文章
- 安全牛:“新一代SOC研究报告”之市场指南及技术指南点评
- 阿里开源自主研发的 DFSMN 语音识别模型,引谷歌论文引用
- EndNote的PDF Handing功能, 让你的PDF管理井井有条
- crontab如何精确到秒
- Wordpress插件检测机制原理
- gitee自动部署的使用
- win7下安装 LINUX虚拟机
- FIle类常用工具方法整理(持续更新)
- Win软件 - Listary
- 夜间灯光数据dn值_一种基于遥感夜间灯光数据和能源消耗统计数据的城市能耗量空间化方法与流程...
- [html] 微软雅黑是有版权的,在页面中使用font-family:Microsoft YaHei会不会有版权问题呢?
- 【跟我一起学Linux之Ubuntu】-概述与安装配置笔记
- 使用多个路由器有线桥接实现无线漫游/Lan口连接
- iis7无法写入配置文件,更换进入方式解决
- 【pd.to_datetime】时间object转换datetime实例
- ol中闪烁点动画的实现
- ASP.NET中的KRE是什么?
- 很简单的Python小程序:使用random库 实现随机选取元素
- dnf跨四服务器什么时候修复,DNF:跨四大区服务器炸了,数据回档导致多少玩家错过了毕业装备...
- iOS设备播放mkv格式视频无声音解决