:before and :after are used to insert an inline element containing the content specified by the content attribute before or after the specified element content (rather than the element itself). The most basic usage is as follows :
#example:before { content: "#"; color: red;} #example:after { content: "$"; color: red;}这段代码会在#example元素内容之前插入一个'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素.效果为 #Here is the example content$ It should be noted that without the content attribute, the pseudo-class element will have no effect. However, you can specify that the content is empty. As mentioned earlier, the inserted content is an inline element by default and cannot be seen in the HTML source code. This is why it is called a pseudo-class element, so it cannot pass through the DOM. Operate on it.
#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> ②
Barbecue picture
<!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> ③
Classic Tape
html file
<!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 file
.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; } Part of the code is excerpted from
http://www.hulufei.com/post/about-before-and-after-pseudo-element
http://www.html5tricks.com/
Writing a blog post for the first time I learned from others by taking it from others.
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How can you validate your HTML code?Apr 24, 2025 am 12:04 AMHTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.
HTML vs. CSS and JavaScript: Comparing Web TechnologiesApr 23, 2025 am 12:05 AMHTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.
HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AMThe function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.
The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AMThe future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.
HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AMThe roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AMThe future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AMThe roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.
HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AMHTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Assassin's Creed Shadows: Seashell Riddle Solution
3 weeks agoByDDD
What's New in Windows 11 KB5054979 & How to Fix Update Issues
2 weeks agoByDDD
Where to find the Crane Control Keycard in Atomfall
3 weeks agoByDDD
Roblox: Dead Rails - How To Complete Every Challenge
4 weeks agoByDDD
Atomfall guide: item locations, quest guides, and tips
1 months agoByDDD
Hot Tools
Dreamweaver CS6
Visual web development tools
WebStorm Mac version
Useful JavaScript development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Mac version
God-level code editing software (SublimeText3)
