CSS3 实现别样图型

1.爱心

利用 div 的正方形和伪类的圆型组合而成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .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;
            }

        </style>
    </head>
    <body>
        <div class="heart"></div>
    </body>
</html>

View Code

2.气泡悬浮框

利用 border 结合 transparent 特性实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .bubbly{
                position: absolute;
                top:50%;
                left: 50%;
                transform:translate(-50%,-50%);
                background: #ff8820;
                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: #ff8820;
                border-bottom: 0;
                border-left: 0;
                margin: 0 0 -34px -17px;
            }

        </style>
    </head>
    <body>
        <div class="bubbly">气泡悬浮框</div>
    </body>
</html>

View Code

3.切角

利用使用线性渐变实现的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
            }

        </style>
    </head>
    <body>
        <div class="notching"></div>
    </body>
</html>

View Code

4.弧形切角

使用径向渐变实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
        }
        </style>
    </head>
    <body>
        弧形切角
        <div class="arc"></div>
    </body>
</html>

View Code

5.梯形

利用伪类加旋转透视实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
            }
        </style>
    </head>
    <body>
        梯形
        <div class="trapezoid"></div>
    </body>
</html>

View Code

6.饼图

利用伪类、线性渐变、旋转实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
            }

        </style>
    </head>
    <body>
        饼图
        <div class="pie"></div>
    </body>
</html>

View Code

7.平行四边形

利用伪类、拉伸实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
            }

        </style>
    </head>
    <body>
        平行四边形
        <div class="parallelogram"></div>
    </body>
</html>

View Code

8.折角

利用切角、伪类、渐变、旋转实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
            }

        </style>
    </head>
    <body>
        折角
        <div class="corner"></div>
    </body>
</html>

View Code

9.纯CSS 方案实现背景变暗效果（hover按钮触发）

鼠标移入

利用 box-shadow 实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
            }

        </style>
    </head>
    <body>
        背景变暗效果
        <div class="spectiveBlur"></div>
    </body>
</html>

View Code

10.条纹背景图

主要是利用渐变实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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)
            }

        </style>
    </head>
    <body>
        条纹背景图
        <div class="stripe"></div>
    </body>
</html>

View Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
            }
        </style>
    </head>
    <body>
        条纹背景图
        <div class="wave-stripe"></div>
    </body>
</html>

View Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
            }

        </style>
    </head>
    <body>
        条纹背景图
        <div class="arrow-stripe"></div>
    </body>
</html>

View Code

11.混合模式背景图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .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;
            }
        </style>
    </head>
    <body>
        混合模式背景图
        <div class="colorful-stripe"></div>
    </body>
</html>

View Code

12.太阳（动态）

利用线性渐变、阴影、旋转实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
                }
            }

        </style>
    </head>
    <body>
        太阳
        <div class="sun"></div>
    </body>
</html>

View Code

13.多云（动态）

利用线性渐变、阴影、缩放实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
                }
            }

        </style>
    </head>
    <body>
        多云
        <div class="cloudy"></div>
    </body>
</html>

View Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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%);
                }
            }
        </style>
    </head>
    <body>
        多云
        <div class="cloudy2"></div>
    </body>
</html>

View Code

14.雨（动态）

利用线性渐变、阴影、缩放实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
                }
            }

        </style>
    </head>
    <body>
        雨
        <div class="rainy "></div>
    </body>
</html>

View Code

15.微风（动态）

利用border、transparent、实现，这个会多一层 div.breeze-container 包裹

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
                }
            }

        </style>
    </head>
    <body>
        微风
        <div class="breeze-container ">
            <div class="breeze"></div>
        </div>
    </body>
</html>

View Code

16.彩虹（动态）

主要是利用border、box-shadow 实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
                }
            }

        </style>
    </head>
    <body>
        彩虹
        <div class="rainbow-container ">
            <div class="rainbow"></div>
        </div>
    </body>
</html>

View Code

17.夜空（动态）

主要是利用 box-shadow 实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
                }
            }

        </style>
    </head>
    <body>
        夜空
        <div class="starry-container ">
            <div class="starry"></div>
        </div>
    </body>
</html>

View Code

18.雷电（动态）

主要是利用阴影、border实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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; }
            }

        </style>
    </head>
    <body>
        雷电
        <div class="thunder-container ">
            <div class="thunder"></div>
        </div>
    </body>
</html>

View Code

19.大雪（动态）

利用阴影实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
                }

        </style>
    </head>
    <body>
        大雪
        <div class="snowy-container ">
            <div class="snowy"></div>
        </div>
    </body>
</html>

View Code

20.五角星

主要是利用border、transparent、旋转实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
            }

        </style>
    </head>
    <body>
        五角星
        <div class="five-star ">
        </div>
    </body>
</html>

View Code

21.太极八卦

利用 box-shadow 实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        /*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;
        }

        </style>
    </head>
    <body>
        太极八卦
        <div class="TaiChi">
        </div>
    </body>
</html>

View Code

22.美队盾牌

利用渐变实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
            }

        </style>
    </head>
    <body>
        美国盾牌
        <div class="captainAmerica">
        </div>
    </body>
</html>

View Code

23.纽扣

利用渐变、阴影实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
            }
        </style>
    </head>
    <body>
        纽扣
        <div class="button">
        </div>
    </body>
</html>

View Code

24.Chrome

利用渐变实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
            }

        </style>
    </head>
    <body>
        Chrome
        <div class="Chrome">
        </div>
    </body>
</html>

View Code

25.Opera

利用渐变实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
            }
        </style>
    </head>
    <body>
        Opera
        <div class="Opera">
        </div>
    </body>
</html>

View Code

26.IE

利用渐变、多重阴影实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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
            }
        </style>
    </head>
    <body>
        IE
        <div class="IE">
        </div>
    </body>
</html>

View Code

27.safari

利用渐变、border、旋转实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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);
            }
        </style>
    </head>
    <body>
        safari
        <div class="safari">
        </div>
    </body>
</html>

View Code

28.firefox

利用多重阴影实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
            }
        </style>
    </head>
    <body>
        firefox
        <div class="firefox">
        </div>
    </body>
</html>

View Code

29.搜狗

利用文字、阴影实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
            }
        </style>
    </head>
    <body>
        搜狗
        <div class="sogou">
        </div>
    </body>
</html>

View Code

30.利用滤镜实现混合

利用 fliter:blur() 、filter:contrast() 实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*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;
                }
            }
        </style>
    </head>
    <body>
        利用滤镜实现混合效果
        <div class="filter-mix">
        </div>
    </body>
</html>

View Code

参考地址：https://juejin.im/post/5a446d19f265da43052eebcc