跑马灯效果是指在网页上运动的文字或图片,被广泛应用于网页广告、滚动新闻等需要引起用户注意的场合。如果你想在自己的网页上实现跑马灯效果,本文将提供详细的跑马灯代码示例。
一、HTML框架
实现跑马灯效果需要使用HTML,首先需要写出相应的HTML框架。
```
/*定义div宽度*/
#container {
width: 100%;
height: 60px;
overflow: hidden;
position: relative;
background-color: #ccc;
margin-top: 10px;
margin-bottom: 10px;
padding: 2px;
border: 1px solid #333;
}
/*定义文本样式*/
.text {
position: absolute;
font-size: 28px;
font-weight: bold;
color: #333;
margin: 0;
padding: 0;
line-height: 60px;
white-space: nowrap;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
/*定义动画效果*/
@keyframes move {
0% {
left: 100%;
}
100% {
left: -100%;
}
}
这是跑马灯效果示例1