CSS3之绽放的花朵(网页效果--每日一更)

　　今天，带来的是纯CSS3打造的效果--绽放的花朵。

　　先来看效果吧：http://webfront.verynet.cc/pc/flower.html

　　这是纯CSS3样式打造的效果，关键是采用了animation属性和transform属性。详细请看下面代码。

　　HTML结构：

1 <div class="div1"></div>
2 <div class="div2"></div>
3 <div class="div3"></div>
4 <div class="div4"></div>
5 <div class="div5"></div>
6 <div class="div6"></div>
7 <div class="div7"></div>
8 <div class="div8"></div>
9 <div class="div9"></div>

　　CSS样式：

  1    <style type="text/css">
  2         .div1{
  3             position:absolute;
  4             top:300px;left:500px;
  5             background:pink;opacity:0.6;width:300px;height:300px;
  6             z-index: 1;
  7             border-radius:300px 0px;;
  8             -webkit-transform-origin: 0px 300px;
  9             -webkit-transform: rotate(-45deg);
 10             -webkit-animation:wa1 10s ease 2s infinite alternate;
 11             transform-origin: 0px 300px;
 12             transform: rotate(-45deg);
 13             animation:a1 10s ease 2s infinite alternate;
 14         }
 15         .div2{
 16             position:absolute;
 17             top:300px;left:500px;
 18             background:pink;opacity:0.6;width:300px;height:300px;
 19             z-index: 2;
 20             border-radius:300px 0px;;
 21             -webkit-transform-origin: 0px 300px;
 22             -webkit-transform: rotate(-45deg);
 23             -webkit-animation:wa2 10s ease 2s infinite alternate;
 24             transform-origin: 0px 300px;
 25             transform: rotate(-45deg);
 26             animation:a2 10s ease 2s infinite alternate;
 27
 28         }
 29         .div3{
 30             position:absolute;
 31             top:300px;left:500px;
 32             background:pink;opacity:0.6;width:300px;height:300px;
 33             z-index: 3;
 34             border-radius:300px 0px;;
 35             -webkit-transform-origin: 0px 300px;
 36             -webkit-transform: rotate(-45deg);
 37             -webkit-animation:wa3 10s ease 2s infinite alternate;
 38             transform-origin: 0px 300px;
 39             transform: rotate(-45deg);
 40             animation:a3 10s ease 2s infinite alternate;
 41         }
 42         .div4{
 43             position:absolute;
 44             top:300px;left:500px;
 45             background:pink;opacity:0.6;width:300px;height:300px;
 46             z-index: 4;
 47             border-radius:300px 0px;;
 48             -webkit-transform-origin: 0px 300px;
 49             -webkit-transform: rotate(-45deg);
 50             -webkit-animation:wa4 10s ease 2s infinite alternate;
 51             transform-origin: 0px 300px;
 52             transform: rotate(-45deg);
 53             animation:a4 10s ease 2s infinite alternate;
 54         }
 55         .div5{
 56             position:absolute;
 57             top:300px;left:500px;
 58             background:pink;opacity:0.6;width:300px;height:300px;
 59             z-index: 5;
 60             border-radius:300px 0px;;
 61             -webkit-transform-origin: 0px 300px;
 62             -webkit-transform: rotate(-45deg);
 63             -webkit-animation:wa5 10s ease 2s infinite alternate;
 64             transform-origin: 0px 300px;
 65             transform: rotate(-45deg);
 66             animation:a5 10s ease 2s infinite alternate;
 67         }
 68         .div6{
 69             position:absolute;
 70             top:300px;left:500px;
 71             background:pink;opacity:0.6;width:300px;height:300px;
 72             z-index: 6;
 73             border-radius:300px 0px;;
 74             -webkit-transform-origin: 0px 300px;
 75             -webkit-transform: rotate(-45deg);
 76             -webkit-animation:wa6 10s ease 2s infinite alternate;
 77             transform-origin: 0px 300px;
 78             transform: rotate(-45deg);
 79             animation:a6 10s ease 2s infinite alternate;
 80         }
 81         .div7{
 82             position:absolute;
 83             top:300px;left:500px;
 84             background:pink;opacity:0.6;width:300px;height:300px;
 85             z-index: 7;
 86             border-radius:300px 0px;;
 87             -webkit-transform-origin: 0px 300px;
 88             -webkit-transform: rotate(-45deg);
 89             -webkit-animation:wa7 10s ease 2s infinite alternate;
 90             transform-origin: 0px 300px;
 91             transform: rotate(-45deg);
 92             animation:a7 10s ease 2s infinite alternate;
 93         }
 94         .div8{
 95             position:absolute;
 96             top:300px;left:500px;
 97             background:pink;opacity:0.6;width:300px;height:300px;
 98             z-index: 8;
 99             border-radius:300px 0px;;
100             -webkit-transform-origin: 0px 300px;
101             -webkit-transform: rotate(-45deg);
102             -webkit-animation:wa8 10s ease 2s infinite alternate;
103             transform-origin: 0px 300px;
104             transform: rotate(-45deg);
105             animation:a8 10s ease 2s infinite alternate;
106         }
107         .div9{
108             position:absolute;
109             top:300px;left:500px;
110             background:pink;opacity:0.6;width:300px;height:300px;
111             z-index: 9;
112             border-radius:300px 0px;;
113             -webkit-transform-origin: 0px 300px;
114             -webkit-transform: rotate(-45deg);
115             transform-origin: 0px 300px;
116             transform: rotate(-45deg);
117         }
118         @-webkit-keyframes wa1{
119             from{-webkit-transform: rotate(-45deg);}
120             to{-webkit-transform: rotate(-125deg);}
121         }
122         @keyframes a1{
123             from{transform: rotate(-45deg);}
124             to{transform: rotate(-125deg);}
125         }
126         @-webkit-keyframes wa2{
127             from{-webkit-transform: rotate(-45deg);}
128             to{-webkit-transform: rotate(-105deg);}
129         }
130         @keyframes a2{
131             from{transform: rotate(-45deg);}
132             to{transform: rotate(-105deg);}
133         }
134         @-webkit-keyframes wa3{
135             from{-webkit-transform: rotate(-45deg);}
136             to{-webkit-transform: rotate(-85deg);}
137         }
138         @keyframes a3{
139             from{transform: rotate(-45deg);}
140             to{transform: rotate(-85deg);}
141         }
142         @-webkit-keyframes wa7{
143             from{-webkit-transform: rotate(-45deg);}
144             to{-webkit-transform: rotate(-65deg);}
145         }
146         @keyframes a7{
147             from{transform: rotate(-45deg);}
148             to{transform: rotate(-65deg);}
149         }
150         @-webkit-keyframes wa4{
151             from{-webkit-transform: rotate(-45deg);}
152             to{-webkit-transform: rotate(35deg);}
153         }
154         @keyframes a4{
155              from{transform: rotate(-45deg);}
156              to{transform: rotate(35deg);}
157          }
158         @-webkit-keyframes wa5{
159             from{-webkit-transform: rotate(-45deg);}
160             to{-webkit-transform: rotate(15deg);}
161         }
162         @keyframes a5{
163             from{transform: rotate(-45deg);}
164             to{transform: rotate(15deg);}
165         }
166         @-webkit-keyframes wa6{
167             from{-webkit-transform: rotate(-45deg);}
168             to{-webkit-transform: rotate(-5deg);}
169         }
170         @keyframes a6{
171             from{transform: rotate(-45deg);}
172             to{transform: rotate(-5deg);}
173         }
174         @-webkit-keyframes wa8{
175             from{-webkit-transform: rotate(-45deg);}
176             to{-webkit-transform: rotate(-25deg);}
177         }
178         @keyframes a8{
179             from{transform: rotate(-45deg);}
180             to{transform: rotate(-25deg);}
181         }
182     </style>

