<p id="rrtt5"></p><ruby id="rrtt5"></ruby>

      系統城裝機大師 - 唯一官網:www.1999hs.com!

      當前位置:首頁 > CMS教程 > 詳細頁面

      CSS3實現蓮花綻放的動畫效果

      時間:2020-11-07來源:www.1999hs.com作者:電腦系統城

      先來看效果:

      這效果看起來挺炫,但原理并不復雜,能實現一片花瓣動起來,就能實現9片花瓣。效果的疊加而已。

      HTML:

      ?
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <section class="demo"
        <div class="box"
           <div class="leaf"></div
           <div class="leaf"></div
           <div class="leaf"></div
           <div class="leaf"></div
           <div class="leaf"></div
           <div class="leaf"></div>
           <div class="leaf"></div
           <div class="leaf"></div
           <div class="leaf"></div
        </div
      </section>

      CSS:

      ?
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      133
      134
      135
      136
      137
      138
      139
      140
      141
      142
      143
      144
      145
      146
      147
      148
      149
      150
      View Code
      body {
         background-color: #000;
      }     
       
      .demo {
         margin:0px auto;
         width: 500px;
      }
      /*蓮花花瓣的容器*/
      .box {
         position: relative;/*設置相對定位,因為花瓣都要進行絕對定位*/  
         height: 400px;
         margin-top:400px
      }
      /*花瓣進行絕對定位*/
      .box .leaf {
         position: absolute;
      }
      /*繪制蓮花花瓣*/
      .leaf {
         margin-top:0px;
         width: 200px;
         height: 200px;
         border-radius: 200px 0px;/*制作花瓣角*/
         background: -moz-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣顏色*/
              background: -webkit-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣顏色*/
         opacity: .6;
         filter:alpha(opacity=50);
         transform: rotate(135deg);/*花瓣旋轉135deg*/
         transform-origin:  top right;/*重置花瓣旋轉原點,這個很重要*/
      }
       
      @keyframes show-2 {
          0% {
           transform: rotate(135deg);
          }
          50% {
           transform: rotate(45deg);
          }
          100%{
           transform: rotate(135deg);
          }
      }
      @keyframes show-3 {
          0% {
           transform: rotate(135deg);
          }
          50% {
           transform: rotate(65deg);
          }
          100%{
           transform: rotate(135deg);
          }
      }
      @keyframes show-4 {
          0% {
           transform: rotate(135deg);
          }
          50% {
           transform: rotate(85deg);
          }
          100%{
           transform: rotate(135deg);
          }
      }
      @keyframes show-5 {
          0% {
           transform: rotate(135deg);
          }
          50% {
           transform: rotate(105deg);
          }
          100%{
           transform: rotate(135deg);
          }
      }
      @keyframes show-6 {
          0% {
           transform: rotate(135deg);
          }
          50% {
           transform: rotate(165deg);
          }
          100%{
           transform: rotate(135deg);
          }
      }
      @keyframes show-7 {
          0% {
           transform: rotate(135deg);
          }
          50% {
           transform: rotate(185deg);
          }
          100%{
           transform: rotate(135deg);
          }
      }
      @keyframes show-8 {
          0% {
           transform: rotate(135deg);
          }
          50% {
           transform: rotate(205deg);
          }
          100%{
           transform: rotate(135deg);
          }

       
      @keyframes show-9 {
          0% {
           transform: rotate(135deg);
          }
          50% {
           transform: rotate(225deg);
          }
          100%{
           transform: rotate(135deg);
          }

       
      .leaf:nth-child(1) {
       background: -moz-linear-gradient(45deg,rgba(250,250,250,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣顏色*/
      }
      .leaf:nth-child(2) {
        animation: show-2 6s ease-in-out infinite;
      }
      .leaf:nth-child(3) {
        animation: show-3 6s ease-in-out infinite;
      }
      .leaf:nth-child(4) {
        animation: show-4 6s ease-in-out infinite;
      }
      .leaf:nth-child(5) {
        animation: show-5 6s ease-in-out infinite;
      }
      .leaf:nth-child(6) {
        animation: show-6 6s ease-in-out infinite;
      }
      .leaf:nth-child(7) {
        animation: show-7 6s ease-in-out infinite;
      }
      .leaf:nth-child(8) {
        animation: show-8 6s ease-in-out infinite;
      }
      .leaf:nth-child(9) {
        animation: show-9 6s ease-in-out infinite;
      }

      以上就是CSS3實現蓮花綻放得動畫效果的詳細內容

      分享到:

      相關信息

      系統教程欄目

      欄目熱門教程

      人氣教程排行

      站長推薦

      熱門系統下載

      天堂资源中文WWW,久久精品女人天堂AV免费观看,无码专区一ⅤA亚洲V天堂,免费观看在线AⅤ天堂视频