你以為 CSS 只是個簡單的布局?

CSS3 奇思妙想

前幾天看了一篇文章 趣惠, 顛覆了我對 CSS 認(rèn)識狸棍,心中無數(shù)次蹦出一個念頭:'臥槽,臥槽味悄,還能特么這么用草戈,這特么太叼了' ...

于是我迫不及待想跟你們一起分享分享,以后你也可以在別人面前炫(裝)耀(逼)了~

ps:本文原創(chuàng)不是我侍瑟,我只是搬運(yùn)工唐片,看到好東西與大家分享而已丙猬,作者 github 主頁請戳 這里~

裝逼指南

本文中,所有的圖形都是在單個標(biāo)簽內(nèi)實(shí)現(xiàn)的费韭,大量使用了 CSS3 中的 ::before 茧球、::after 偽元素,transparent 星持、border抢埋,多重線性與徑向漸變,多重內(nèi)外陰影督暂,如果你的效果不盡人意揪垄,請嘗試在 Chrome 瀏覽器下預(yù)覽。

裝逼技巧

本文所有圖形都會有個容器 <div class="css-cell"></div>包裹逻翁,其樣式結(jié)構(gòu)如下:

.css-cell{
    position: relative;
    width: 100%;
    height: 300px;
}

所有圖形都是在容器內(nèi)實(shí)現(xiàn)的饥努,其結(jié)構(gòu)如下:

<!--heart-->
<div class="css-cell">
    <div class="heart"></div>
</div>

天氣那一塊有部分會多一個容器,其結(jié)構(gòu)如下:

<div class="css-cell ">
    <div class="breeze-container">
        <div class="breeze"></div>
    </div>
</div>

為了方便起見八回,下面圖形的具體實(shí)現(xiàn)酷愧,我只會貼出對應(yīng)的類相應(yīng)的樣式代碼~

裝逼實(shí)戰(zhàn)

  • 愛心
愛心

利用 div 的正方形和偽類的圓型組合而成,具體代碼如下:

/*heart*/
.heart{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%) rotate(45deg);
    background: red;
    width: 100px;
    height: 100px;
}
.heart:before,
.heart:after
{
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
}
.heart:after{
    top: -50px;
    left: 0;
}
  • 氣泡懸浮框
氣泡懸浮框

利用 border 結(jié)合 transparent 特性實(shí)現(xiàn)缠诅,代碼如下:

/*bubbly*/
.bubbly{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    background: #00ccbb;
    border-radius: 8px;
    width: 200px;
    padding: 40px 10px;
    text-align: center;
    color: white;
    font-size: 20px;
}
.bubbly:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 34px solid transparent;
    border-top-color: #00ccbb;
    border-bottom: 0;
    border-left: 0;
    margin: 0 0 -34px -17px;
}
  • 切角
切角

利用使用線性漸變實(shí)現(xiàn)的溶浴,代碼如下:

