css3+jq创作含苞待放的荷花
发布时间：2014-02-20 17:05:31 作者：佚名 
我要评论
我要评论看到标题编写的含苞待放的荷花有些不可思议，不过确实可以，下面有个不错的示例使用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>
相关文章
CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局，本文介绍CSS3 最强二维布局系2025-02-27- 本文介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同2025-02-27
文章介绍了如何使用CSS3实现一个雷达探测扫描的效果,包括夜色背景、蜘蛛网盘、扫描体的转动效果、尾巴阴影以及被扫描到的光点,通过HTML和CSS的配合,实现了丰富的动画效果,2025-02-21- CSS3的Flexbox是一种强大的布局模式,通过设置display:flex可以轻松实现对齐、排列和分布网页元素,它解决了传统布局方法中的对齐、间距分配和自适应布局等问题,接下来通过本2025-02-19
本文给大家介绍css3 实现icon刷新转动效果，文章开头给大家介绍了webkit-transform、animation、@keyframes这三个属性，结合实例代码给大家介绍的非常详细，感兴趣的朋友一2025-02-19- CSS3过渡属性用于实现元素从一种样式平滑过渡到另一种样式,通过设置transition-property过渡属性、transition-duration过渡时长transition-timing-function过渡函数和trans2025-02-19
- 本文介绍了如何使用CSS3创建一个简单的动态旋转加载样式,通过定义一个带有类名“loader”的HTML元素,并使用CSS样式和@keyframes规则来实现旋转动画,你可以根据需要调整样式2025-02-19
- 这篇文章主要介绍了如何使用CSS3的transition属性实现平滑的过渡动画，本文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧2025-02-13
本文介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果，感兴趣的朋2025-02-11- CSS3和SVG的结合使用为网页设计带来了创新的动态视觉效果,本文通过一个圆形进度条的动画特效示例,展示了如何利用CSS3的动画功能和SVG的矢量图形能力来创建丰富的用户交互体2024-10-24
最新评论