CSS3實現(xiàn)蓮花綻放的動畫效果

博客園 發(fā)布時間：2020-11-06 12:04:55 作者：紅葉舞秋山

這篇文章主要介紹了CSS3實現(xiàn)蓮花綻放得動畫效果，幫助大家更好得理解和制作CSS特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下

先來看效果：

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

HTML：

<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：

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);/*花瓣旋轉(zhuǎn)135deg*/
   transform-origin:  top right;/*重置花瓣旋轉(zhuǎn)原點，這個很重要*/
}

@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實現(xiàn)蓮花綻放得動畫效果的詳細內(nèi)容，更多關于CSS3 蓮花綻放動畫的資料請關注腳本之家其它相關文章！

Tag：CSS3 蓮花綻放動畫

CSS3制作圓形滾動進度條動畫的示例
這篇文章主要介紹了CSS3制作圓形滾動進度條動畫的示例，幫助大家制作CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下
2020-11-05
一篇文章帶你學習CSS3圖片邊框
這篇文章主要介紹了一篇文章帶你學習CSS3圖片邊框,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-11-04
CSS3實現(xiàn)的3D導航欄旋轉(zhuǎn)切換特效源碼
是一段基于css3 transform屬性制作的綠色導航欄鼠標懸停3D翻轉(zhuǎn)切換特效代碼，非常有意思，歡迎有興趣的朋友前來下載使用
2020-11-04
CSS3實現(xiàn)時間軸特效
這篇文章主要介紹了CSS3如何實現(xiàn)時間軸特效，幫助大家更好的理解和制作css3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下
2020-11-02
CSS3制作皮卡丘動畫壁紙的示例
這篇文章主要介紹了CSS3制作皮卡丘動畫壁紙的示例，幫助大家更好的理解和制作CSS3特效，感興趣的朋友可以了解下
2020-11-02
詳解background屬性的8個屬性值(面試題)
這篇文章主要介紹了background屬性的8個屬性值(面試題)，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2020-11-02
純css3制作的發(fā)光loading圖標加載動畫特效源碼
是一段基于純CSS3實現(xiàn)的發(fā)光的圓角框里面嵌入loading圖標加載動畫效果代碼，非常符合現(xiàn)在人們的審美模式，采用了平滑模板效果，非常好看，歡迎有興趣的朋友前來下載使用
2020-10-29
css3實現(xiàn)二維碼掃描特效的示例
這篇文章主要介紹了css3實現(xiàn)二維碼掃描特效的示例，幫助大家更好的制作CSS特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下
2020-10-29
CSS3實現(xiàn)彩色進度條動畫的示例
這篇文章主要介紹了CSS3實現(xiàn)彩色進度條動畫的示例，幫助大家更好的制作CSS特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下
2020-10-29
基于css3制作秋天落葉主題動畫特效代碼
純css3卡通的書本咖啡，秋天樹葉飄落動畫特效，非常不錯，喜歡的朋友快來下載源碼吧
2020-10-29