码迷，mamicode.com
首页 > 其他好文 > 详细

:before和 :after

时间：2014-10-08 16:06:25      阅读：261      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   color   io   os   ar   for   strong   

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：

#example:before {
    content: "#";
    color: red;
}


#example:after {
    content: "$";
    color: red;
}
这段代码会在#example元素内容之前插入一个‘#‘，以及在内容之后添加一个‘$‘，插入的行内元素是作为#example的子元素.效果为 #Here is the example content$

需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。

#example:before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
}
最后附上2个:befroe 和：after的 例子
①
八卦图
<!doctype html>
<html>
<head>
    <title></title>
    <style>
        .yin-yang {
            width: 96px;
            height: 48px;
            background: #eee;
            border-color: red;
            border-style: solid;
            border-width: 2px 2px 50px 2px;
            border-radius: 100%;
            position: relative;
        }
        #yin-yang:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            background: #eee;
            border: 18px solid red;
            border-radius: 100%;
            width: 12px;
            height: 12px;
        }
        #yin-yang:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            background: red;
            border: 18px solid #eee;
            border-radius: 100%;
            width: 12px;
            height: 12px;
        }
    </style>
</head>
<body>
    <div class="yin-yang" id="yin-yang"></div>
</body>
</html>

②

烤肉图

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="" media="screen" type="text/css" />
    <style>
        :before,
        :after {
            content: ‘‘;
        }

        .BBQ {
            border-radius: 50%/20% 70%;
            box-shadow: 40px 48px 0 #333, -32px -49.6px 0 #333, -40px 25.6px 0 #333, 28.8px -36.8px 0 #333, 8px 80px #333, -64px 72px #333, 88px 19.2px #333, -104px 25.6px #333, -88px -25.6px #333, -96px 104px #333, -40px 128px #333, 24px 128px #333, 80px 96px #333, -16px 40px 0 120px #C33, -16px 40px 0 140px #333;
            position: relative;
            width: 40px;
            height: 40px;
            margin: 100px auto;
            background: #333;
        }

            .BBQ:before, .BBQ:after {
                box-shadow: 18.4px 0 0 #999, 36.8px 0 0 #999, 55.2px 0 0 #999, 73.6px 0 0 #999, 92px 0 0 #999, 110.4px 0 0 #999, 128.8px 0 0 #999, 147.2px 0 0 #999, 165.6px 0 0 #999, 184px 0 0 #999, 202.4px 0 0 #999, 220.8px 0 0 #999, 239.2px 0 0 #999, 257.6px 0 0 #999;
                display: block;
                position: absolute;
                top: -90px;
                left: -130px;
                width: 5px;
                height: 300px;
                background: #999;
            }

            .BBQ:after {
                -ms-transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
                top: -220px;
                left: 0;
            }

            .BBQ .meat {
                border-radius: 50%/30% 70% 25% 50%;
                box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.3) inset, 0 0 6px rgba(33, 33, 33, 0.3);
                position: absolute;
                top: 70px;
                left: 40px;
                width: 80px;
                height: 80px;
                background: #B45227;
                z-index: 1;
            }

                .BBQ .meat:before, .BBQ .meat:after {
                    border-radius: 45%;
                    box-shadow: 15px 0 0 0 rgba(33, 33, 33, 0.2), 30px 0 0 0 rgba(33, 33, 33, 0.2);
                    position: absolute;
                    display: block;
                    width: 4px;
                    height: 60%;
                    background: rgba(33, 33, 33, 0.2);
                }

                .BBQ .meat:before {
                    -ms-transform: rotate(30deg);
                    -webkit-transform: rotate(30deg);
                    transform: rotate(30deg);
                    top: 9px;
                    left: 24px;
                }

                .BBQ .meat:after {
                    -ms-transform: rotate(-60deg);
                    -webkit-transform: rotate(-60deg);
                    transform: rotate(-60deg);
                    top: 30px;
                    left: 30px;
                }

            .BBQ .sausage {
                border-radius: 10px;
                box-shadow: -6px 0 8px 0 rgba(92, 0, 0, 0.8) inset, 2px 0 2px 0 rgba(33, 33, 33, 0.5), 0 0 5px rgba(33, 33, 33, 0.5);
                position: absolute;
                top: 60px;
                left: -52px;
                width: 25px;
                height: 100px;
                background: #A00;
                z-index: 1;
            }

                .BBQ .sausage:before {
                    box-shadow: -1px 2px 2px 0 rgba(33, 33, 33, 0.5) inset;
                    position: relative;
                    top: 100%;
                    display: block;
                    margin: 0 auto;
                    width: 5px;
                    height: 30px;
                    background: #F2E6CA;
                }

                .BBQ .sausage:after {
                    border-radius: 0 25px 25px 0;
                    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
                    opacity: 0.3;
                    box-shadow: 1px -1px 0 1px rgba(33, 0, 0, 0.7), 0 22px 0 0 #632121, 1px 21px 0 1px rgba(33, 0, 0, 0.7), 0 44px 0 0 #632121, 1px 43px 0 1px rgba(33, 0, 0, 0.7);
                    position: absolute;
                    top: 22%;
                    left: 0;
                    display: block;
                    width: 55%;
                    height: 7px;
                    background: #632121;
                }

            .BBQ .corn {
                border-radius: 9px;
                box-shadow: 4px -2px 4px rgba(99, 33, 99, 0.3) inset, -10px -2px 10px rgba(99, 33, 99, 0.5) inset, 0 0 5px rgba(33, 33, 33, 0.3);
                position: absolute;
                top: 60px;
                left: -12px;
                width: 35px;
                height: 100px;
                background: #F2D204;
                z-index: 1;
            }

                .BBQ .corn:before {
                    box-shadow: -1px 2px 2px 0 rgba(33, 33, 33, 0.5) inset;
                    position: relative;
                    top: 100%;
                    display: block;
                    margin: 0 auto;
                    width: 5px;
                    height: 30px;
                    background: #F2E6CA;
                }

                .BBQ .corn:after {
                    border-radius: 2px;
                    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
                    opacity: 0.2;
                    box-shadow: 1px 1px 0 rgba(33, 33, 33, 0.3), 8px 0 0 #F2D204, 9px 1px 0 rgba(33, 33, 33, 0.5), 16px 0 0 #F2D204, 17px 1px 0 rgba(33, 33, 33, 0.5), 24px 0 0 #F2D204, 25px 1px 0 rgba(33, 33, 33, 0.2), 0 8px 0 #F2D204, 1px 9px 0 rgba(33, 33, 33, 0.3), 8px 8px 0 #F2D204, 9px 9px 0 rgba(33, 33, 33, 0.5), 16px 8px 0 #F2D204, 17px 9px 0 rgba(33, 33, 33, 0.5), 24px 8px 0 #F2D204, 25px 9px 0 rgba(33, 33, 33, 0.2), 0 16px 0 #F2D204, 1px 17px 0 rgba(33, 33, 33, 0.3), 8px 16px 0 #F2D204, 9px 17px 0 rgba(33, 33, 33, 0.5), 16px 16px 0 #F2D204, 17px 17px 0 rgba(33, 33, 33, 0.5), 24px 16px 0 #F2D204, 25px 17px 0 rgba(33, 33, 33, 0.2), 0 24px 0 #F2D204, 1px 25px 0 rgba(33, 33, 33, 0.3), 8px 24px 0 #F2D204, 9px 25px 0 rgba(33, 33, 33, 0.5), 16px 24px 0 #F2D204, 17px 25px 0 rgba(33, 33, 33, 0.5), 24px 24px 0 #F2D204, 25px 25px 0 rgba(33, 33, 33, 0.2), 0 32px 0 #F2D204, 1px 33px 0 rgba(33, 33, 33, 0.3), 8px 32px 0 #F2D204, 9px 33px 0 rgba(33, 33, 33, 0.5), 16px 32px 0 #F2D204, 17px 33px 0 rgba(33, 33, 33, 0.5), 24px 32px 0 #F2D204, 25px 33px 0 rgba(33, 33, 33, 0.2), 0 40px 0 #F2D204, 1px 41px 0 rgba(33, 33, 33, 0.3), 8px 40px 0 #F2D204, 9px 41px 0 rgba(33, 33, 33, 0.5), 16px 40px 0 #F2D204, 17px 41px 0 rgba(33, 33, 33, 0.5), 24px 40px 0 #F2D204, 25px 41px 0 rgba(33, 33, 33, 0.2), 0 48px 0 #F2D204, 1px 49px 0 rgba(33, 33, 33, 0.3), 8px 48px 0 #F2D204, 9px 49px 0 rgba(33, 33, 33, 0.5), 16px 48px 0 #F2D204, 17px 49px 0 rgba(33, 33, 33, 0.5), 24px 48px 0 #F2D204, 25px 49px 0 rgba(33, 33, 33, 0.2), 0 56px 0 #F2D204, 1px 57px 0 rgba(33, 33, 33, 0.3), 8px 56px 0 #F2D204, 9px 57px 0 rgba(33, 33, 33, 0.5), 16px 56px 0 #F2D204, 17px 57px 0 rgba(33, 33, 33, 0.5), 24px 56px 0 #F2D204, 25px 57px 0 rgba(33, 33, 33, 0.2), 0 64px 0 #F2D204, 1px 65px 0 rgba(33, 33, 33, 0.3), 8px 64px 0 #F2D204, 9px 65px 0 rgba(33, 33, 33, 0.5), 16px 64px 0 #F2D204, 17px 65px 0 rgba(33, 33, 33, 0.5), 24px 64px 0 #F2D204, 25px 65px 0 rgba(33, 33, 33, 0.2), 0 72px 0 #F2D204, 1px 73px 0 rgba(33, 33, 33, 0.3), 8px 72px 0 #F2D204, 9px 73px 0 rgba(33, 33, 33, 0.5), 16px 72px 0 #F2D204, 17px 73px 0 rgba(33, 33, 33, 0.5), 24px 72px 0 #F2D204, 25px 73px 0 rgba(33, 33, 33, 0.2), 0 80px 0 #F2D204, 1px 81px 0 rgba(33, 33, 33, 0.3), 8px 80px 0 #F2D204, 9px 81px 0 rgba(33, 33, 33, 0.5), 16px 80px 0 #F2D204, 17px 81px 0 rgba(33, 33, 33, 0.5), 24px 80px 0 #F2D204, 25px 81px 0 rgba(33, 33, 33, 0.2), 0 88px 0 #F2D204, 1px 89px 0 rgba(33, 33, 33, 0.3), 8px 88px 0 #F2D204, 9px 89px 0 rgba(33, 33, 33, 0.5), 16px 88px 0 #F2D204, 17px 89px 0 rgba(33, 33, 33, 0.5), 24px 88px 0 #F2D204, 25px 89px 0 rgba(33, 33, 33, 0.2);
                    position: absolute;
                    top: 2px;
                    left: 0;
                    display: block;
                    width: 22%;
                    height: 6%;
                }

            .BBQ .waterbamboo {
                background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #96c56f 30%);
                background-image: linear-gradient(to top, #ffffff 0%, #96c56f 30%);
                box-shadow: -5px 0 5px rgba(33, 33, 33, 0.4) inset, 0 0 3px rgba(33, 33, 33, 0.3);
                border-radius: 70%/60% 10% 0 0;
                position: absolute;
                top: 30px;
                left: -95px;
                display: block;
                width: 25px;
                height: 170px;
                border-top: 0;
                z-index: 1;
            }

                .BBQ .waterbamboo:before {
                    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, #428c42 50%);
                    background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #428c42 50%);
                    box-shadow: -1px -1px 1px 0 rgba(33, 66, 33, 0.2);
                    border-radius: 35% 15% 0 0/70% 30% 0 0;
                    position: absolute;
                    top: -5px;
                    right: 0;
                    display: block;
                    width: 16px;
                    height: 70%;
                }

            .BBQ .shrimp {
                border-radius: 60%/30% 40% 10% 70%;
                background-image: -webkit-radial-gradient(circle at center right, rgba(0, 0, 0, 0) 67%, #cc4a04 68%, #ef6921 74%, #ef6921 85%, rgba(33, 33, 33, 0.2) 86%, rgba(0, 0, 0, 0) 90%);
                background-image: radial-gradient(circle at center right, rgba(0, 0, 0, 0) 67%, #cc4a04 68%, #ef6921 74%, #ef6921 85%, rgba(33, 33, 33, 0.2) 86%, rgba(0, 0, 0, 0) 90%);
                position: absolute;
                top: -35px;
                left: -10px;
                display: block;
                width: 86px;
                height: 70px;
                z-index: 1;
            }

                .BBQ .shrimp:before {
                    -ms-transform: rotate(24deg);
                    -webkit-transform: rotate(24deg);
                    transform: rotate(24deg);
                    border-radius: 85% 85% 50% 50%/120% 120% 50% 50%;
                    box-shadow: 1px -35px 0 -7px #EF6921, 0 -36px 1px -7px rgba(33, 33, 33, 0.2), 5px -23px 0 -8px #EF6921, 5px -23px 1px -7px rgba(33, 33, 33, 0.2), 0 -2px 0 0 rgba(222, 222, 222, 0.3) inset, -2px 1px 2px rgba(33, 33, 33, 0.2);
                    position: absolute;
                    top: -24px;
                    left: 15px;
                    display: block;
                    width: 18px;
                    height: 45px;
                    background: #EF6921;
                }

                .BBQ .shrimp:after {
                    border-radius: 50%;
                    background-image: -webkit-radial-gradient(circle at top center, #ef6921 35%, rgba(0, 0, 0, 0) 36%), -webkit-radial-gradient(circle at center left, #ef6921 27%, #cc4a04 37%, rgba(0, 0, 0, 0) 38%);
                    background-image: -webkit-radial-gradient(top center, circle, #ef6921 35%, rgba(0, 0, 0, 0) 36%), -webkit-radial-gradient(circle at center left, #ef6921 27%, #cc4a04 37%, rgba(0, 0, 0, 0) 38%);
                    background-image: radial-gradient(circle at top center, #ef6921 35%, rgba(0, 0, 0, 0) 36%), radial-gradient(circle at center left, #ef6921 27%, #cc4a04 37%, rgba(0, 0, 0, 0) 38%);
                    box-shadow: -13px -86px 0 -9px rgba(222, 222, 222, 0.5), -14px -85px 0 -7px #212121;
                    position: absolute;
                    top: 60px;
                    left: 25px;
                    display: block;
                    width: 22px;
                    height: 22px;
                }

            .BBQ .clams {
                border-radius: 10px 30px 10px 50px;
                background-image: -webkit-radial-gradient(circle at top right, #c8c8c8 22%, #827909 30%, #212121 35%, #212121 50%, #665a07 65%, #827909 70%, #c8c8c8 72%, #665a07 75%);
                background-image: -webkit-radial-gradient(top right, circle, #c8c8c8 22%, #827909 30%, #212121 35%, #212121 50%, #665a07 65%, #827909 70%, #c8c8c8 72%, #665a07 75%);
                background-image: radial-gradient(circle at top right, #c8c8c8 22%, #827909 30%, #212121 35%, #212121 50%, #665a07 65%, #827909 70%, #c8c8c8 72%, #665a07 75%);
                box-shadow: 0 0 5px rgba(33, 33, 33, 0.3) inset, -1px 1px 5px rgba(33, 33, 33, 0.3);
                position: absolute;
                top: -58px;
                left: -80px;
                width: 40px;
                height: 40px;
                display: block;
                z-index: 1;
            }

                .BBQ .clams:after {
                    border-radius: 10px 30px 10px 50px;
                    background-image: -webkit-radial-gradient(circle at top right, #c8c8c8 22%, #827909 30%, #212121 35%, #212121 50%, #665a07 65%, #827909 70%, #c8c8c8 72%, #665a07 75%);
                    background-image: radial-gradient(circle at top right, #c8c8c8 22%, #827909 30%, #212121 35%, #212121 50%, #665a07 65%, #827909 70%, #c8c8c8 72%, #665a07 75%);
                    box-shadow: 0 0 5px rgba(33, 33, 33, 0.3) inset, -1px 1px 5px rgba(33, 33, 33, 0.3);
                    display: block;
                    position: absolute;
                    top: 130%;
                    left: 40%;
                    width: 100%;
                    height: 100%;
                }

            .BBQ .greenpepper {
                -ms-transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
                box-shadow: -1px 1px 2px 0 rgba(33, 33, 33, 0.5) inset;
                position: absolute;
                top: -60px;
                left: 75px;
                width: 5px;
                height: 120px;
                background: #F2E6CA;
                z-index: 1;
            }

                .BBQ .greenpepper:before, .BBQ .greenpepper:after {
                    border-radius: 30% 40%/10% 20%;
                    background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0) 20%, rgba(33, 99, 33, 0.3) 50%, rgba(0, 0, 0, 0) 75%), -webkit-linear-gradient(330deg, rgba(0, 0, 0, 0) 0%, rgba(33, 120, 33, 0.6) 40%, rgba(0, 0, 0, 0) 65%, rgba(33, 99, 33, 0.5) 100%), -webkit-linear-gradient(45deg, #299a0b 45%, rgba(33, 99, 33, 0.3) 55%, #299a0b 75%), -webkit-linear-gradient(bottom, #299a0b 0%, #299a0b 100%);
                    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 20%, rgba(33, 99, 33, 0.3) 50%, rgba(0, 0, 0, 0) 75%), linear-gradient(120deg, rgba(0, 0, 0, 0) 0%, rgba(33, 120, 33, 0.6) 40%, rgba(0, 0, 0, 0) 65%, rgba(33, 99, 33, 0.5) 100%), linear-gradient(45deg, #299a0b 45%, rgba(33, 99, 33, 0.3) 55%, #299a0b 75%), linear-gradient(to top, #299a0b 0%, #299a0b 100%);
                    box-shadow: 2px 2px 1px rgba(33, 33, 33, 0.3) inset, 0 0 3px rgba(33, 33, 33, 0.3);
                    position: relative;
                    display: block;
                    left: -25px;
                    margin-top: 6px;
                    width: 50px;
                    height: 35px;
                }

            .BBQ .smoke {
                border-radius: 50%;
                -webkit-animation: roastSmoke 5s ease-in-out infinite;
                animation: roastSmoke 5s ease-in-out infinite;
                background-image: -webkit-radial-gradient(ellipse at center center, rgba(33, 33, 33, 0.3) 0%, rgba(0, 0, 0, 0) 50%);
                background-image: -webkit-radial-gradient(center center, ellipse, rgba(33, 33, 33, 0.3) 0%, rgba(0, 0, 0, 0) 50%);
                background-image: radial-gradient(ellipse at center center, rgba(33, 33, 33, 0.3) 0%, rgba(0, 0, 0, 0) 50%);
                position: absolute;
                top: 0;
                left: 0;
                width: 100px;
                height: 60px;
                z-index: 2;
            }

                .BBQ .smoke:before {
                    border-radius: 50%;
                    -ms-transform: scale(1.6);
                    -webkit-transform: scale(1.6);
                    transform: scale(1.6);
                    background-image: -webkit-radial-gradient(ellipse at center center, rgba(33, 33, 33, 0.3) 0%, rgba(0, 0, 0, 0) 50%);
                    background-image: -webkit-radial-gradient(center center, ellipse, rgba(33, 33, 33, 0.3) 0%, rgba(0, 0, 0, 0) 50%);
                    background-image: radial-gradient(ellipse at center center, rgba(33, 33, 33, 0.3) 0%, rgba(0, 0, 0, 0) 50%);
                    position: absolute;
                    top: -90px;
                    left: 0;
                    display: block;
                    width: 100px;
                    height: 60px;
                }

        @-webkit-keyframes roastSmoke {
            0% {
                -ms-transform: scale(0.2) translateY(0);
                -webkit-transform: scale(0.2) translateY(0);
                transform: scale(0.2) translateY(0);
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                opacity: 0;
            }

            30% {
                filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
                opacity: 1;
            }

            100% {
                -ms-transform: scale(1) translateY(-200px);
                -webkit-transform: scale(1) translateY(-200px);
                transform: scale(1) translateY(-200px);
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                opacity: 0;
            }
        }

        @keyframes roastSmoke {
            0% {
                -ms-transform: scale(0.2) translateY(0);
                -webkit-transform: scale(0.2) translateY(0);
                transform: scale(0.2) translateY(0);
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                opacity: 0;
            }

            30% {
                filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
                opacity: 1;
            }

            100% {
                -ms-transform: scale(1) translateY(-200px);
                -webkit-transform: scale(1) translateY(-200px);
                transform: scale(1) translateY(-200px);
                filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
                opacity: 0;
            }
        }

    </style>
</head>
<body>
    
    <div class="BBQ">
        <div class="meat"></div>
        <div class="sausage"></div>
        <div class="corn"></div>
        <div class="waterbamboo"></div>
        <div class="shrimp"></div>
        <div class="clams"></div>
        <div class="greenpepper"></div>
        <div class="smoke"></div>
    </div>
</body>
</html>

③

古典磁带

html文件

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="demo.css" />               <!--引用外部样式-->>

    <style></style>
</head>
<body style="background-color:#8b392e;">
    <div class="cassette">
        <div class="screws">
            <div class="screw">
                <div class="screw-inner"></div>
            </div>
            <div class="screw">
                <div class="screw-inner"></div>
            </div>
            <div class="screw">
                <div class="screw-inner"></div>
            </div>
            <div class="screw">
                <div class="screw-inner"></div>
            </div>
        </div>
    
        <div class="outer-sticker">
            <div class="sticker">
                <div class="sticker-header">       <!-- /.sticker-header statr -->
                    <div class="side">A</div>
                    <div class="notes">    <!--A右边的3根线 -->
                        <hr />
                        <hr />
                        <hr />
                    </div>  
                </div><!-- /.sticker-header  end -->
                <div class="sticker-center">           <!-- /.sticker-center statr-->    
                    <div class="stripe-a"></div>       <!--褐色和蓝色的粗条纹，夹住2个小圆孔-->       
                    <div class="stripe-b"></div>
                    <div class="cassete-center">
                        <div class="circle">            <!--左边的小圆孔-->
                            <i></i>                     <!--6个小指针-->
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            

                        </div>
                        <div class="circle">            <!--右边的小圆孔-->
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                            <i></i>
                        </div>
                        <div class="window">
                            <div class="reel"></div>
                            <div class="reel"></div>
                        </div>
                    </div>
            </div>         <!-- /.sticker-center  end-->    
                <div class="sticker-bottom">
                    <hr>
                    <h5>音乐播放器</h5>
                    <hr>
                </div>     <!-- /.sticker-bottom-->
        </div>             <!-- /.sticker -->
    </div>                 <!-- /.outer-sticker -->     
</div>                     <!-- /.cassette -->
    


    <script>

        var box = new Date(0);
        alert(box);
        
    </script>
</body>
</html>

css文件

 .cassette {
            position: relative;
            margin: 70px auto;
            background-color: #d55e40;
            border-radius: 20px;
            width: 534px;
            height: 335px;
        }
            .cassette:before {
                position: absolute;
                content: "";
                z-index: 50;
                bottom: 20px;
                left: -3px;
                height: 90px;
                border-right: #d55e40 solid 5px;
                border-top: transparent solid 10px;
                border-bottom: transparent solid 10px;
            }
            .cassette:after {
                position: absolute;
                content: "";
                z-index: 50;
                bottom: 20px;
                right: -3px;
                height: 90px;
                border-left: #d55e40 solid 5px;
                border-top: transparent solid 10px;
                border-bottom: transparent solid 10px;
            }
        .screw {
            position: absolute;
            display: block;
            width: 22px;
            height: 22px;
            background: #8b392e;
            border-radius: 50%;
        }
        .screw-inner {
            position: absolute;
            display: block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transform: rotate(50deg);
        }
            .screw-inner:before, .screw-inner:after {
                content: "";
                position: absolute;
                z-index: 2;
                background: #449ba2;
                width: 5px;               
                border-radius: 2px;
            }
            .screw-inner:before {
                left: 50%;
                width: 40%;
                margin-left: -20%;
                height: 100%;
            }
            .screw-inner:after {
                top: 50%;
                height: 40%;
                margin-top: -20%;
                width: 100%;
            }
        .screws .screw:nth-child(1) {
            top: 5px;
            left: 10px;
        }
        .screws .screw:nth-child(2) {
            top: 5px;
            right: 10px;
        }
        .screws .screw:nth-child(3) {
            left: 10px;
            bottom: 5px;
        }
        .screws .screw:nth-child(4) {
            right: 10px;
            bottom: 5px;
        }
        .outer-sticker {
            background: #8b392e;
            width: 474px;
            height: 210px;
            position: relative;
            left: 50%;
            margin-left: -237px;         
            border-radius: 16px;
            position: relative;
            margin-top: 25px;
            display: inline-block;
        }
        .sticker {
            background: #f3ae53;
            margin: 0 auto;
            width: 466px;
            height: 200px;           
            border-radius: 16px;
            position: relative;
            margin-top: 5px;
        }
        .sticker-header {
            float: left;
            padding: 10px 20px 0px;
            width: 100%;
        }
            .sticker-header .side {
                font-weight: 700;
                font-size: 30px;
                color: #f3ae53;
                padding: 0 5px 1px;
                line-height: 32px;
                margin-top: 10px;
                background: #d55e40;
                float: left;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
            }
            .sticker-header .notes {
                float: left;
                margin-left: 15px;
                width: 374px;
            }
                .sticker-header .notes hr {
                    border: 0;
                    height: 3px;
                    background: #756046;
                    margin-bottom: 15px;
                }
        .sticker-center {
            position:relative;
            display:inline-block;
            width:100%;
        }
            .sticker-center .stripe-a {

                background: #8b392e;
                display: inline-block;
                width: 100%;
                height: 30px;

            }
            .sticker-center .stripe-b {
                background: #449ba2;
                display: inline-block;
                width: 100%;
                height: 30px;
                margin-top: 30px;
            }
            .sticker-center .cassete-center {
                background: #d55e40;
                margin: 0 auto;
                width: 318px;
                height: 92px;
                -moz-border-radius: 16px;
                -webkit-border-radius: 16px;
                border-radius: 16px;
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -159px;
            }

                .sticker-center .cassete-center .circle {
                    border-radius: 50%;
                    width: 65px;
                    height: 65px;
                    background: #fff;
                    position: absolute;
                    top: 12px;
                    -moz-animation: spin 0.8s infinite linear;
                    -webkit-animation: spin 0.8s infinite linear;
                    animation: spin 0.8s infinite linear;
                }

                    .sticker-center .cassete-center .circle:nth-child(1) {
                        left: 15px;
                    }

                    .sticker-center .cassete-center .circle:nth-child(2) {
                        right: 15px;
                    }

                    .sticker-center .cassete-center .circle i {
                        display: block;
                        position: absolute;
                        width: 5%;
                        height: 55%;
                        left: 45%;
                        top: -5%;
                        border-top: solid 15px #d55e40;
                        transform-origin: 55% 70%;      /*旋转原点的位置，也就是O点的位置哦*/
                        z-index: 999;
                    }

                        .sticker-center .cassete-center .circle i:nth-child(1) {
                           
                            transform: rotate(30deg);
                        }

                        .sticker-center .cassete-center .circle i:nth-child(2) {
                          
                            transform: rotate(90deg);
                        }

                        .sticker-center .cassete-center .circle i:nth-child(3) {
                            
                            transform: rotate(150deg);
                        }

                        .sticker-center .cassete-center .circle i:nth-child(4) {
                          
                            transform: rotate(210deg);
                        }

                        .sticker-center .cassete-center .circle i:nth-child(5) {

                            transform: rotate(270deg);
                        }

                        .sticker-center .cassete-center .circle i:nth-child(6) {
                           
                            transform: rotate(330deg);
                        }


                .sticker-center .cassete-center .window {
                    position: absolute;
                    overflow: hidden;
                    background: white;
                    width: 122px;
                    height: 60px;
                    left: 50%;
                    margin-left: -61px;
                    margin-top: 15px;
                    -moz-border-radius: 5px;
                    -webkit-border-radius: 5px;
                    border-radius: 5px;
                }

                    .sticker-center .cassete-center .window .reel {
                        border-radius: 50%;
                        width: 190px;
                        height: 190px;
                        background: #8b392e;
                        position: absolute;
                        top: -60px;
                        -moz-animation: spin 0.8s infinite linear;
                        -webkit-animation: spin 0.8s infinite linear;
                        animation: spin 0.8s infinite linear;
                    }

                        .sticker-center .cassete-center .window .reel:nth-child(1) {
                            left: -150px;
                        }

                        .sticker-center .cassete-center .window .reel:nth-child(2) {
                            right: -150px;
                        }
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
            }
        }
        .sticker-bottom {
            margin: 5px 5px;                    
            overflow: auto;
        }
            .sticker-bottom hr {
                border: 0;
                height: 3px;
                background: #363844;
                width: 170px;
            }
                .sticker-bottom hr:nth-child(1) {
                    float: left;
                }

                .sticker-bottom hr:nth-child(3) {
                    float: right;
                }
            .sticker-bottom h5 {
                font-size: 12px;
                float: left;
                line-height: 19px;
                padding-left: 27px;
                margin:0px;
            }

 部分代码摘自

http://www.hulufei.com/post/about-before-and-after-pseudo-element

http://www.html5tricks.com/

初次写博文，都是拿别人的过来自己学习的。



:before和 :after

标签：style   blog   http   color   io   os   ar   for   strong   

原文地址：http://www.cnblogs.com/long-ge/p/4011152.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！