想要出现图片中的动态箭头。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" rev="stylesheet" href="./iconfont.css" type="text/css" media="all" />
</head>
<style>
/* 动态箭头样式 */
@keyframes move {
0% {
left: 0%;
opacity: 0;
}
70% {
left: 70%;
opacity: 1
}
100% {
left: 100%;
opacity: 0;
}
}
@-khtml-keyframes move {
0% {
left: 0%;
opacity: 0;
}
70% {
left: 70%;
opacity: 1
}
100% {
left: 100%;
opacity: 0;
}
}
@-moz-keyframes move {
0% {
left: 0%;
opacity: 0;
}
70% {
left: 70%;
opacity: 1
}
100% {
left: 100%;
opacity: 0;
}
}
@-ms-keyframes move {
0% {
left: 0%;
opacity: 0;
}
70% {
left: 70%;
opacity: 1
}
100% {
left: 100%;
opacity: 0;
}
}
@-webkit-keyframes move {
0% {
left: 0%;
opacity: 0;
}
70% {
left: 70%;
opacity: 1
}
100% {
left: 100%;
opacity: 0;
}
}
@-o-keyframes move {
0% {
left: 0%;
opacity: 0;
}
70% {
left: 70%;
opacity: 1
}
100% {
left: 100%;
opacity: 0;
}
}
.move {
-webkit-animation-name: move;
animation-name: move;
posi