1, how to use sprite map to achieve animation effect in the need to produce animation where the use of background-position to move. Then use Transtion to set the animation effect
2, Background-size:cover and contain what is the difference. Two are equal to the proportional shrinkage. But cover's scaling rules are as far as possible in the container, which will result in a part of the picture not showing. and contain is to try to ensure that the picture. If the height of the container is wider than the background picture. Then cover will cause some pictures not to show, and contain will cause the container some places no background 3, using Clip-path to draw a pentagram. Start {width:200px; height:200px; background-color:r Ed Clip-path:polygon (50% 0, 65% 30%, 100% 30%, 70% 60%, 90% 100%, 50% 80%, 10% 100%, 30% 60%, 0 30%, 40% 30%)}
4, use the CSS to draw a cube
<! DOCTYPE html> . 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 (-1 00px); }. left{Background-color:green Transform:translatex ( -100px) Rotatey (90deg); right{Background-color:gray; transfo Rm:translatex (100px) Rotatey (90deg); }. top{Background-color:blue Transform:translatey ( -100px) Rotatex (90deg); bottom{Background-color:black; transfo Rm:translatey (100px) Rotatex (90deg); } </style> <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> &L T;div class= "Bottom" > 6 </div> </div> </div> </body>
