検索

:before と :after は、content 属性で指定されたコンテンツを含むインライン要素を、指定された要素 content (要素自体ではなく) の前または後に挿入するために使用されます。 最も基本的な使用法は次のとおりです:

#example:before {    content: "#";    color: red;}
#example:after {    content: "$";    color: red;}这段代码会在#example元素内容之前插入一个'#',以及在内容之后添加一个'$',插入的行内元素是作为#example的子元素.效果为 #Here is the example 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 id="音乐播放器">音乐播放器</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/

初めてブログ記事を書いたとき、他の人から学びました。

リーリー

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLコードをどのように検証できますか?HTMLコードをどのように検証できますか?Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript:Webテクノロジーの比較HTML対CSSおよびJavaScript:Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML:その機能と目的マークアップ言語としてのHTML:その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来:Web開発動向HTML、CSS、およびJavaScriptの未来:Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML:構造、CSS:スタイル、JavaScript:動作HTML:構造、CSS:スタイル、JavaScript:動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来:ウェブデザインの進化とトレンドHTMLの未来:ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript:比較概要HTML対CSS対JavaScript:比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML:それはプログラミング言語か何か他のものですか?HTML:それはプログラミング言語か何か他のものですか?Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1)htmlStructuresandformatswebcontentusingtags.2)ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい