亚洲精品中文字幕无码专区一,中文字幕av一区乱码深夜动态福利,粗大的内捧猛烈进出少妇

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

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

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

          時間:2020-11-07來源:www.snowmanhill.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實現蓮花綻放得動畫效果的詳細內容

          分享到:

          相關信息

          系統教程欄目

          欄目熱門教程

          人氣教程排行

          站長推薦

          熱門系統下載

          亚洲精品中文字幕无码专区一,中文字幕av一区乱码深夜动态福利,粗大的内捧猛烈进出少妇