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 相关文章推荐
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
供参考的 php 学习提高路线分享
2011/10/23 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
jQuery延迟执行的实现方法
2016/12/21 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Python常见数据类型转换操作示例
2019/05/08 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
安全生产责任书范本
2014/04/15 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
安全保证书怎么写
2015/02/28 职场文书
教师调动申请报告
2015/05/18 职场文书
寒假致家长的一封信
2015/10/10 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
方法汇总:Python 安装第三方库常用
2022/04/26 Python
PyTorch中permute的使用方法
2022/04/26 Python