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>