欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS3來繪制一個月食圖案

segmentfault   發(fā)布時間：2015-07-18 17:03:30   作者：Dont   我要評論
這篇文章主要介紹了使用CSS3來繪制一個月食圖案,其中用到了不少CSS3中基本的繪圖方法,是一個良好的學習示例,需要的朋友可以參考下

css3的animation是個好東西，之前應景的七夕表白愛心圖。(都是中午午休時候的突發(fā)奇想。)
想想，應該在很多應節(jié)場合用css玩點有意思的。
突然想到上次的月食,那就玩玩。
看了一個div的炫技網站.
畫個月亮嘛，還是嘗試用一個div來實現(xiàn)，主div做背景黑夜，before做月亮，after做擋住月亮的黑影。
用position控制位置，用animation控制動畫。

CSS Code復制內容到剪貼板
  1. .moonback{   
  2.     width: 600px;   
  3.     height: 600px;   
  4.     background-color: #000;   
  5.     margin: 0 auto;   
  6.   
  7.     position: relative;   
  8.   
  9.   }   
  10.   .moonback::before{   
  11.     content: ",";   
  12.     display: block;   
  13.     position: absolute;   
  14.     left: 200px;   
  15.     top: 100px;   
  16.   
  17.     width: 200px;   
  18.     height: 200px;   
  19.     background-color: #ff0;   
  20.     border-radius: 100px;   
  21.   }   
  22.   .moonback::after{   
  23.     content: " ";   
  24.     display: block;   
  25.     position: absolute;   
  26.     left: 26px;   
  27.     top: 0px;   
  28.   
  29.     width: 200px;   
  30.     height: 200px;   
  31.     background-color: #000;   
  32.     border-radius: 100px;   
  33.   
  34.     -webkit-animation: 8s dog linear infinite;   
  35.     -moz-animation: 8s dog linear infinite;   
  36.     animation: 8s dog linear infinite;   
  37.   }   
  38.   
  39.   @-webkit-keyframes dog {   
  40.     0% {    
  41.       left:27px;   
  42.       top: 0px;   
  43.     }   
  44.     100% {    
  45.       left: 399px;   
  46.       top: 216px;   
  47.     }   
  48.   }   
  49.   @-moz-keyframes dog {   
  50.     0% {    
  51.       left:27px;   
  52.       top: 0px;   
  53.     }   
  54.     100% {    
  55.       left: 399px;   
  56.       top: 216px;   
  57.     }   
  58.   }   
  59.   @keyframes dog {   
  60.     0% {    
  61.       left:27px;   
  62.       top: 0px;   
  63.     }   
  64.     100% {    
  65.       left: 399px;   
  66.       top: 216px;   
  67.     }   
  68.   }  

最好body也設成背景黑，那就更好了~

等等，看不到星星的天空，缺少了幸福感。
正好偷師一下，一個div里的美隊盾做法，直接用★
也給個動畫效果，放大縮小~

