css3+jq创作含苞待放的荷花


Posted in HTML / CSS onFebruary 20, 2014

css3+jq创作含苞待放的荷花 

复制代码
代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>flower</title>
<style type="text/css">body,html,div,span,p,ul,li{margin:0;padding:0;}
body{ background:#000;}
#flower{width:300px; position:absolute; top:50%;left:50%; margin:-115px 0 0 -150px; height:330px;}
#leaf { position:relative; z-index:2;}
#leaf strong{ width:75px; height:75px; display:block; border:1px solid #FB96C2; box-shadow:0 0 1px #FB96C2; /* background:red;*/ background:-webkit-linear-gradient(top, #fff ,#FFAFD6 30%, #F493C0 70%,#DB5E86 100%); border-radius:75px 0 75px 0; -webkit-transform:rotate(90deg); position:absolute; transition:all 0.5s; }
#leaf strong:first-child{-webkit-transform:rotate(130deg);}
#leaf strong:nth-child(2){-webkit-transform:rotate(120deg); left:-12px; top:7px;}
#leaf strong:nth-child(3){-webkit-transform:rotate(143deg); left:12px; top:7px;}
#leaf strong:nth-child(4){-webkit-transform:rotate(150deg); left:12px; top:7px;}
#leaf strong:nth-child(5){-webkit-transform:rotate(120deg); left:-12px; top:7px;}
#leaf strong:nth-child(6){-webkit-transform:rotate(160deg); left:26px; top:11px;}
#leaf strong:nth-child(7){-webkit-transform:rotate(105deg); left:-26px; top:11px;}
/*#leaf strong:nth-child(4){-webkit-transform:rotate(110deg); left:-18px; top:12px;}
#leaf strong:nth-child(5){-webkit-transform:rotate(170deg); left:18px; top:12px;}
#leaf strong:nth-child(6){-webkit-transform:rotate(185deg); left:38px; top:27px;}
#leaf strong:nth-child(7){-webkit-transform:rotate(85deg); left:-38px; top:27px;}*/
#three{ position:relative; margin-top:-10px;}
#three div{width:8px; height:200px; background:#390; margin:100px 0 0 37px; border-radius:10px; position:absolute; z-index:1; border-radius:200px 0 0 0;}
#three strong{width:6px; height:6px; border-radius:6px; background:#3B7B6D; display:inline-block; position:absolute; left:34px; top:115px;}
#three strong:nth-child(2){top:150px;left:45px;}
#three strong:nth-child(3){top:185px}
#three strong:nth-child(4){top:220px;left:45px;}
#three strong:nth-child(5){top:255px}</style>
</head>
<body>
<div id="flower">
<div id="leaf">
<strong></strong>
<strong></strong>
<strong></strong>
<strong></strong>
<strong></strong>
<strong></strong>
<strong></strong>
</div>
<div id="three">
<div></div>
<strong></strong>
<strong></strong>
<strong></strong>
<strong></strong>
<strong></strong>
<strong></strong>
<strong></strong>
<strong></strong>
<strong></strong>
<strong></strong>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">$(function(){
setTimeout(function(){
$("#leaf strong:eq(6)").css({left:'-38px',top:'27px',transform:'rotate(85deg)'})
$("#leaf strong:eq(5)").css({left:'38px',top:'27px',transform:'rotate(185deg)'})
$("#leaf strong:eq(4)").css({left:'-18px',top:'12px',transform:'rotate(110deg)'})
$("#leaf strong:eq(3)").css({left:'18px',top:'12px',transform:'rotate(170deg)'})
},1000)
setTimeout(function(){
$("#leaf strong:eq(6)").css({top:'48px',left:'-38px',transform:'rotate(80deg)'})
$("#leaf strong:eq(5)").css({left:'45',top:'48px',transform:'rotate(190deg)'})
$("#leaf strong:eq(4)").css({left:'-42px',top:'28px',transform:'rotate(95deg)'})
$("#leaf strong:eq(3)").css({left:'42px',top:'28px',transform:'rotate(165deg)'})
},2000)
setTimeout(function(){
$("#leaf strong:eq(6)").css({top:'300px',left:'10px'})
},3000)
setTimeout(function(){
$("#leaf strong:eq(5)").css({top:'270px',left:'100px'})
},3100)
setTimeout(function(){
$("#leaf strong:eq(4)").css({top:'210px',left:"-70px"})
},3200)
setTimeout(function(){
$("#leaf strong:eq(3)").css({top:'160px',left:"50px"})
},3300)
})</script>
</body>
</html>
HTML / CSS 相关文章推荐
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
css3隔行变换色实现示例
Feb 19 #HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 #HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 #HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 #HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 #HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 #HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 #HTML / CSS
You might like
php中jpgraph类库的使用介绍
2013/08/08 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
小程序自定义单页面、全局导航栏的实现代码
2019/03/15 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python实现静态服务器
2019/09/05 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
优秀毕业生自我鉴定
2014/01/19 职场文书
水毁工程实施方案
2014/04/01 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
简单租房协议书
2014/10/21 职场文书
计算机实训报告总结
2014/11/05 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书