Blooming flowers of CSS3 (webpage effects are updated daily)_html/css_WEB-ITnose

Today, we bring you an effect created purely with CSS3 - blooming flowers.

Let’s take a look at the effect first: http://webfront.verynet.cc/pc/flower.html

This is the effect created by pure CSS3 style. The key is The animation attribute and transform attribute are used. Please see the code below for details.

HTML structure:

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 style:

  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>

First, place a square box , control the rounded border through the border-radius attribute to show the effect of petals. Because the apex of the adjusted petal is at the upper right corner, we need to rotate it counterclockwise 45 degrees to make it vertical. Then, you need to define the animation effect. This example only configures webkit-based browsers and standard browsers. If you need to set compatibility with other browsers, you can change the animation effect, @keyfarmes, to -o-keyframes (Opera browser), @-moz- keyframes (FireFox browser), @-webkit-keyframes (Safari and Chrome browser). Once the animation is defined, it can be called. Just use animation: animation name. Here, the meaning of its parameters will not be introduced in detail. The editor feels that it should be left to the readers to understand on their own in order to be impressed.

Note: Among them, attributes such as transform attribute and transform-origin will cause compatibility issues for different browsers. Just add the corresponding browser private header, as above.

Enjoy the code, enjoy life, web page effects, updated daily.