CSS Code復制內容到剪貼板
  1. .star{   
  2.     position: absolute;   
  3.   }   
  4.   .star::before{   
  5.     content: "★";   
  6.     display: block;   
  7.     position: absolute;   
  8.     left: 10px;   
  9.     top: 20px;   
  10.   
  11.     width: auto;   
  12.     height: auto;   
  13.     color: #fff;   
  14.     -webkit-transform:scale(0.5);   
  15.     -moz-transform:scale(0.5);   
  16.     transform:scale(0.5);   
  17.   
  18.     -webkit-animation: 1s starlight linear infinite;   
  19.     -moz-animation: 1s starlight linear infinite;   
  20.     animation: 1s starlight linear infinite;   
  21.   }   
  22.   .star::after{   
  23.     content: "★";   
  24.     display: block;   
  25.     position: absolute;   
  26.     left: 40px;   
  27.     top: 120px;   
  28.   
  29.     width: auto;   
  30.     height: auto;   
  31.     color: #fff;   
  32.     -webkit-transform:scale(0.5);   
  33.     -moz-transform:scale(0.5);   
  34.     transform:scale(0.5);   
  35.   
  36.     -webkit-animation: 2s starlight linear infinite;   
  37.     -moz-animation: 2s starlight linear infinite;   
  38.     animation: 2s starlight linear infinite;   
  39.   }   
  40.   
  41.   @-webkit-keyframes starlight {   
  42.     0% {    
  43.       -webkit-transform:scale(0.5);   
  44.     }   
  45.     100% {    
  46.       -webkit-transform:scale(0.1);   
  47.     }   
  48.   }   
  49.   @-moz-keyframes starlight {   
  50.     0% {    
  51.       -moz-transform:scale(0.5);   
  52.     }   
  53.     100% {    
  54.       -moz-transform:scale(0.1);   
  55.     }   
  56.   }   
  57.   @keyframes starlight {   
  58.     0% {    
  59.       transform:scale(0.5);   
  60.     }   
  61.     100% {    
  62.       transform:scale(0.1);   
  63.     }   
  64.   }  

 效果圖如下：
2015718171530640.png (600×312)

 效果頁面>>

完畢，嗯，再給月亮加個顏色漸變？

相關文章

  • 純css3繪制的小黃人頭像動畫特效源碼

    這是一款采用純css3繪制的小黃人頭像動畫特效源碼，畫面中的小黃人手腳、眼睛、嘴以及頭發(fā)都可呈現(xiàn)運動效果。該特效完全采用純css3技術實現(xiàn)，沒有引入外部圖片資源
    2016-04-06

  • 純css3繪制的QQ企鵝動畫特效源碼

    這是一款采用純css3繪制的QQ企鵝動畫特效源碼，畫面上的企鵝可呈現(xiàn)出雙手上下擺動的效果，該特效采用純css3技術繪制，沒有引入任何外部圖片
    2016-04-02

  • 純css3繪制的精美購物優(yōu)惠券樣式效果源碼

    這是一款采用純css3繪制的精美購物優(yōu)惠券樣式效果源碼，完全采用css3的徑向漸變功能實現(xiàn)的優(yōu)惠券圖片效果，沒有使用任何外部圖片
    2016-04-01

  • 純css3繪制的哆啦a夢機器貓頭像效果源碼

    這是一款基于純css3繪制的哆啦a夢機器貓頭像效果源碼，沒有采用任何圖片即可繪制出機器貓的頭像效果
    2016-03-17

  • HTML5+CSS3繪制鋸齒狀的矩形

    這篇文章主要教大家如何利用HTML5 CSS3繪制出鋸齒狀的矩形，繪制圖形時可以用canvas標簽，感興趣的小伙伴們可以參考一下
    2016-03-01

  • CSS3繪制不規(guī)則圖形的一些方法示例

    這篇文章主要介紹了CSS3繪制不規(guī)則圖形的一些方法示例,包括polygon()的使用等很多實用技巧,需要的朋友可以參考下
    2015-11-07

  • 使用HTML和CSS3繪制基本卡通圖案的示例分享

    這篇文章主要介紹了使用CSS3繪制基本卡通圖案的示例分享,不過必須承認,這樣做的代碼量并不是很少...well,需要的朋友可以參考下
    2015-11-06

  • CSS3繪制圓角矩形的簡單示例

    這篇文章主要介紹了CSS3繪制圓角矩形的簡單示例,注意一下各瀏覽器對CSS3的兼容性,需要的朋友可以參考下
    2015-09-28

  • 用CSS3繪制三角形的簡單方法

    這篇文章主要介紹了用CSS3繪制三角形的簡單方法,是CSS前端繪圖的基礎,需要的朋友可以參考下
    2015-07-17

  • 純CSS3繪制打火機動畫火焰效果

    這篇文章主要為大家詳細介紹了純CSS3繪制打火機動畫火焰效果的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-07-18

最新評論