cssc参照代码
<style>
.map {
position: relative;
width: 400px;
height: 279px;
background: url(./timg.jpg) no-repeat;
margin: 0 auto;
}
.city {
position: absolute;
top: 120px;
right: 140px;
color: #fff;
}
.tw {
position: absolute;
top: 220px;
right: 105px;
color: #fff;
}
.gd {
position: absolute;
top: 230px;
right: 146px;
color: #fff;
}
.den {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^="pulse"] {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: bk 1.2s linear infinite;
}
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.8s;
}
@keyframes bk {
0% {}
50% {
width: 20px;
height: 20px;
opacity: 1;
}
100% {
width: 30px;
height: 30px;
opacity: 0;
}
}
</style>
html参照代码
<body>
<div class="map">
<div class="city">
<div class="den"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city tw">
<div class="den"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city gd">
<div class="den"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
速度曲线
animati
前端2D小作品
on-timing-function:ease(默认)、linear(匀速)、ease-in(以低速开始)、ease-out(以低速结束)、ease-in-out(以低速开始以低速结束)
3D的位移和旋转
3D的位移:
语法:
- translate3d(x,y,z) 参数没有写0
- translateX(x)
- translateY(y)
- translateZ(z)
他们的单位px
透视
perspective 透视写在父级上
3D的旋转
语法:
- transform-rotateX(ndeg) 沿着X轴旋转n度
- transform-rotateY(ndeg) 沿着Y轴旋转n度
- transform-rotateZ(ndeg) 沿着Z轴旋转n度
- transform-rotate3d(n,n,n,deg) 自定义旋转 n为1,0
3D的呈现
语法:
- transform-style:flat 默认不开启3D空间
- transform-style:preserve-3d 子元素开启3D空间