html+css轮播

来源：互联网发布：js数据写入excel文件编辑：程序博客网时间：2024/05/16 14:58
<strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>MyHtml.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><style type="text/css">*{margin:0px;padding:0px;}.cont{width:100%;height:450px;/*background:#6901ab*/;/*超粗父亲内容的子项*/overflow:hidden; position:relative;cursor:pointer;}.cont .banner{width:100%;height:450px;position:absolute;top:0px;left:0px;animation:play 5S infinite ease ;}.cont .banner li{width:100%;height:450px;list-style:none}.cont .banner li:nth-child(1){background:url("images/4.jpg") center no-repeat;}.cont .banner li:nth-child(2){background:url("images/1.jpg") center no-repeat;}.cont .banner li:nth-child(3){background:url("images/3.jpg") center no-repeat;}.cont .banner li:nth-child(4){background:url("images/2.jpg") center no-repeat;}.cont .banner li:nth-child(5){background:url("images/5.jpg") center no-repeat;}.cont .button{width:450px ; height:10px ;position:absolute;bottom:35px ;right:20px;}.cont .button li{list-style:none;height:15px;width:60px;background:rgba(0,0,0,0.5);float:left;margin-right:10px;border-radius:5px; }.cont .button #lp{position:top:0px ; left:0px;position:absolute;animation:mplay 5S infinite ease ;}@keyframes play{0%{top:0px;}19%{top:0px;}20%{top:-450px;}39%{top:-450px;}40%{top:-900px;}59%{top:-900px;}60%{top:-1350px;}79%{top:-1350px;}80%{top:-1800px;}99%{top:-1800px;}100%{top:0px;}}@keyframes mplay{0%{left:0px;background:#FF6633;}19%{left:0px;background:#FF6633;}20%{left:70px;background:#c4002;}39%{left:70px;background:#c4002;}40%{left:140px;background:#FF6633;}59%{left:140px;background:#FF6633;}60%{left:210px;background:#FF6633;}79%{left:210px;background:#FF6633;}80%{left:280px;background:#FF6633;}99%{left:280px;background:#FF6633;}100%{left:0px;background:#FF6633;}}.cont:hover .banner{animation-play-state:paused;}/*动画暂停*/.cont:hover .button #lp{animation-play-state:paused;}/*动画暂停*/</style>  </head>  <body>  <div class="cont">  <ul class="banner">  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  </ul>  <ul class="button">  <li></li>  <li></li>  <li></li>  <li></li>  <li></li>  <li id="lp"></li>  </ul>  </div>  </body></html></strong>
0 0