순수 css 동적 기차 실현
36936 단어 css
1. 상대적 포지셔닝에 대한 절대적 포지셔닝 학습
2. 그림의 점차적인 학습
3. 그림자 학습
4、border-radius
5. 애니메이션
CSS3
XXX
/*
Chrome( ) ：WebKit -webkit-
Safari( ) ：WebKit -webkit-
Firefox( ) ：Gecko -moz-
IE(IE ) ： Trident -ms-
Opera( ) ：Presto -o-
*/
/*
*{} ， 。
*/
*{
margin:0px;
padding:0px;
list-style: none;
}
/* */
body{
background: #eee;
text-align: center;
overflow-x:hidden;
}
@keyframes train-animation{
from{
left:100%
}
to {
left:-1300px;
}
}
@keyframes rodaout-animation{
from{
transform: rotate(0deg)
}
to{
transform: rotate(-360deg)
}
}
/* */
#hoverTrain{
width:1250px;
height:370px;
margin:2px auto auto auto;
border:2px solid saddlebrown;
position: relative;
/* animation:train-animation 18s linear infinite */
}
/* */
#pipe{
width:960px;
height:100px;
background-color:#222;
background-image: -webkit-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* Safari mac */
background-image: -moz-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000); /* */
background-image:-o-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*Opera */
background-image:-ms-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie */
background-image:linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* */
position: absolute;
top:80px;
left:145px;
box-shadow:inset 4px 0px 3px #000
/*box-shadow:inset 20px 50px 3px #222 ：1、 2、 div 20px 3、 div 50px
4、 5、 */
}
/* div */
#pipe:before{
content:'';
width:4px;
height:100px;
border:6px double #000; /* 6px */
position: absolute;
top:0px;
left:75px;
border-top-width: 0px; /* 0px */
border-bottom-width: 0px; /* 0px */
box-shadow: 1px 0px 0px rgba(255,255,255,0.3), -1px 0px 0px rgba(255,255,255,0.3),
inset 1px 0px 0px rgba(255,255,255,0.3), inset -1px 0px 0px rgba(255,255,255,0.3);
/*box-shadow 。
1、 1 div 1px div 0px 0px rgba(255,255,255,0.3)
2、 2 div -1px div 0px 0px rgba(255,255,255,0.3)
3、 3 div 1px div 0px 0px rgba(255,255,255,0.3)
4、 4 div -1px div 0px 0px rgba(255,255,255,0.3)
*/
}
/* */
#main-fog{
width:50px;
height:60px;
background-color:#222;
position: absolute;
top:30px;
left:165px;
border-bottom-left-radius: 50px 10px;
border-bottom-right-radius: 50px 10px;
background-image: -webkit-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* safari*/
background-image:-moz-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* */
background-image:-o-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* */
background-image:-ms-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie*/
background-image:linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);
}
/* */
#main-fog:before{
content:'';
position: absolute;
width:54px;
height:20px;
background-color:#222;
left:-2px;
bottom:100%;
background-image: -webkit-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* safari*/
background-image:-moz-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* */
background-image:-o-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* */
background-image:-ms-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie*/
background-image:linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);
box-shadow: inset 4px 0px 3px #000
}
/* */
.alt-fog{
width:37px;
height:30px;
position: absolute;;
top:60px;
left:255px;
background:#222;
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px 10px;
-webkit-border-bottom-right-radius: 50px 10px;
-moz-border-top-left-radius: 50px;
-moz-border-top-right-radius: 50px;
-moz-border-bottom-left-radius: 50px 10px;
-moz-border-bottom-right-radius: 50px 10px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px 10px;
border-bottom-right-radius: 50px 10px;
background-image: -webkit-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* safari*/
background-image:-moz-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* */
background-image:-o-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* */
background-image:-ms-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie*/
background-image:linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);
-webkit-box-shadow: inset 0px 4px 3px #666;
-moz-box-shadow: inset 0px 4px 3px #666;
box-shadow: inset 0px 4px 3px #666;
}
/* */
.alt-fog:before,.alt-fog:after{
content:'';
position: absolute;
width:5px;
height:15px;
background-color:#222;
bottom:-5px;
left:15px;
background-image: -webkit-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* safari*/
background-image:-moz-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* */
background-image:-o-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* */
background-image:-ms-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie*/
background-image:linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
-webkit-box-shadow: 0px 0px 3px #000;
-moz-box-shadow: 0px 0px 3px #000;
box-shadow: 0px 0px 3px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/* 22px*/
.alt-fog:after{
left:22px;
}
/* */
.alt-fog.nth2{
left:355px;
}
/* 3️⃣ */
.alt-fog.nth3{
left:455px;
}
/* */
.alt-fog.nth4{
left:555px;
}
/* */
#front{
width:10px;
height: 97px;
position: absolute;
top:78px;
left:123px;
background-color: #333;
-webkit-border-top-left-radius: 50px 200px;
-webkit-border-bottom-left-radius: 50px 200px;
-moz-border-top-left-radius: 50px 200px;
-moz-border-bottom-left-radius: 50px 200px;
border-top-left-radius: 50px 200px;
border-bottom-left-radius: 50px 200px;
-webkit-box-shadow: inset 0px -10px 5px #000,inset 1px 10px 5px #666,0px 1px 3px #000;
-moz-box-shadow: inset 0px -10px 5px #000,inset 1px 10px 5px #666,0px 1px 3px #000;
box-shadow: inset 0px -10px 5px #000,inset 1px 10px 5px #666,0px 1px 3px #000;
}
/* 2 */
#front1{
width:17px;
height:110px;
position: absolute;
background-color:#222;
top:70px;
left:135px;
background-image: -webkit-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* safari*/
background-image:-moz-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* */
background-image:-o-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/* */
background-image:-ms-linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);/*ie*/
background-image:linear-gradient(left,#000,#666,#222,#000,#111,#333,#222,#111,#000);
-webkit-box-shadow: 0px 0px 3px #000;
-moz-box-shadow: 0px 0px 3px #000;
box-shadow: 0px 0px 3px #000;
}
/* 2 */
#front1:before{
content:'';
position: absolute;
width:2px;
height:120px;
top:2px;
left:auto;
right:100%;
}
/* 2 */
#front1:after{
content:'';
position: absolute;
width:7px;
height:120px;
top:2px;
left:100%;
right:auto;
}
/* 2 div */
#front1,#front:befroe,#front1:after{
position: absolute;
background-color:#222;
top:70px;
left:135px;
width:17px;
height:110px;
background-image:-webkit-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:-moz-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:-ms-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:-o-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
-webkit-box-shadow:0px 0px 3px #000;
-moz-box-shadow:0px 0px 3px #000;
box-shadow:0px 0px 3px #000;
}
/* */
#bot{
width:1000px;
height:100px;
background-color:#222;
top:180px;
left:135px;
position: absolute;
background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000);
background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000);
background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000);
background-image:-o-linear-gradient(45deg,#000,#222,#111,#000);
background-image:linear-gradient(45deg,#000,#222,#111,#000);
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px -4px 7px #000;
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px -4px 7px #000;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px -4px 7px #000;
}
/* */
#bot:before,#bot:after{
content:'';
position: absolute;
width:170px;
height:30px;
top:15px;
left:170px;
z-index:10;
background-color:#222;
background-image:-webkit-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:-moz-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:-ms-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:-o-linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
background-image:linear-gradient(top,#000,#666,#222,#000,#111,#333,#222,#111,#000);
-webkit-box-shadow:inset 4px 0px 0px rgba(255,255,255,0.2),inset -4px 0px 0px rgba(255,255,255,0.2),0px 3px 4px #000;
-moz-box-shadow:inset 4px 0px 0px rgba(255,255,255,0.2),inset -4px 0px 0px rgba(255,255,255,0.2),0px 3px 4px #000;
box-shadow:inset 4px 0px 0px rgba(255,255,255,0.2),inset -4px 0px 0px rgba(255,255,255,0.2),0px 3px 4px #000;
}
/* */
#bot:after{
top:45px;
}
/* */
#lamp{
width:4px;
height:60px;
background-color:#666;
position: absolute;
bottom:100%;
left:5px;
background-image:-webkit-linear-gradient(45deg,#000,#666,#222,#999,#666);
background-image:-moz-linear-gradient(45deg,#000,#666,#222,#999,#666);
background-image:-ms-linear-gradient(45deg,#000,#666,#222,#999,#666);
background-image:-o-linear-gradient(45deg,#000,#666,#222,#999,#666);
background-image:linear-gradient(45deg,#000,#666,#222,#999,#666);
-webkit-box-shadow: 3px 1px 2px #000;
-moz-box-shadow: 3px 1px 2px #000;
box-shadow: 3px 1px 2px #000;
}
/* */
#lamp:before{
content:'';
position: absolute;;
width:4px;
height:20px;
background-color:yellow;
right:100%;
top:0px;
background-image: -webkit-radial-gradient(left,circle,#fff,yellow,#666);
background-image:-moz-radial-gradient(left,circle,#fff,yellow,#666);
background-image: -ms-radial-gradient(left,circle,#fff,yellow,#666);
background-image:-o-radial-gradient(left,circle,#fff,yellow,#666);
background-image: radial-gradient(left,circle,#fff,yellow,#666);
-webkit-border-top-left-radius: 10px 30px;
-webkit-border-bottom-left-radius: 10px 30px;
-moz-border-top-left-radius: 10px 30px;
-moz-border-bottom-left-radius: 10px 30px;
border-top-left-radius: 10px 30px;
border-bottom-left-radius: 10px 30px;
}
/* */
#lamp:after{
content:'';
position: absolute;
width:12px;
height:16px;
background:#333;
background-image: -webkit-linear-gradient(top,#666,#222,#999,#666);
background-image: -moz-linear-gradient(top,#666,#222,#999,#666);
background-image: -ms-linear-gradient(top,#666,#222,#999,#666);
background-image: -o-linear-gradient(top,#666,#222,#999,#666);
background-image: linear-gradient(top,#666,#222,#999,#666);
left:100%;
top:2px;
-webkit-box-shadow:3px 4px 2px #000;
-moz-box-shadow:3px 4px 2px #000;
box-shadow:3px 4px 2px #000;
}
/* */
#longan{
width:870px;
height:100px;
background-color:#111;
position: absolute;
top:200px;
left:172px;
box-shadow:inset 0px 7px 3px #000, inset 0px 7px 7px #000, inset 0px 7px 15px #000;
border-radius: 30px 10px ;
}
/* */
#buritan{
width:40px;
height:97px;
position: absolute;
background:#222;
top:175px;
right:80px;
background-image:-webkit-linear-gradient(45deg,#000,#222,#111,#000);
background-image:-moz-linear-gradient(45deg,#000,#222,#111,#000);
background-image:-ms-linear-gradient(45deg,#000,#222,#111,#000);
background-image:-o-linear-gradient(45deg,#000,#222,#111,#000);
background-image:linear-gradient(45deg,#000,#222,#111,#000);
-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000;
-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000;
box-shadow:inset 0px 1px 0px rgba(255,255,255,0.2),0px 1px 7px #000;
}
/* */
#moncong{
width:0px;
height:0px;
position: absolute;
top:155px;
left:75px;
border-top:60px solid transparent;
border-left:40px solid transparent;
border-bottom:90px solid #222;
}
/* */
#moncong-bot{
width:50px;
height:37px;
position: absolute;
top:277px;
left:70px;
background: #222;
border-bottom-right-radius: 60px 20px;
background-image: -webkit-linear-gradient(-45deg,#000,#222,#111,#000);
background-image: -ms-linear-gradient(-45deg,#000,#222,#111,#000);
background-image: -moz-linear-gradient(-45deg,#000,#222,#111,#000);
background-image: -o-linear-gradient(-45deg,#000,#222,#111,#000);
background-image: linear-gradient(-45deg,#000,#222,#111,#000);
-webkit-box-shadow:0px 1px 4px #000;
-moz-box-shadow:0px 1px 4px #000;
box-shadow:0px 1px 4px #000;
}
/* u */
#moncong-bot:before{
content:'';
width:20px;
height:47px;
position: absolute;
left:2px;
bottom:7px;
border:3px solid #666;
-webkit-border-radius: 7px 7px 0px 0px ;
-moz-border-radius: 7px 7px 0px 0px ;
border-radius: 7px 7px 0px 0px ;
-webkit-box-shadow: inset 0px 0px 3px #000, 0px 0px 3px #000;
-moz-box-shadow: inset 0px 0px 3px #000, 0px 0px 3px #000;
box-shadow: inset 0px 0px 3px #000, 0px 0px 3px #000;
}
/* */
#moncong-bot:after{
content:'';
position: absolute;
width:35px;
height:5px;
background:#999;
border:2px solid #666;
top:24px;
left:-2px;
background-image: -webkit-linear-gradient(45deg,#666,#ccc,#333,#999,#333);
background-image: -moz-linear-gradient(45deg,#666,#ccc,#333,#999,#333);
background-image: -ms-linear-gradient(45deg,#666,#ccc,#333,#999,#333);
background-image: -o-linear-gradient(45deg,#666,#ccc,#333,#999,#333);
background-image: linear-gradient(45deg,#666,#ccc,#333,#999,#333);
-webkit-box-shadow: 0px 1px 4px #000;
-moz-box-shadow: 0px 1px 4px #000;
box-shadow: 0px 1px 4px #000;
}
/* */
#room{
position: absolute;
width:350px;
height:125px;
background:#222;
top:40px;
left:760px;
background-image: -webkit-linear-gradient(45deg,#000,#222,#111,#000);
background-image: -moz-linear-gradient(45deg,#000,#222,#111,#000);
background-image: -ms-linear-gradient(45deg,#000,#222,#111,#000);
background-image: -o-linear-gradient(45deg,#000,#222,#111,#000);
background-image: linear-gradient(45deg,#000,#222,#111,#000);
}
/* 110*/
#room:before{
content:'110';
position: absolute;
top:15px;
left:25px;
font: bold 28px 'Prisoner SF',Courier,Monospace;
color: rgba(255,255,255,0.4);
}
/* */
.hole{
width:40px;
height:75px;
background:#111;
border:2px solid #222;
margin:20px 25px 0px 0px;
border-radius: 20px 20px 0px 0px;
float:right;
box-shadow: inset 0px 1px 7px #000, 0px 0px 1px rgba(255,255,225,0.4);
position: relative;
display: inline;
}
.hole:before,.hole:after{
content:'';
position: absolute;
width:12px;
height:2px;
background:#666;
margin-top:7px;
top:100%;
left:2px;
display: block;
box-shadow: 0px 1px 1px #000;
border-radius: 5px;
}
.hole:after{
margin-top:11px;
}
.hole.nth2{
margin-right:10px;
}
/* */
#roof{
position: absolute;
width:370px;
height:20px;
background:#222;
top:30px;
left:750px;
background-image: linear-gradient(45deg,#000,#222,#111,#000);
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px #000;
}
#roof2{
position: absolute;
width:430px;
height:20px;
background:#222;
top:20px;
left:720px;
background-image: linear-gradient(top,#000,#222,#111,#000);
box-shadow: 0px 4px 4px #000;
border-bottom-right-radius:60px 20px;
}
#roof2:before{
content:'';
position: absolute;
width:5px;
height:2px;
background:#333;
bottom:-2px;
left:12px;
border:1px solid #444;
box-shadow:0px 1px 3px #000;
}
#roof2:after{
content:'';
position: absolute;
width:5px;
height:5px;
background:#333;
top:15px;
left:408px;
border:1px solid #444;
box-shadow:0px 1px 3px #000;
}
#metal{
position: absolute;
width:670px;
height:75px;
background:#222;
top:100px;
left:272px;
background-image: linear-gradient(45deg,#111 0%,#000 20%,#000 21%,#333 40%,#000 50%,#222 51%,#111 60%,#000 60%,#111 61%,#000 100%);
box-shadow: inset 0px 0px 1px rgba(255,255,255,0.3), 0px 1px 3px #000;
border-radius: 3px 0px 0px 0px;
}
.inner{
width:659px;
height:66px;
border:1px dotted #666;
margin:5px 0px 0px 5px;
}
#fence{
position: absolute;
top:140px;
left:1100px;
width:70px;
height:40px;
}
#fence ul{
position: relative;
height: 40px;
}
#fence ul:before{
content:'';
position: absolute;
width:78px;
height:10px;
top:-10px;
left:-2px;
background-color: #222;
background-image: linear-gradient(45deg,#000,#222,#111,#000);
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px #000;
}
#fence ul:after{
content:'';
position: absolute;
width:78px;
height:10px;
top:40px;
left:-2px;
margin-top:-7px;
background-color: #222;
background-image: linear-gradient(45deg,#000,#222,#111,#000);
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px #000;
}
#fence ul li{
display: inline;
float:right;
width:4px;
height:40px;
background:#666;
margin-left:4px;
margin-right:4px;
background-image: linear-gradient(left,#666,#ccc,#333,#999,#333);
box-shadow: 0px 0px 3px #000;
border-radius: 10px;
}
#title{
position: absolute;
top:100px;
left:292px;
width:642px;
height:75px;
text-align: left;
color:#777;
font: normal 11px Georgia,Times,Serif;
text-shadow: 0px -1px 0px #000;
}
#title h2{
color:#666;
font: bold 22px 'Book Antiqua',Times,Serif;
text-transform: uppercase;
margin:10px 0px 5px 0px ;
padding-bottom:5px;
border-bottom:1px dotted #666;
}
.foot{
position: absolute;
top:210px;
left:115px;
width:50px;
height:100px;
background:#222;
background-image: linear-gradient(45deg,#000,#222,#111,#000);
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px #000;
}
.foot.right{
width:78px;
right:130px;
left:auto;
border-bottom-left-radius: 50px 10px;
}
.stair{
position: absolute;
top:205px;
left:120px;
width:30px;
height:110px;
background:#222;
}
.stair.left{
height:115px;
}
.stair.right{
right:170px;
left:auto;
}
.stair .hand{
width:5px;
height:110px;
background-image: -webkit-linear-gradient(left,#666,#ccc,#333,#999,#333);
background-image: -moz-linear-gradient(left,#666,#ccc,#333,#999,#333);
background-image: -ms-linear-gradient(left,#666,#ccc,#333,#999,#333);
background-image: -o-linear-gradient(left,#666,#ccc,#333,#999,#333);
background-image: linear-gradient(left,#666,#ccc,#333,#999,#333);
border-radius: 10px;
box-shadow: inset 0px 2px 1px #ccc, 0px 0px 3px #000;
}
.stair .hand.right{
float:right;
margin-top:-110px;
}
.stair ul{
width:30px;
height:93px;
position: absolute;
bottom:10%;
}
.stair ul li{
display: block;
height:5px;
margin-top:4px;
margin-bottom:6px;
background-image: -webkit-linear-gradient(top,#666,#ccc,#333,#999,#333);
background-image: -moz-linear-gradient(top,#666,#ccc,#333,#999,#333);
background-image: -ms-linear-gradient(top,#666,#ccc,#333,#999,#333);
background-image: -o-linear-gradient(top,#666,#ccc,#333,#999,#333);
background-image: linear-gradient(top,#666,#ccc,#333,#999,#333);
box-shadow: 0px 0px 3px #000;
padding:0px;
}
.rodaout{
width:130px;
height:130px;
position: absolute;
background:#222;
top:205px;
left:187px;
border-radius: 400px;
/* animation: rodaout-animation 2s linear infinite */
}
.rodaout .inner{
width:120px;
height:120px;
border:2px solid #6A210C;
position: relative;
top:-2px;
left:-2px;
-webkit-box-shadow:0px 0px 1px #000;
-moz-box-shadow:0px 0px 1px #000;
box-shadow:0px 0px 1px #000;
-webkit-border-radius:400px;
-moz-border-radius:400px;
border-radius:400px;
}
.rodaout .inner .in-in{
width:100px;
height:100px;
border:10px solid #333;
position: relative;
top:0px;
left:0px;
border-radius: 400px;
box-shadow:inset 0px 1px 5px #000, 0px 0px 2px #000;
}
.grid{
width:3px;
height:98px;
position: absolute;
border:1px solid #777;
background:#666;
top:0px;
left:47px;
box-shadow: 0px 0px 1px #000;
border-radius: 5px / 70px;
}
.grid.r2{
transform: rotate(30deg)
}
.grid.r3{
transform: rotate(60deg)
}
.grid.r4{
transform: rotate(90deg)
}
.grid.r5{
transform: rotate(120deg)
}
.grid.r6{
transform: rotate(150deg)
}
.hub{
width:10px;
height:10px;
background:#666;
border:5px solid #777;
position: absolute;
top:40px;
left:40px;
border-radius: 20px;
box-shadow: 0px 0px 2px #000;
}
.rodaout.nth2{
left:327px;
}
.rodaout.nth3{
left:467px;
}
.rodaout.nth4{
left:607px;
}
.rodaout.nth5{
left:747px;
}
.rodaout.nth6{
left:887px;
}
#grouper{
width:800px;
height:90px;
background:transparent;
position: absolute;
top:225px;
left:190px;
}
.strong{
width:130px;
height:4px;
border:1px solid #666;
background:#666;
position: absolute;
bottom:12px;
left:87px;
background-image: linear-gradient(-45deg,#666,#ccc,#333,#999,#333);
box-shadow: inset 0px 1px 0px rgba(0,0,0,0.7), inset 0px -1px 0px rgba(0,0,0,0.7), 0px 1px 3px #000;
}
.strong:before,.strong:after{
content:'';
width:10px;
height:10px;
border:3px double #666;
background:#333;
position: absolute;
top:-6px;
left:-2px;
border-radius: 20px;
box-shadow: 0px 1px 3px #000;
}
.end{
width:20px;
height:20px;
border:3px double #999;
background:#666;
position: absolute;
top:42px;
left:774px;
border-radius: 50px;
background-image: -webkit-radial-gradient(center,cover,#aaa,#333);
box-shadow: 0px 1px 3px #000;
}
.strong:after{
left:auto;
right:-2px;
}
.strong.nth2{
left:227px;
}
.strong.nth3{
left:368px;
}
.strong.nth4{
left:508px;
}
.strong.nth5{
left:648px;
}
#machine-box{
width:127px;
height:140px;
background:#333;
position: absolute;
top:175px;
left:160px;
background-image:linear-gradient(45deg,#000,#222,#111,#000);;
border-bottom-right-radius:50px 20px;
box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 7px #000;
}
#machine-box:before{
content:'';
width:98px;
height:36px;
border:2px solid #222;
background:#222;
position: absolute;
top:10px;
left:39px;
background-image:linear-gradient(45deg,#000,#222,#111,#000);
box-shadow: inset 4px 4px 0px rgba(255,255,255,0.2), inset -4px -4px 0px rgba(255,255,255,0.2), 0px 1px 7px #000;;
}
.vertical{
width:5px;
height:50px;
background:#333;
position: absolute;
top:180px;
left:212px;
background-image: -webkit-linear-gradient(top,#666,#ccc,#333,#999,#333);
box-shadow: inset 0px 2px 1px #ccc, 0px 0px 3px #000;
border-radius: 10px;
}
.vertical.two{
left:218px;
}
.stripe-stripe{
width:70px;
height:69px;
position: absolute;
margin:0;
padding:0px;
}
.stripe-stripe.one{
top:235px;
left:180px;
}
.stripe-stripe.two{
top:60px;
left:846px;
height:24px;
padding:0px 7px 3px 7px;
}
ul.stripe-stripe li{
display: block;
height:1px;
background:#444;
margin-bottom:2px;
}
.stripe-stripe.one:before,.stripe-stripe.one:after{
content:'';
width:10px;
height:10px;
border:3px double #666;
background:#333;
position: absolute;
top:30px;
left:-5px;
border-radius: 20px;
box-shadow: 0px 1px 3px #000;
}
.stripe-stripe.one:after{
top:45px;
}
.stripe-stripe.two:before,.stripe-stripe.two:after{
content:'';
width:15px;
height:2px;
border:3px double #666;
background:#111;
position: absolute;
top:0px;
left:84px;
margin-left:10px;
border-radius: 20px;
box-shadow: 0px 1px 3px #000;
}
.stripe-stripe.two:after{
top:10px;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
