[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style>
@keyframes warn {
0% {
transform: scale(0)
opacity: 0.0
}
25% {
transform: scale(0)
opacity: 0.1
}
50% {
transform: scale(0.1)
opacity: 0.3
}
75% {
transform: scale(0.5)
opacity: 0.5
}
100% {
transform: scale(1)
opacity: 0.0
}
}
@-webkit-keyframes "warn" {
0% {
-webkit-transform: scale(0)
opacity: 0.0
}
25% {
-webkit-transform: scale(0)
opacity: 0.1
}
50% {
-webkit-transform: scale(0.1)
opacity: 0.3
}
75% {
-webkit-transform: scale(0.5)
opacity: 0.5
}
100% {
-webkit-transform: scale(1)
opacity: 0.0
}
}
.container {
position: relative
width: 40px
height: 40px
border: 1px solid #000
}
/* 保持大小不变的小圆圈 */
.dot {
position: absolute
width: 6px
height: 6px
left: 15px
top: 15px
-webkit-border-radius: 20px
-moz-border-radius: 20px
border: 2px solid red
border-radius: 20px
z-index: 2
}
/* 产生动画（向外扩散变大）的圆圈 */
.pulse {
position: absolute
width: 24px
height: 24px
left: 2px
top: 2px
border: 6px solid red
-webkit-border-radius: 30px
-moz-border-radius: 30px
border-radius: 30px
z-index: 1
opacity: 0
-webkit-animation: warn 3s ease-out
-moz-animation: warn 3s ease-out
animation: warn 3s ease-out
-webkit-animation-iteration-count: infinite
-moz-animation-iteration-count: infinite
animation-iteration-count: infinite
}
</style>
</head>
<body>
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
</div>
</body>
</html>
原理就是，先定义一个元素 ，然后定义动画XYZ轴偏移。
body > div > div:after {content: ""
position: absolute
top: -5px
box-shadow: 0 0 12px #fff
left: 50%
margin-left: -5px
width: 5px
height: 5px
border-radius: 50%
background-color: #fff
-webkit-animation: particle_ 2s infinite linear
animation: particle_ 2s infinite linear
} body > div:nth-of-type(4) > div, body > div:nth-of-type(4) > div:after {
-webkit-animation-delay: -1.5s
animation-delay: -1.5s
}
body > div > div {
width: 200px
height: 200px
position: relative
-webkit-transform-style: preserve-3d
-webkit-animation: trail_ 2s infinite linear
transform-style: preserve-3d
animation: trail_ 2s infinite linear
}
实施步骤：
建立一个BOX
在BOX中制作一个元素。
CSS动画定义BOX旋转按照你的轨迹。
通过。
-webkit-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
-moz-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
-o-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg )
来定义旋转方向，0是不旋转。0-360度是一圈。
-webkit-transition:transform 1s
transition:transform 1s
这是设置动画时间。
一个BOX完成后，复制box，摆在统一中心点后，设置Z轴的数字。
