1、怎麼用雪碧圖去實現動畫效果 在需要產生動畫的地方使用background-position進行移動。然後使用transtion設定動畫效果
2、background-size:cover跟contain有什麼區別。 兩個都是等比例放縮。但是cover的放縮規則是盡量不超過容器，也就是會導致圖片的一部分不顯示。而contain的是盡量保證圖片。如果容器寬高比跟背景圖片寬高比不一樣。那麼cover會導致一部分圖片不顯示，而contain會導致容器一些地方沒背景 3、使用clip-path畫一個五角星 .start { width: 200px; height: 200px; background-color: red; clip-path: polygon( 50% 0, 65% 30%, 100% 30%, 70% 60%, 90% 100%, 50% 80%, 10% 100%, 30% 60%, 0 30%, 40% 30%) }
4、使用css畫出一個立方體
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>立方體</title> <style> .container { perspective: 700px; position: relative; /* top: 50%; left: 50%; */ margin-left: 500px; }
.cube { width: 200px; height: 200px; transform-style: preserve-3d; transform: translateZ(-100px); }
.cube>div { width: 200px; height: 200px; line-height: 200px; opacity: .3; text-align: center; position: absolute; font-size: 50px; }
.front { background-color: red; transform: translateZ(100px); } .back{ background-color: yellow; transform: translateZ(-100px); } .left{ background-color: green; transform: translateX(-100px) rotateY(90deg); } .right{ background-color: gray; transform: translateX(100px) rotateY(90deg); } .top{ background-color: blue; transform: translateY(-100px) rotateX(90deg); } .bottom{ background-color: black; transform: translateY(100px) rotateX(90deg); } </style> </head>
<body> <div class="container"> <div class="cube"> <div class="front"> 1 </div> <div class="back"> 2 </div>
<div class="left"> 3 </div> <div class="right"> 4 </div> <div class="top"> 5 </div> <div class="bottom"> 6 </div> </div> </div> </body>
</html>
