首页 > 代码库 > CSS3之绽放的花朵(网页效果--每日一更)
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等属性，对于不同浏览器会产生兼容性问题，只需添加对应的浏览器私有头即可，如上。
享受代码，享受生活，网页效果，每日一更。
CSS3之绽放的花朵(网页效果--每日一更)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。