:before和 :after
: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 {最后附上2个:befroe 和：after的 例子
content: "";
display: block;
width: 100px;
height: 100px;
}
①
八卦图
<!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: %;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: %;
left: ;
background: #eee;
border: 18px solid red;
border-radius: %;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: %;
left: %;
background: red;
border: 18px solid #eee;
border-radius: %;
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/
初次写博文，都是拿别人的过来自己学习的。
随机推荐
- tomcat 7.0 之文件配置
- PHP实例开发（3）PHP中MVC学习之ThinkPHP
PHP中MVC学习之ThinkPHP 1.什么是MVC MVC本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离 MVC是一个设 ...
- UVA 572 (dfs)
题意:找出一块地有多少油田.'@'表示油田.找到一块就全部标记. #include<cstdio> #define maxn 110 char s[maxn][maxn]; int n,m ...
- 《Matrix Computation 3rd》读书笔记——第3章 一般线性系统
- css3 animation-fill-mode 对布局的影响
问题描述:在小米手机上,animation-fill-mode设置为 both时,在手机上的web页面会超出屏幕宽度,出现滚动条. 解决方法:animation-fill-mode设为none. .p ...
- NPOI读取Excel
项目环境:Webform framework4.0 dll版本:NPOI2.0 dotnet2.0版本 这两天要做个excel导入的功能,想到以前用过NPOI,感觉很给力,今天写了个DEMO,写的时 ...
- 微信Android客户端架构演进之路
这是一个典型的Android应用在从小到大的成长过程中的“踩坑”与“填坑”的历史.互联网的变化速度如此之快,1年的时间里,可以发生翻天覆地的变化.今天在这里,重新和大家回顾微信客户端架构的演进过程,以 ...
- Unexpected end of file from server 服务器访问问题导致
Caused by: java.net.SocketException: SocketException invoking http://xxxx/cxf/xh/creditInterface?wsd ...
- 简述jsp之EL表达式和jstl及其使用
Jsp的指令之include指令include指令:代表的是页面的包含. 作用:可以把一些jsp的页面包含在一起,对外展示. 页面的布局,现在已经不用了,现在都用css+div进行布局.include ...
- Verilog HDL那些事_建模篇笔记（实验七：数码管电路驱动）
1.同步动态扫描 多个数码管的显示采用的是同步动态扫描方法,同步动态扫描指的是:行信号和列信号同步扫描,是一种并行操作. 2.数码管驱动电路实现思路 如果要求数码管显示我们想要的数字,首先需 ...