无缝滚动小练习—animation

来源：互联网发布：java工程师是干什么的编辑：程序博客网时间：2024/05/22 13:34

html部分

<body><div id="wrap">    <ul id="list">        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>    </ul></div></body>

css部分

<style>*{padding: 0; margin: 0;}#wrap{width: 500px; height: 100px; position: relative; margin: 180px; overflow: hidden;}#list{width: 1000px; height: 100px; position: absolute; top: 0; left: 0; -webkit-animation: 5s domove linear infinite;  -ms-animation: 3s domove linear infinite;}#list li{width: 98px; height: 98px; border: 1px solid #fff; background: black; list-style: none; float: left; color: #fff; font-size: 25px; line-height: 98px; text-align: center;}@-webkit-keyframes domove{    0%{        left: 0%;    }    100%{        left: -500px;    }}@-ms-keyframes domove{    0%{        left: 0%;    }    100%{        left: -500px;    }}#wrap:hover #list{ -webkit-animation-play-state: paused;}  //停止动画</style>

效果图

这里写图片描述

阅读全文

0 0