css偽類hover，css橫向排列_CSS中偽元素和偽類的經典使用技巧

<

/*給box盒子設置相應的樣式*/

<

 body {margin: 0px;padding: 0px;background: #34455a;}.rotate {width: 200px;height: 200px;box-sizing: border-box;border-radius: 50%;border-top: 10px solid red;position: relative;margin: 100px auto;animation: run1 1s linear infinite;
}/*使用偽元素:before和:after設置相關樣式*/      
.rotate::before,
.rotate::after {content: "";width: 200px;height: 200px;position: absolute;left: 0px;top: -5px;box-sizing: border-box;border-radius: 50%;
}.rotate::before {border-top: 10px solid blue;transform: rotate(120deg);
}.rotate::after {border-top: 10px solid skyblue;transform: rotate(240deg);
}
.rotate>div {position: absolute;width: 200px;height: 200px;font-size: 20px;color: #fff;text-align: center;line-height: 200px;animation: run2 1s linear infinite;
}
/*聲明兩個動畫，分別綁定在對應的元素上*/ @keyframes run1 {form {}to {transform: rotate(360deg);}
}@keyframes run2 {form {}to {transform: rotate(-360deg);} 
}

<

       ul {margin: 100px auto;}ul li {float: left;list-style: none;width: 200px;height: 50px;margin-left: 20px;perspective: 500px;}.box {position: relative;transform-style: preserve-3d;transition: all 0.4s;width: 200px;height: 50px;}.first,.second {position: absolute;width: 100%;height: 100%;top: 0px;left: 0px;text-align: center;line-height: 50px;}.box .first {background: green;transform: translateZ(25px);}.box .second {background: red;transform: translateY(25px) rotateX(-90deg);color: white;}/*使用偽元素實現最終效果*/.box:hover {transform: rotateX(90deg);}