html+css轮播

最新推荐文章于 2022-12-31 07:46:32 发布

DRMIVET Stone

最新推荐文章于 2022-12-31 07:46:32 发布

阅读量846

点赞数

分类专栏： html+css网页前台文章标签： html5 图片 jquery js 动画

Wangqi

本文链接：https://blog.csdn.net/u012651389/article/details/43941209

版权

html+css网页前台专栏收录该内容

25 篇文章 3 订阅

订阅专栏

<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>