/*notching*/
.notching{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    padding: 60px 20px;
}
.notching{
    background:
            linear-gradient(135deg, transparent 15px, deeppink 0)
            top left,
            linear-gradient(-135deg, transparent 15px, deeppink 0)
            top right,
            linear-gradient(-45deg, transparent 15px, deeppink 0)
            bottom right,
            linear-gradient(45deg, transparent 15px, deeppink 0)
            bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
  • 弧形切角
弧形切角

使用徑向漸變實(shí)現(xiàn),具體實(shí)現(xiàn)如下:

/*arc*/
.arc{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 80px;
    padding: 80px;
}
.arc {
    background:
            radial-gradient(circle at top left,
            transparent 15px, yellowgreen 0) top left,
            radial-gradient(circle at top right,
            transparent 15px, yellowgreen 0) top right,
            radial-gradient(circle at bottom right,
            transparent 15px, yellowgreen 0) bottom right,
            radial-gradient(circle at bottom left,
            transparent 15px, yellowgreen 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
  • 梯形
梯形

利用偽類加旋轉(zhuǎn)透視實(shí)現(xiàn)滴铅,具體實(shí)現(xiàn)如下:

/*trapezoid*/
.trapezoid{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 160px;
    padding: 60px;
}
.trapezoid:before{
    content:"";
    position: absolute;
    top: 0; 
    right: 0;
    bottom: 0; 
    left: 0;
    transform:perspective(40px) scaleY(1.3) rotateX(5deg);
    transform-origin: bottom;
    background:dodgerblue;
    z-index:-1;
}
  • 餅圖
餅圖

利用偽類戳葵、線性漸變、旋轉(zhuǎn)實(shí)現(xiàn)汉匙,具體代碼如下:

/*pie*/
.pie{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    height:200px;
    border-radius:50%;
    text-align: center;
    background-color:yellowgreen;
    overflow:hidden;
    background-image: linear-gradient(to right, transparent 50%, #655 0);
    cursor:pointer;
}
.pie:before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:50%;
    height:100%;
    background-color: inherit;
    transform-origin: left;
    z-index:-1;
    transform:rotate(.1turn);
}
.pie:hover:before{
    transition:all 1s;
    transform:rotate(.45turn);
}
  • 平行四邊形
平行四邊形

利用偽類拱烁、拉伸實(shí)現(xiàn),實(shí)現(xiàn)過程如下:

/*parallelogram*/
.parallelogram{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    height:120px;

}
.parallelogram:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color:#00aabb;
    z-index:-1;
    transform: skew(.08turn);
}
  • 折角
折角

利用切角噩翠、偽類戏自、漸變、旋轉(zhuǎn)實(shí)現(xiàn)伤锚,代碼如下:

/*corner*/
.corner{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 120px;
    height:120px;
    padding:40px;
    background:linear-gradient(-150deg,transparent 1.5em, yellowgreen  0);
    border-radius:8px;
}
.corner:before{
    content: '';
    position: absolute;
    top: 0; right: 0;
    background: linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
    width: 1.73em;
    height: 3em;
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: inherit;
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}
  • 純 CSS 方案實(shí)現(xiàn)背景變暗效果(hover按鈕觸發(fā))
hover之前

鼠標(biāo)移入

hover之后

利用 box-shadow 實(shí)現(xiàn)擅笔,具體代碼如下:

/*spectiveBlur*/
.spectiveBlur{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height:160px;
    transform: translate(-50%, -50%);
    border-radius:10px;
    overflow:hidden;
    background:#E91E63;
    cursor:pointer;
    transition: transform .2s;
}
.spectiveBlur:hover{
    box-shadow:0 0 0 1920px rgba(0,0,0,.7);
    transform: translate(-50%, -50%) scale(1.2);
}
  • 條紋背景圖

主要是利用漸變實(shí)現(xiàn),具體實(shí)現(xiàn)如下:

條紋背景圖
/*stripe*/
.stripe{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    height:200px;
    background:deeppink;
    border-radius:.5em;
    background:repeating-linear-gradient(45deg,#CC9999, #CC9999 15px, #CCCCCC 0, #CCCCCC 30px)
}
條紋背景圖
/*wave-stripe*/
.wave-stripe{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    height:200px;
    border-radius:.5em;
    background:
            linear-gradient(135deg, deeppink 25%, transparent 25%) -50px 0,
            linear-gradient(225deg, deeppink 25%, transparent 25%) -50px 0,
            linear-gradient(315deg, deeppink 25%, transparent 25%),
            linear-gradient(45deg, deeppink 25%, transparent 25%);
    background-size: 40px 40px;
}
條紋背景圖
/*arrow-stripe*/
.arrow-stripe{
    position: absolute;
    top:50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 200px;
    height:200px;
    border-radius:.5em;
    background:
            linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
            linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
            linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
    background-color:#e1ebbd;
    background-size: 128px 128px;
}
  • 混合模式背景圖
混合模式背景圖
.colorful-stripe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    text-align: center;
    color: #fff;
    font-size: 200%;
    border-radius: .5em;
    background:
            linear-gradient(limegreen, transparent), linear-gradient(90deg, skyblue, transparent), linear-gradient(-90deg, coral, transparent);
    background-blend-mode: screen;
}
  • 太陽
sun

利用線性漸變屯援、陰影猛们、旋轉(zhuǎn)實(shí)現(xiàn),具體代碼如下:

/*sun*/
.sun{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:260px;
    transform: translate(-50%, -50%);
    background:#0BF;
    border-radius:5px;
}
.sun:before{
    content:"";
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius:50%;
    background:rgba(255, 238, 68, 1);
    box-shadow: 0 0 0 15px rgba(255,255,0,0.2),0 0 15px #fff;
    z-index:-10;
}
.sun:after{
    content:"";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 160px;
    width: 160px;
    transform: translate(-50%, -50%) rotate(30deg);
    z-index:-100;
    background-image:
            -webkit-linear-gradient(top,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%),
            -webkit-linear-gradient(left,rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    background-size: 20px 100%, 100% 20px;
    background-repeat: no-repeat;
    background-position: center center, center center;
    animation:sunRotate 10s linear infinite;
}
@keyframes sunRotate{
    0%{
        transform: translate(-50%, -50%) rotate(30deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(390deg);
    }
}
  • 多云
cloud

)

利用線性漸變狞洋、陰影弯淘、縮放實(shí)現(xiàn),具體實(shí)現(xiàn)如下:

/*cloudy*/
.cloudy{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:260px;
    transform: translate(-50%, -50%);
    background:#2EB5E5;
    border-radius:5px;
}
.cloudy:before {
    content: "";
    text-indent:23px;
    font-size:22px;
    line-height:40px;
    color:#333;
    position: absolute;
    height: 50px;width: 50px;
    background: #FFFFFF;
    left:30%;
    top:45%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow:
            #FFFFFF 65px -15px 0 -5px,
            #FFFFFF 25px -25px,
            #FFFFFF 30px 10px,
            #FFFFFF 60px 15px 0 -10px,
            #FFFFFF 85px 5px 0 -5px,
            #C8C8C8 35px -35px,
            #C8C8C8 66px -27px 0 -5px,
            #C8C8C8 91px -10px 0 -8px;
    animation: cloudy 5s ease-in-out infinite;
}
.cloudy:after{
    content:"";
    position: absolute;
    top: 80%;
    left: 50%;
    height: 15px;
    width: 120px;
    background:rgba(0,0,0,.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy {
    50%{
        transform: translate(-50%, -70%);
    }
    100%{
        transform: translate(-50%, -50%);
    }
}
@keyframes cloudy_shadow {
    50%{
        transform: translate(-50%, -50%) scale(0.8);
        background:rgba(0,0,0,.2);
    }
    100%{
        transform: translate(-50%, -50%) scale(1);
        background:rgba(0,0,0,.5);
    }
}
cloud2
/*cloudy2*/
.cloudy2{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:260px;
    transform: translate(-50%, -50%);
    background:#2EB5E5;
    border-radius:5px;
}
.cloudy2:before {
    content: "";
    text-indent:23px;
    font-size:22px;
    line-height:40px;
    color:#333;
    position: absolute;
    height: 50px;width: 50px;
    background: #FFFFFF;
    left:30%;
    top:55%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index:100;
    box-shadow:
            #FFFFFF 65px -15px 0 -5px,
            #FFFFFF 25px -25px,
            #FFFFFF 30px 10px,
            #FFFFFF 60px 15px 0 -10px,
            #FFFFFF 85px 5px 0 -5px;
    animation: cloudy2 5s ease-in-out infinite;
}
.cloudy2:after{
    content:"";
    position: absolute;
    top: 45%;left: 63%;
    height: 60px;
    width: 60px;
    z-index:10;
    background:linear-gradient(180deg,#FE9F38 0%, #F46635 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px 4px #FFA563;
    animation: cloudy2 10s ease-in-out infinite;
}
@keyframes cloudy2 {
    50%{
        transform: translate(-50%, -70%);
    }
    100%{
        transform: translate(-50%, -50%);
    }
}
rain

利用線性漸變吉懊、陰影庐橙、縮放實(shí)現(xiàn)假勿,具體代碼如下:

/*rainy*/
.rainy {
    position: absolute;
    width: 3px;
    height: 6px;
    top: 30%;
    left: 50%;
    background: #CCCCCC;
    border-radius: 50%;
    animation: rainy_rain .7s infinite linear;
}
.rainy:before {
    content: "";
    color: #333;
    position: absolute;
    height: 50px;
    width: 50px;
    top: 30px;
    left: -40px;
    background: #CCC;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: #CCC 65px -15px 0 -5px, #CCC 25px -25px, #CCC 30px 10px, #CCC 60px 15px 0 -10px, #CCC 85px 5px 0 -5px;
    animation: cloudy 5s ease-in-out infinite;
}
.rainy:after {
    content: "";
    position: absolute;
    top: 120px;
    left: 50%;
    height: 15px;
    width: 120px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy {
    50% {
        transform: translate(-50%, -70%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}
@keyframes cloudy_shadow {
    50% {
        transform: translate(-50%, -50%) scale(0.8);
        background: rgba(0, 0, 0, .2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        background: rgba(0, 0, 0, .5);
    }
}
@keyframes rainy_rain {
    0% {
        box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
    }
    25% {
        box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 120px, rgba(0, 0, 0, 0) 12px 120px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
    }
    26% {
        box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 40px, rgba(0, 0, 0, 0) 12px 20px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
    }
    50% {
        box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 100px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
    }
    51% {
        box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 45px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
    }
    75% {
        box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 95px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 120px, rgba(0, 0, 0, 0) 30px 110px;
    }
    76% {
        box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 35px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 25px, rgba(0, 0, 0, 0) 30px 15px;
    }
    100% {
        box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
    }
}
  • 微風(fēng)
wind

利用border、transparent态鳖、實(shí)現(xiàn)转培,這個會多一層 div.breeze-container 包裹,樣式代碼如下:

/*breeze*/
.breeze-container{
    position: absolute;
    top: 50%;left: 50%;
    width:200px;height:260px;
    transform: translate(-50%, -50%);
    text-align:center;
    font-size:200%;
    color:#fff;
    background:#00BBFF;
    border-radius:5px;
}
.breeze-container:after{
    content:"";
    position:absolute;
    top:58%;
    left:50%;
    transform: translate(-50%, -50%);
    width:6px;
    height:70px;
    background:#fff;
}
.breeze{
    position:absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(1deg);
    border-bottom:60px solid #fff;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    animation: windmill 12s infinite linear;
    transform-origin:50.5% 62px;
}
.breeze:before{
    position:absolute;
    top: 75px;left: -59px;
    content:"";
    border-right:60px solid #fff;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    transform:rotate(-30deg);
}
.breeze:after{
    position:absolute;
    top: 75px;left: -1px;
    content:"";
    border-left:60px solid #fff;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    transform:rotate(30deg);
}
@keyframes windmill{
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
  • 彩虹
rainbow

主要是利用border浆竭、box-shadow 實(shí)現(xiàn)浸须,具體實(shí)現(xiàn)如下:

/*rainbow*/
.rainbow-container{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:260px;
    transform: translate(-50%, -50%);
    background:#F3D166;
    border-radius:5px;
}
.rainbow{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1px;width: 1px;
}
.rainbow:before{
    content:"";
    position:absolute;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    height: 70px;width: 70px;
    border-radius: 100px 0 0 0;
    box-shadow:
            #F44336 -2px -2px 0 1px,
            #FF9800 -4px -4px 0 3px,
            #FFEB3B -6px -6px 0 5px,
            #8BC34A -8px -8px 0 7px,
            #00BCD4 -10px -10px 0 9px,
            #2196F3 -12px -12px 0 11px,
            #9C27B0 -14px -14px 0 13px;
    animation: rainbow 5s ease-in-out infinite;
}
.rainbow:after{
    content: "";
    position: absolute;
    top: 70px;
    left: 50%;
    height: 15px;
    width: 120px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes rainbow {
    50% {
        transform: translate(-50%, -55%) rotate(30deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(45deg);
    }
}
@keyframes cloudy_shadow {
    50% {
        transform: translate(-50%, -50%) scale(0.8);
        background: rgba(0, 0, 0, .2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        background: rgba(0, 0, 0, .5);
    }
}
  • 夜空
moon

主要是利用 box-shadow 實(shí)現(xiàn) , 實(shí)現(xiàn)方式如下:

/*starry*/
.starry-container{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:260px;
    transform: translate(-50%, -50%);
    background:#222233;
    border-radius:5px;
}
.starry{
    position:absolute;
    top: 30%;left: 40%;
    transform: translate(-50%, -50%);
    height: 4px;width: 4px;
    border-radius:50%;
    box-shadow:
            #FFFFFF -26px 77px 0 -1px,
            rgba(255,255,255,0.1) -36px 59px 0 -1px,
            rgba(255,255,255,0.1) -28px 89px 0 -1px,
            #FFFFFF -35px 20px 0 -1px,
            #FFFFFF 14px 100px,
            rgba(255,255,255,0.1) 41px 60px,
            #FFFFFF 34px 39px,
            rgba(255,255,255,0.1) 14px 45px 0 -1px,
            #FFFFFF 64px 12px 0 -1px,
            rgba(255,255,255,0.1) 32px 96px 0 -1px,
            #FFFFFF 64px 71px,
            rgba(255,255,255,0.1) 60px 18px 0 -1px,
            #FFFFFF 34px 9px,
            rgba(255,255,255,0.1) -26px 55px 0 -1px;
    animation: starry_star 5s ease-in-out infinite;
}
.starry:before{
    content:"";
    position:absolute;
    top: 20%;left: 50%;
    width:100px;height:100px;
    box-shadow: #FFFFFF -25px 0;
    transform: rotate(-5deg);
    border-radius: 50%;
    animation: starry 5s ease-in-out infinite;
}
@keyframes starry {
    50% {
        transform: rotate(10deg);
    }
}
@keyframes starry_star{
    50%{
        box-shadow:
                rgba(255,255,255,0.1) -26px 77px 0 -1px,
                #FFF -36px 59px 0 -1px,
                #FFF -28px 89px 0 -1px,
                rgba(255,255,255,0.1) -35px 20px 0 -1px,
                rgba(255,255,255,0.1) 14px 100px,
                #FFF 41px 60px,
                rgba(255,255,255,0.1) 34px 39px,
                #FFF 14px 45px 0 -1px,
                rgba(255,255,255,0.1) 64px 12px 0 -1px,
                #FFF 32px 96px 0 -1px,
                rgba(255,255,255,0.1) 64px 71px,
                #FFF 60px 18px 0 -1px,
                rgba(255,255,255,0.1) 34px 9px,
                #FFF -26px 55px 0 -1px;
    }
}
  • 雷電
thunder

主要是利用陰影兆蕉、border實(shí)現(xiàn)羽戒,代碼如下:

/*thunder*/
.thunder-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 260px;
    transform: translate(-50%, -50%);
    background: #444;
    border-radius: 5px;
}
.thunder {
    color: #333;
    position: absolute;
    height: 50px;
    width: 50px;
    top: 40%;
    left: 30%;
    background: #222;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow:
            #222 65px -15px 0 -5px,
            #222 25px -25px,
            #222 30px 10px,
            #222 60px 15px 0 -10px,
            #222 85px 5px 0 -5px;
    animation: cloudy 5s ease-in-out infinite;
}
.thunder:before {
    content: "";
    position: absolute;
    top: 60px;
    left: 60px;
    border-left: 0px solid transparent;
    border-right: 8px solid transparent;
    border-top: 38px solid yellow;
    box-shadow: yellow -7px -32px;
    transform:rotate(30deg);
    transform-origin:center -50px;
    animation:stormy_thunder 2s steps(1, end) infinite;;
}
.thunder:after {
    content: "";
    position: absolute;
    top: 120px;
    left: 64px;
    height: 15px;
    width: 120px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    z-index:-1;
    transform: translate(-50%, -50%);
    animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy {
    50% {
        transform: translate(-50%, -30px);
    }
}
@keyframes cloudy_shadow {
    50% {
        transform: translate(-50%, 0) scale(0.8);
        background: rgba(0, 0, 0, .2);
    }
}
@keyframes stormy_thunder{
    0%  {  transform: rotate(30deg); opacity:1; }
    5%  {  transform: rotate(-34deg); opacity:1; }
    10% {  transform: rotate(0deg); opacity:1; }
    15% {  transform: rotate(-34deg); opacity:0; }
}
  • 大雪
snow

利用陰影實(shí)現(xiàn) , 代碼如下:

/*snow*/
.snowy-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 260px;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 200%;
    color: #fff;
    background: #607D8B;
    border-radius: 5px;
}
.snowy {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius:50%;
    top: 30%;
    left: 50%;
    background: #fff;
    border-radius: 50%;
    animation: snowy_rain 2s infinite linear;
}
.snowy:before {
    content: "";
    color: #333;
    position: absolute;
    height: 50px;
    width: 50px;
    top: 30px;
    left: -40px;
    background: #eee;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow:
            #eee 65px -15px 0 -5px,
            #eee 25px -25px,
            #eee 30px 10px,
            #eee 60px 15px 0 -10px,
            #eee 85px 5px 0 -5px;
    animation: cloudy 5s ease-in-out infinite;
}
.snowy:after {
    content: "";
    position: absolute;
    top: 120px;
    left: 50%;
    height: 15px;
    width: 120px;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy {
    50% {
        transform: translate(-50%, -70%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}
@keyframes cloudy_shadow {
    50% {
        transform: translate(-50%, -50%) scale(0.8);
        background: rgba(0, 0, 0, .2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        background: rgba(0, 0, 0, .5);
    }
}
@keyframes snowy_rain {
    0% {
        box-shadow:
                rgba(255, 255, 255, 0) -10px 30px,
                rgba(255, 255, 255, 0) 40px 40px,
                rgba(255, 255, 255, .6) -50px 75px,
                rgba(255, 255, 255, .6) 55px 50px,
                rgba(255, 255, 255, .6) -18px 100px,
                rgba(255, 255, 255, .6) 12px 95px,
                rgba(255, 255, 255, .6) -31px 45px,
                rgba(255, 255, 255, .6) 30px 35px;
    }
    25% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 45px,
                rgba(255, 255, 255, .6) 40px 60px,
                rgba(255, 255, 255, .6) -50px 90px,
                rgba(255, 255, 255, .6) 55px 65px,
                rgba(255, 255, 255, 0) -18px 120px,
                rgba(255, 255, 255, 0) 12px 120px,
                rgba(255, 255, 255, .6) -31px 70px,
                rgba(255, 255, 255, .6) 30px 60px;
    }
    26% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 45px,
                rgba(255, 255, 255, .6) 40px 60px,
                rgba(255, 255, 255, .6) -50px 90px,
                rgba(255, 255, 255, .6) 55px 65px,
                rgba(255, 255, 255, 0) -18px 40px,
                rgba(255, 255, 255, 0) 12px 20px,
                rgba(255, 255, 255, .6) -31px 70px,
                rgba(255, 255, 255, .6) 30px 60px;
    }
    50% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 70px,
                rgba(255, 255, 255, .6) 40px 80px,
                rgba(255, 255, 255, 0) -50px 100px,
                rgba(255, 255, 255, .6) 55px 80px,
                rgba(255, 255, 255, .6) -18px 60px,
                rgba(255, 255, 255, .6) 12px 45px,
                rgba(255, 255, 255, .6) -31px 95px,
                rgba(255, 255, 255, .6) 30px 85px;
    }
    51% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 70px,
                rgba(255, 255, 255, .6) 40px 80px,
                rgba(255, 255, 255, 0) -50px 45px,
                rgba(255, 255, 255, .6) 55px 80px,
                rgba(255, 255, 255, .6) -18px 60px,
                rgba(255, 255, 255, .6) 12px 45px,
                rgba(255, 255, 255, .6) -31px 95px,
                rgba(255, 255, 255, .6) 30px 85px;
    }
    75% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 95px,
                rgba(255, 255, 255, .6) 40px 100px,
                rgba(255, 255, 255, .6) -50px 60px,
                rgba(255, 255, 255, 0) 55px 95px,
                rgba(255, 255, 255, .6) -18px 80px,
                rgba(255, 255, 255, .6) 12px 70px,
                rgba(255, 255, 255, 0) -31px 120px,
                rgba(255, 255, 255, 0) 30px 110px;
    }
    76% {
        box-shadow:
                rgba(255, 255, 255, .6) -10px 95px,
                rgba(255, 255, 255, .6) 40px 100px,
                rgba(255, 255, 255, .6) -50px 60px,
                rgba(255, 255, 255, 0) 55px 35px,
                rgba(255, 255, 255, .6) -18px 80px,
                rgba(255, 255, 255, .6) 12px 70px,
                rgba(255, 255, 255, 0) -31px 25px,
                rgba(255, 255, 255, 0) 30px 15px;
    }
    100% {
        box-shadow:
                rgba(255, 255, 255, 0) -10px 120px,
                rgba(255, 255, 255, 0) 40px 120px,
                rgba(255, 255, 255, .6) -50px 75px,
                rgba(255, 255, 255, .6) 55px 50px,
                rgba(255, 255, 255, .6) -18px 100px,
                rgba(255, 255, 255, .6) 12px 95px,
                rgba(255, 255, 255, .6) -31px 45px,
                rgba(255, 255, 255, .6) 30px 35px;
    }
}
  • 五角星
五角星

主要是利用border虎韵、transparent、旋轉(zhuǎn)實(shí)現(xiàn)缸废,代碼如下:

/*star*/
.five-star{
    position: absolute;
    top: 35%;
    right: 50%;
    transform: translate(-50%, -50%) scale(8);
    width: 0;
    height: 0;
    display: block;
    border-left: 3.04px solid transparent;
    border-right: 3.24px solid transparent;
    border-bottom: 10px solid #98DBE3;
    -webkit-filter: drop-shadow(1px .5px 1px #ccc);
    cursor: pointer;
}
.five-star:before{
    content: "";
    position: absolute;
    top: 8.65px;
    left: -8.82px;
    width: 0;
    height: 0;
    color: #98DBE3;
    display: block;
    border-left: 12.5px solid transparent;
    border-right: 12.5px solid transparent;
    border-bottom: 9.08px solid #98DBE3;
    transform-origin: top center;
    transform: rotate(36deg);
}
.five-star:after{
    content: "";
    position: absolute;
    top: 8.65px;
    left: -15px;
    width: 0;
    height: 0;
    color: #98DBE3;
    display: block;
    border-left: 12.5px solid transparent;
    border-right: 12.5px solid transparent;
    border-bottom: 9.08px solid #98DBE3;
    transform-origin: top center;
    transform: rotate(-36deg);
}
  • 太極八卦
太極八卦

利用 box-shadow 實(shí)現(xiàn) 包蓝, 代碼很簡單:

/*TaiChi*/
.TaiChi{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    box-shadow:0 0 2px #ddd;
    border-radius:50%;
    background-image:
            radial-gradient(#000 12.5px, transparent 12.5px),
            radial-gradient(#fff 12.5px, transparent 12.5px),
            radial-gradient(#fff 50px, transparent 50px),
            radial-gradient(#000 50px, transparent 50px),
            linear-gradient(90deg,#000 100px, #fff 100px);
    background-position:center 50px,center -50px,center 50px,center -50px,0 0;
}
  • 美隊盾牌
美隊盾牌

利用 漸變 實(shí)現(xiàn) , 代碼如下:

/*captainAmerica*/
.captainAmerica{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    background:
            linear-gradient(45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%),
            linear-gradient(-45deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%),
            linear-gradient(to right, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%),
            linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 65%),
            radial-gradient(ellipse at center, #0033b0 20%, #ce0021 20%, #ce0021 35%, #eee 35%, #eee 55%, #ce0021 55%);
    border-radius: 50%;
    box-shadow: 0 3px 0 #a20917,0 4px 2px 2px #eee;
}
.captainAmerica::before{
    content: '★';
    position:absolute;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%);
    margin-left:-3px;
    width: 50px;height:50px;
    font-family: simsun,Tahoma,Helvetica,Arial,SimHei,sans-serif;
    line-height: 47px;
    z-index: 1;
    border-radius: 50%;
    font-size: 55px;
    color: #fff;
    text-align:center;
    text-shadow: 2px 1px 2px #777;
}
  • 紐扣
紐扣

利用 漸變企量、陰影 實(shí)現(xiàn) 测萎, 實(shí)現(xiàn)方法如下:

/*button*/
.button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: #87ceeb;
    border-radius: 50%;
    box-shadow:
            inset 0 5px 5px #87ceeb,
            inset 0 17px 5px rgba(255,255,255,0.7),
            inset 0 -3px 3px rgba(255,255,255,0.3),
            inset 0 -10px 10px rgba(0,0,0,0.3),
            inset 0 -15px 10px #45b3e0,
            0 7px 10px rgba(0,0,0,0.3);
}
.button::before{
    content: '';
    position:absolute;
    top: 50%;left: 50%;
    width: 110px;height: 106px;
    margin-left: -55px;margin-top: -55px;
    background-image:
            radial-gradient(circle at 38px 38px, #333 10px, transparent 10px),
            radial-gradient(circle at 73px 73px, #333 10px, transparent 10px),
            radial-gradient(circle at 38px 73px, #333 10px, transparent 10px),
            radial-gradient(circle at 73px 38px, #333 10px, transparent 10px);
    border-radius: 50%;
    border-top: 1px solid rgba(0,0,0,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.6);
    box-shadow:
            inset 0 20px 2px rgba(255,255,255,0.3),
            3px -15px 7px -4px rgba(0,0,0,0.3),
            0 -14px 10px 5px #45b3e0,
            0 2px 5px 5px #87ceeb,
            0 10px 5px 5px rgba(255,255,255,0.6);
}
.button::after{
    content: '';
    position:absolute;
    top: 50%;left: 50%;
    width: 50px;height: 50px;
    margin-left: -25px;
    margin-top: -23px;
    background-image:
            linear-gradient(to right, transparent 35%, #000080 35%, #4682b4 40%, #000080 45%, #4682b4 50%, #000080 55%, #4682b4 60%, #000080 65%, transparent 65%),
            linear-gradient(to bottom, transparent 35%, #000080 35%, #4682b4 40%, #000080 45%, #4682b4 50%, #000080 55%, #4682b4 60%, #000080 65%, transparent 65%);
    border-radius: 50%;
    transform: rotate(45deg);
}
  • Chrome
Chrome

利用漸變實(shí)現(xiàn) , 具體如下:

/*chrome*/
.Chrome{
    position: absolute;
    top: 50%;left: 50%;
    width: 180px;height: 180px;
    transform: translate(-50%, -50%);
    box-shadow:0 0px 4px #999,0 0 2px #ddd inset;
    border-radius:50%;
    background-image:
            radial-gradient(#4FACF5 0%,#2196F3 28%, transparent 28%),
            radial-gradient(#fff 33%, transparent 33%),
            linear-gradient(-50deg,#FFEB3B 34%, transparent 34%),
            linear-gradient(60deg,#4CAF50 33%, transparent 33%),
            linear-gradient(180deg,#FF756B 0%, #F44336 30%, transparent 30%),
            linear-gradient(-120deg,#FFEB3B 40%, transparent 40%),
            linear-gradient(-60deg,#FFEB3B 30%, transparent 30%),
            linear-gradient(0deg,#4CAF50 45%, transparent 45%),
            linear-gradient(60deg,#4CAF50 30%, transparent 30%),
            linear-gradient(120deg,#F44336 50%, transparent 50%),
            linear-gradient(180deg,#F44336 30%, transparent 30%);
    background-position:0 0;
}
  • Opera
Opera

利用漸變實(shí)現(xiàn) , 代碼如下:

/*Opera*/
.Opera{
    position: absolute;
    top: 50%;left: 50%;
    width: 170px;height: 200px;
    transform: translate(-50%, -50%);
    border-radius:50%;
    box-shadow:0 2px 4px #333;
    background-image:
            linear-gradient(rgb(254, 135, 138) 0%, rgb(231, 22, 22) 50%, rgb(128, 0, 0) 85%, rgb(184, 3, 4) 100%);
}
.Opera:after{
    content:"";
    position: absolute;
    top:50%;left:50%;
    width: 60px;height: 180px;
    transform: translate(-50%, -50%);
    border-radius:50%;
    background:#fff;
}
.Opera:before{
    content:"";
    position: absolute;
    top:50%;left:50%;
    width: 72px;height: 185px;
    transform: translate(-50%, -50%);
    border-radius:50%;
    background:rgba(0,0,0,.4);
}
  • IE
IE

利用漸變、多重陰影實(shí)現(xiàn) 届巩, 代碼實(shí)現(xiàn)如下:

/*IE*/
.IE{
    position: absolute;
    top: 50%;
    left: 50%;
    width:200px;
    height:200px;
    transform: translate(-50%, -50%);
    border-radius:50%;
    background-image:
            radial-gradient(#fff 38%, transparent 38%),
            radial-gradient(#09C 0%, #09C 100%);

}
.IE:before{
    content: "";
    width:285px;
    height:122px;
    background:none;
    border-radius:100%;
    position:absolute;
    top:33px;
    left:-45px;
    margin:auto;
    box-shadow:
            inset 0 12px 0 13px  #09c,
            -35px -8px 0 -5px #fff;
    transform: rotate(-35deg);
}
.IE:after {
    content: "";
    width: 120px;
    height: 25px;
    background: #09c;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    margin: auto;
    box-shadow: 50px 23px 0 -2px #fff
}
  • safari
safari

利用漸變硅瞧、border、旋轉(zhuǎn)實(shí)現(xiàn) 恕汇, 具體代碼如下:

/*safari*/
.safari{
    position: absolute;
    top: 50%;left: 50%;
    width:200px; height:200px;
    transform: translate(-50%, -50%);
    border-radius:50%;
    border:5px solid #E8E8E8;
    box-shadow:
            -1px 3px 1px 2px #999,
            -1px 3px 1px 2px #999 inset;
    background-image:
            radial-gradient(transparent 30%,#fff 30%,#fff 34%, transparent 34%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(#1DE3FF 0%, #1F52EF 100%);
    background-size: 50% 50%,20px 2px,20px 2px,2px 20px,2px 20px,100%,100%;
    background-repeat:no-repeat;
    background-position:center center, 175px center,5px center,center 175px,center 5px,0 0;

}
.safari::before{
    content:"";
    position: absolute;
    top: 10px;left: 50%;
    border-radius:10px;
    border-bottom:100px solid rgba(255,255,255,.9);
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    transform-origin:center 90px;
    z-index:-1;
    transform:translate(-50%, 0%) rotate(40deg);
}
.safari::after{
    content:"";
    position: absolute;
    top: 10px;left: 50%;
    border-radius:10px;
    border-bottom:100px solid rgba(255,0,0,.9);
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    transform-origin:center 90px;
    transform:translate(-50%, 0%) rotate(220deg);
}
.safari:hover::before{
    transition:transform 1s;
    transform:translate(-50%, 0%) rotate(70deg);
}
.safari:hover::after{
    transition:transform 1s;
    transform:translate(-50%, 0%) rotate(250deg);
}
  • firefox
firefox

利用多重陰影實(shí)現(xiàn) , 代碼如下:

/*firefox*/
.firefox{
    position: absolute;
    top: 50%;left: 50%;
    width: 200px;height:200px;
    transform: translate(-50%, -50%);
    border:8px solid #eee;
    border-radius:50%;
    overflow:hidden;
    background:#F48D00;
    box-shadow:0 0 2px 0 #999;
}
.firefox::before{
    content: "";
    width: 46px;
    height: 46px;
    background: #A4DFEF;
    border-radius: 100%;
    position: absolute;
    top: 90px;
    left: 50px;
    margin: auto;
    border: 1px solid #A4DFEF;
    box-shadow:
            -10px 0 0 5px rgba(164, 223, 239, .2),
            16px -60px 0 8px rgba(164, 223, 239, .2),
            -30px -50px 0 8px #F48D00,
            25px -38px 0 0px #A4DFEF,
            -30px -30px 0 12px #F48D00,
            15px -60px 0 8px #A4DFEF,
            33px 31px 0 -15px #A4DFEF,
            30px 17px 0 -13px #F48D00,
            20px -10px 0 0px #A4DFEF,
            -8px -0px 0 19px #F48D00,
            30px 17px 0 0px #A4DFEF,
            24px 30px 0 15px #F48D00,
            20px -6px 0 28px #A4DFEF,
            45px 10px 0 35px #F48D00,
            -5px -57px 0 8px #F48D00,
            20px -23px 0 45px #A4DFEF,
            -5px -80px 0 8px #A4DFEF,
            -30px -70px 0 8px #F48D00,
            -5px -57px 0 8px #F48D00,
            43px -11px 0 55px #F48D00,
            22px -39px 0 55px #A4DFEF;
}
.firefox::after{
    content: "";
    width: 0px;
    height: 2px;
    background: linear-gradient(90deg,#F48D00 75% ,#333 30% );
    background-size: 35px 35px;
    position: absolute;
    top: 50px;
    left: 73px;
    margin: auto;
    border: solid;
    border-width: 12px 0 15px 30px;
    border-color: #A4DFEF #fff #A4DFEF transparent;
    box-shadow: inset 0px 0 0 50px #333;
}
  • 搜狗
搜狗

利用文字腕唧、陰影實(shí)現(xiàn) , 具體代碼如下:

/*sougou*/
.sogou{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;height:200px;
    transform: translate(-50%, -50%);
    border:8px solid #fff;
    box-shadow: 2px 1px 2px 2px #ccc;
    border-radius:50%;
    overflow:hidden;
    background:#4DA0ED;
}
.sogou::before{
    content:"S";
    position: absolute;
    line-height: 185px;
    top:0;
    left:0;
    right:0;
    bottom:0;
    color:#fff;
    font-weight:600;
    font-size:320px;
    text-align:center;
    text-shadow:
            3px 0 0px #337FC4,
            -5px 0px 0px #CDE4F0,
            0px 8px 0px #387FBF;
    transform:rotate(2deg);
    z-index:-10;
    overflow:hidden;
}
  • 利用濾鏡實(shí)現(xiàn)混合效果
filter-mix

利用 fliter:blur()filter:contrast() 實(shí)現(xiàn) 瘾英, 代碼如下:

/*filter-mix*/
.filter-mix{
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;height: 200px;
    -webkit-filter:contrast(20);
    background:#fff;
}
.filter-mix::before{
    content:"";
    position: absolute;
    width:120px;
    height:120px;
    border-radius: 50%;
    background:#333;
    top:40px;
    left:0px;
    z-index:2;
    -webkit-filter:blur(6px);
    box-sizing:border-box;
    animation:filterBallMove 10s ease-out infinite;
    -webkit-animation:filterBallMove 10s ease-out infinite;
}
.filter-mix::after{
    content:"";
    position: absolute;
    width:80px;
    height:80px;
    border-radius: 50%;
    background:#3F51B5;
    top:60px;
    right:0px;
    z-index:2;
    -webkit-filter:blur(6px);
    animation:filterBallMove2 10s ease-out infinite;
    -webkit-animation:filterBallMove2 10s ease-out infinite;

}

@keyframes filterBallMove{
    50%{
        left:200px;
    }
}

@-webkit-keyframes filterBallMove{
    50%{
        left:200px;
    }
}

@keyframes filterBallMove2{
    50%{
        right:200px;
    }
}

@-webkit-keyframes filterBallMove2{
    50%{
        right:200px;
    }
}

裝逼總結(jié)

怎么樣枣接,是不是顛覆了你對 CSS3 的認(rèn)識?

實(shí)際上 CSS3 帶給我們的遠(yuǎn)不止這些東西缺谴,沒有做不到但惶,只有想不到,只有你腦洞夠大湿蛔,各種黑科技膀曾、酷炫的 CSS 必然也是手到擒來~

雖然你給不了 CSS3 全部,但它卻把全部給了你阳啥,騷年添谊,加油吧~

end

參考文獻(xiàn)

本文主要來源以下文章:

magicCss

CSS Secrets

CSS 感興趣的同學(xué)可以去作者的 github 點(diǎn)個贊~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市苫纤,隨后出現(xiàn)的幾起案子碉钠,更是在濱河造成了極大的恐慌纲缓,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件喊废,死亡現(xiàn)場離奇詭異祝高,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)污筷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門工闺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瓣蛀,你說我怎么就攤上這事陆蟆。” “怎么了惋增?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵叠殷,是天一觀的道長。 經(jīng)常有香客問我诈皿,道長林束,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任稽亏,我火速辦了婚禮壶冒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘截歉。我一直安慰自己胖腾,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布瘪松。 她就那樣靜靜地躺著咸作,像睡著了一般。 火紅的嫁衣襯著肌膚如雪凉逛。 梳的紋絲不亂的頭發(fā)上性宏,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天,我揣著相機(jī)與錄音状飞,去河邊找鬼毫胜。 笑死,一個胖子當(dāng)著我的面吹牛诬辈,可吹牛的內(nèi)容都是我干的酵使。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼焙糟,長吁一口氣:“原來是場噩夢啊……” “哼口渔!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起穿撮,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤缺脉,失蹤者是張志新(化名)和其女友劉穎痪欲,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體攻礼,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡业踢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了礁扮。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片知举。...
    茶點(diǎn)故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖太伊,靈堂內(nèi)的尸體忽然破棺而出雇锡,到底是詐尸還是另有隱情,我是刑警寧澤僚焦,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布锰提,位于F島的核電站,受9級特大地震影響芳悲,放射性物質(zhì)發(fā)生泄漏欲账。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一芭概、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧惩嘉,春花似錦罢洲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至耸峭,卻和暖如春桩蓉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背劳闹。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工院究, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人本涕。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓业汰,卻偏偏與公主長得像,于是被迫代替她去往敵國和親菩颖。 傳聞我的和親對象是個殘疾皇子样漆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,621評論 0 7
  • 因?yàn)榻陧椖繘]有壓力晦闰,主要工作就是一些涉及功能增刪相關(guān)的界面的小工作放祟,修修補(bǔ)補(bǔ)鳍怨,搞個圖標(biāo)之類,設(shè)計師小伙伴們都懂的...
    泱泱悲秋閱讀 4,948評論 1 27
  • 1跪妥、垂直對齊 如果你用CSS鞋喇,則你會有困惑:我該怎么垂直對齊容器中的元素骗奖?現(xiàn)在确徙,利用CSS3的Transform,...
    kiddings閱讀 3,153評論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color执桌,font鄙皇,text-align,li...
    love2013閱讀 2,304評論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color仰挣,font伴逸,text-align,li...
    wzhiq896閱讀 1,732評論 0 2