　　首先，先将一个正方形的盒子，通过border-radius属性控制圆角边框，令其展现出花瓣的效果。因为，调整出来的花瓣的顶点是在右上角，所以我们需要将其逆时针旋转45度，令其垂直。然后，就需要定义动画效果了。此例，仅仅是对webkit内核的浏览器和标准浏览器进行配置，如需要对其他浏览器设置兼容，可以将动画效果，@keyfarmes改为-o-keyframes(Opera浏览器)，@-moz-keyframes(FireFox浏览器)，@-webkit-keyframes(Safari and Chrome浏览器)。当定义好了动画，就可以进行调用了。使用animation:动画名 即可。在此，不详细介绍其参数的含义。小编，觉得应由读者自行了解，方能印象深刻。

　　注：其中，tranform属性、tranform-origin等属性，对于不同浏览器会产生兼容性问题，只需添加对应的浏览器私有头即可，如上。

　　享受代码，享受生活，网页效果，每日一更。

时间： 2024-08-26 11:31:48

CSS3之绽放的花朵(网页效果--每日一更)的相关文章

CSS3之图片3D翻转效果(网页效果--每日一更)

今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:http://localhost:63342/webfront/PC/rotate.html 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性.这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果.详情请看代码. HTML结构: 1 <div id="content"> 2 <div

HTML5之Canvas时钟(网页效果--每日一更)

今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:http://webfront.verynet.cc/pc/canvas-clock.html 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式, HTML5 Canvas通过JavaScript调用CanvasAPI,在每一帧完全重绘屏幕上的位图.详细将在下面代码进行说明. HTML结构代码

JQuery图片轮播滚动效果(网页效果--每日一更)

今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:http://webfront.verynet.cc/pc/index.html 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的后面,详细请看代码. HTML结构代码如下: 1 <div class="content"> 2 <div class="box"> 3 /*滚动的盒子*/ 4 <ul id

CSS3实战开发:使用CSS3实现photoshop的过滤效果

原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我们使用CSS来给web图像添加相同的效果. 首先我们先在网页中显示一张图片,html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="s

使用 jQuery &amp; CSS3 实现优雅的手风琴效果

手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外观. 效果演示     插件下载 HTML示例代码: <ul class="accordion" id="accordion"> <li class="bg1"> <div class="heading&quo

CSS3实现8种Loading效果【二】

CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></sp

jQuery中常用网页效果应用

一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form action="" method="post" id="regForm"> <fieldset> <legend>个人基本信息</legend> <div> <label for="user

css3实现的动态月食效果代码实例

css3实现的动态月食效果代码实例:本章节分享一段代码实例,它利用CSS3实现了动态的月食效果.动画其实比较简单简短,需要的朋友可以自行做一下分析,这里就不多介绍了.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

小tip:CSS3下的渐变文字效果实现——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面中看到类似下面的效果: 相应的HTML代码如下: <h2 class="text-gradient" data-text=