<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.parent{width: 200px;height: 100px;overflow: hidden;position: relative;}
ul,#red,#green,#blue{box-sizing: border-box; margin: 0px;padding: 0px;list-style: none;}
ul{width: 600px;height: 100px;position: relative;transition: left 2s ease-in-out;}
#red,#green,#blue{float: left; width: 200px;height: 100px;}
#red{background-color: red;}
#green{background-color: green;}
#blue{background-color: blue;}
/*圆点样式*/
.dot{position: absolute;right: 0px;bottom: 5px;z-index: 100;}
.dot a{display: inline-block; width: 15px;height: 15px;border-radius: 15px; margin-right:5px; background-color: #fff; }
.dot a:hover{background-color: grey;}
/*定义动作*/
@keyframes mymove{ 0%{left: -0px} 50%{left: -200px} 100%{left: -400px} }
/*引入动作*/
ul{animation: mymove 6s infinite alternate;}
ul:hover{animation-play-state: paused;}
/*跳转至锚点banner1时ul执行下面的样式????????不过貌似和上面的动画不能一起用??????该怎么实现*/
#banner1:target~ul{left:0px;}
#banner2:target~ul{left:-200px;}
#banner3:target~ul{left:-400px;}
</style>
</head>
<body>
<div>
<span id="banner1"></span>
<span id="banner2"></span>
<span id="banner3"></span>
<ul>
<li id="red"></li>
<li id="green"></li>
<li id="blue"></li>
</ul>
<div><a href="#banner1" ></a><a href="#banner2"></a><a href="#banner3"></a></div>
</div>
</body>
</html>
1 回答
- 1 回答
- 0 关注
- 2808 浏览
添加回答
举报
0/150
提交
取消