一、二维跑马灯
1.css实现跑马灯效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
display: flex;
flex-direction: row;
justify-content: center;
}
#wrapper {
position: relative;
overflow: hidden;
width: 25%;
height: 100px;
font-size: 20px;
border: solid 1px #000000;
}
#horse {
position: absolute;
width: 100%;
-webkit-animation: horse 3s linear 0s infinite;
}
@-webkit-keyframes horse {
0% {
left: 0%;
top: 0px;
background-color: lavenderblush;
}
47% {
left: 105%;
top: 0px;
}
48% {
left: 105%;
top: 100px;
}
49% {
left: -105%;
top: 100px;
}
50% {
left: -100%;
top: 0px;
background-color: lightpink;
}
100% {
left: 0%;
top: 0px;
background-color: #FFB6C1;
}
}
</style>
<script> </script>
</head>
<body>
<div id="wrapper">
<div id="horse"> <span> CSS3 </span> <span> 实现的跑马灯效果 </div> </span>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta char