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和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
Prototype是怎么扩展DOM的
2014/10/01 面试题
本科生求职简历的自我评价
2013/10/21 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
2014信息公开实施方案
2014/02/22 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python