zoukankan      html  css  js  c++  java
  • CSS3之绽放的花朵(网页效果--每日一更)

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

      先来看效果吧:亲,请点击这里

      这是纯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等属性,对于不同浏览器会产生兼容性问题,只需添加对应的浏览器私有头即可,如上。

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

  • 相关阅读:
    全宁对医药行业销售代表的介绍
    effective c#读书笔记之二 静态成员的初始化
    自学笔记
    effective c#读书笔记之一
    如何判断表中是否有值
    领域驱动
    VIM 打造自己的VIM界面!
    Jqueryui的用法!
    php中io操作!
    php中Http请求!
  • 原文地址:https://www.cnblogs.com/ChampionLam/p/3985036.html
Copyright © 2011-2022 走看看