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 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php实现文件编码批量转换
2014/03/10 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
php生成RSS订阅的方法
2015/02/13 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
关于vue面试题汇总
2018/03/20 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python机器学习之随机森林(七)
2018/03/26 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Python常见数字运算操作实例小结
2019/03/22 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
h5封装下拉刷新
2020/08/25 HTML / CSS
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
水务局局长岗位职责
2013/11/28 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
欢迎新生标语
2014/10/06 职场文书
先进个人申报材料
2014/12/30 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
遗嘱范文
2015/08/07 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python