电商项目(下)

电商项目

电商项目(中)

position: static | relative | absolute | fixed | sticky ;

如果position值不是static,可以使用z-index属性,

<style>
 #position {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 50px;
  background: #eee;
 }
</style>

<div id="position">居中</div>
z-index: auto;
// 先定义position
position: absolute;

z-index: 1;

z-index: 2;

z-index: 3;
裁剪 clip: rect(0 auto 35px 10px);

钟表:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        	 * {
        	 	 margin: 0;
        	 	 padding: 0;
        	 }
        	 html,body {
        	 	 width: 100%;
        	 	 height: 100%;
        	 }

        	 .colock {
        	 	  width: 400px;
        	 	  height: 400px;
        	 	  border: 1px solid #000;
        	 	  border-radius: 50%;
        	 	  margin: 50px auto;
        	 	  position: relative;
        	 }

        	 .colock>div {
        	 	 position: absolute;
        	 }
        	 .line {
        	 	 width: 2px;
        	 	 height: 100%;
        	 	 background-color: #ccc;
        	 	 margin-left: -1px;
        	 	 left: 50%;
        	 }

        	 .line:first-child{

        	 }
        	 .line:nth-child(2){
        	 	 transform: rotateZ(30deg);
        	 }
        	 .line:nth-child(3){
        	 	 transform: rotateZ(60deg);
        	 }
        	 .line:nth-child(4){
        	 	 transform: rotateZ(90deg);
        	 }
        	 .line:nth-child(5){
        	 	 transform: rotateZ(120deg);
        	 }
        	 .line:nth-child(6){
        	 	 transform: rotateZ(150deg);
        	 }
        	 .cover {
        	 	 width: 380px;
        	 	 height: 380px;
        	 	 background-color: #fff;
        	 	 border-radius: 50%;
        	 	 left: 50%;
        	 	 top: 50%;
        	 	 margin-top: -190px;
        	 	 margin-left: -190px;
        	 }

        	 .h {
        	 	 width: 6px;
        	 	 height: 130px;
        	 	 background-color: #000;
        	 	 margin-left: -3px;
        	 	 left: 50%;
        	 	 top: 60px;
        	 	 transform-origin:bottom;
        	 	 animation: rotate  43200s steps(60) infinite;
        	 }

        	 .m {
        	 	 width: 4px;
        	 	 height: 150px;
        	 	 background-color: green;
        	 	 margin-left: -2px;
        	 	 left: 50%;
        	 	 top: 40px;
        	 	 transform-origin:bottom;
        	 	 animation: rotate  3600s steps(60) infinite;
        	 }

        	 .s {
        	 	 width: 2px;
        	 	 height: 160px;
        	 	 background-color: pink;
        	 	 margin-left: -1px;
        	 	 left: 50%;
        	 	 top: 30px;
        	 	 transform-origin:bottom;
        	 	 animation: rotate  60s steps(60) infinite;
        	 }

        	 .dotted {
        	 	 width: 20px;
        	 	 height: 20px;
        	 	 border-radius: 50%;
        	 	 background-color: #000;
        	 	 left: 50%;
        	 	 top: 50%;
        	 	 margin-left: -10px;
        	 	 margin-top: -10px;
        	 }

        	 @keyframes rotate {
        	 	 from {
        	 	 	 transform: rotateZ(0deg);
        	 	 }

        	 	 to {
					transform: rotateZ(360deg);
        	 	 }
        	 }
        </style>
    </head>
    <body>

			 <div class="colock">
			 	
			 	 <div class="line"></div>
			 	 <div class="line"></div>
			 	 <div class="line"></div>
			 	 <div class="line"></div>
			 	 <div class="line"></div>
			 	 <div class="line"></div>
			 	 <div class="cover"></div>

			 	 <div class="h"></div>
			 	 <div class="m"></div>
			 	 <div class="s"></div>

			 	 <div class="dotted"></div>
			 </div>
    </body>
</html>

心动:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 400px;
            height: 400px;
            margin: 100px auto;
            animation: love .5s ease infinite;
        }

        @keyframes love {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
<div>
    <img src="images/1.jpg" alt="" width="400"/>
</div>
</body>
</html>

效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        	<style type="text/css">
        		* {
        			margin: 0;
        			padding: 0;
        		}
        		html,body {
        			 width: 100%;
        			 height: 100%;
        			 background: url(img/bg.jpg) no-repeat;
        			 background-size: cover;
        			 position: relative;
        		}
        		.box {
        			width: 600px;
        			height: 600px;
        			border: 1px solid #ccc;
        			border-radius: 50%;
        			position: absolute; 
        			left: 50%;
        			margin-left: -300px;
        			top: 50%;
        			margin-top: -300px;
        		}

        		.sun {
        			 position: absolute;
        			 width: 50px;
        			 height: 50px;
        			 background-color: orange;
        			 border-radius: 50%;
        			 margin-left: -25px;
        			 left: 50%;
        			 margin-top: -25px;
        			 top: 50%;
        			 box-shadow: 0px 0px 50px orange;
        		}

        		.lin1 {
        			 width: 100px;
        			 height: 100px;
        			 border: 1px solid #ccc;
        			 border-radius: 50%;
        			 margin-left: -50px;
        			 margin-top: -50px;
        			 animation: rotate 10s linear infinite;
        		}

        		.lin1:after {
        			 content: "";
        			 width: 20px;
        			 height: 20px;
        			 display: block;
        			 border-radius: 50%;
        			 background-color: orange;
        			 position: absolute;
        			 left: -2px;
        			 top: 10px;
        		}

        		.public {
        			 position: absolute;
        			 left: 50%;
        			 top: 50%;
        		}




        		@keyframes rotate {
        			 from {
        			    transform: rotateZ(0deg);
        			 }

        			 to {
        			 	 transform: rotateZ(360deg);
        			 }
        		}

        		.lin2 {
        			 width: 150px;
        			 height: 150px;
        			 border: 1px solid #ccc;
        			 border-radius: 50%;
        			 margin-left: -75px;
        			 margin-top: -75px;

        			 animation: rotate 5s linear infinite;
        		}
        		.lin2:after {
        			content: "";
        			width: 10px;
        			height: 10px;
        			background-color: blue;
        			display: block;
        			border-radius: 50%;
        			position: absolute;
        			left: 25px;
        			top: 10px;
        		}

        		.lin3 {
        			 width: 230px;
        			 height: 230px;
        			 border: 1px solid #ccc;
        			 border-radius: 50%;
        			 margin-left: -115px;
        			 margin-top: -115px;
        			 animation:  rotate 10s linear infinite;
        		}
        		.lin3 span {
        			 width: 20px;
        			 height: 20px;
        			 display: block;
        			 background-color: green;
        			 border-radius: 50%;
        			 position: absolute;
        			 left: 50px;
        			 animation: rotate 5s linear infinite;
        		}
        		.lin3 span b {
        			 width: 10px;
        			 height: 10px;
        			 background-color: pink;
        			 display: block;
        			 border-radius: 50%;
        			 position: absolute;
        			 left: 25px;

        		}

        		.lin4  {
        			 width: 332px;
        			 height: 332px;
        			 border: 1px solid #ccc;
        			 background: url(img/asteroids_meteorids.png) no-repeat;
        			 border-radius: 50%;
        			 margin-left: -161px;
        			 margin-top: -161px;
        			 animation: rotate 15s linear infinite;
        		}

        		.lin4:after {
        			 content: "";
        			 display: block;
        			 width: 10px;
        			 height: 10px;
        			 background-color: red;
        			 border-radius: 50%;
        			 position: absolute;
        			 left: 120px;
        		}

        		.line5 {
        			 width: 450px;
        			 height: 450px;
        			 border: 1px solid #ccc;
        			 border-radius: 50%;
        			 margin-left: -220px;
        			 margin-top: -220px;
        			 animation: rotate 10s linear infinite;
        		}

        		.line5 span {
        			 width: 30px;
        			 height: 30px;
        			 background-color: blue;
        			 border-radius: 50%;
        			 display: block;
        			 position: absolute;
        			 left: 120px;
        		}

        		.line5 span  b {
        			 display: block;
        			 width: 40px;
        			 height: 40px;
        			 border: 5px solid #ccc;
        			 border-radius: 50%;
        			 transform: skew(45deg);
        			 position: absolute;
        			 left: -6px;
        			 top: -10px;
        		}



        	</style>

        </head>
    <body>
			
			<div class="box">
					
				  <div class="sun"></div>
				  <div class="lin1 public"></div>
				  <div class="lin2 public"></div>
				  <div class="lin3 public">
				  	  <span>
				  	  	  <b></b>
				  	  </span>
				  </div>

				  <div class="lin4 public"></div>

				  <div class="line5 public">
				  	   <span>
				  	   	  <b></b>
				  	   </span>
				  </div>

			</div>

    </body>
</html>

海浪:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        	 html,body {
        	 	 width: 100%;
        	 	 height: 100%;
        	 	 margin: 0;
        	 	 padding: 0;
        	 	 background-color: #0EA9B1;
        	 }
        	 .box {
        	 	 width: 100%;
        	 	 height: 100%;
        	 	 position: relative;
        	 	 overflow: hidden;
        	 }
        	 .box img {
        	 	 position: absolute;
        	 	 width: 100%;
        	 	 bottom: 0px;
        	 }

        	 .box img:nth-child(1) {
        	 	 animation: move 1s linear infinite alternate;
        	 }
        	 .box img:nth-child(2) {
        	 	 animation: move 1s 0.5s linear infinite alternate;
        	 }


        	 @keyframes move {
        	 	 from {
        	 	 	bottom: 0px;
        	 	 }

        	 	 to {
				   bottom: -50px;
        	 	 }
        	 }

        	 .sun {
        	 	  width: 100px;
			      height: 100px;
			      position: absolute;
			      left: 50px;
			      top: 50px;
        	 }

        	 .sun:after {
        	 	 content: "";
				 display: block;
				 width: 50px;
				 height: 50px;
				 border-radius: 50%;
				 background-color: rgba(255,255,255,.8);
				 position: absolute;
				 left: 50%;
				 margin-left: -25px;
				 top: 50%;
				 margin-top: -25px;
				 animation: scale 1s linear infinite alternate;
        	 }
        	 .sun:before {
        	 	 content: "";
        	 	 display: block;
				 width: 80px;
				 height: 80px;
				 border-radius: 50%;
				 background-color: rgba(255,255,255,.6);
				 position: absolute;
				 left: 50%;
				 margin-left: -40px;
				 top: 50%;
				 margin-top: -40px;
				 animation: scale 1s 0.5s linear infinite alternate;
        	 }


        	 @keyframes scale {
        	 	 from {
        	 	 	box-shadow: 0px 0px 0px #fff;
        	 	 	transform: scale(1);
        	 	 }

        	 	 to {
					box-shadow: 0px 0px 50px #fff;
					transform: scale(1.2);
        	 	 }
        	 }
        </style>
    </head>
    <body>
		 <div class="box">
		 	 <img src="img/1.png" alt="">
		 	 <img src="img/2.png" alt="">

		 	 <div class="sun"></div>
		 </div>
    </body>
</html>

背景:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 400px;
		height: 400px;
		background: url(images/x.jpg) no-repeat;
		border: 1px solid red;
		/*background-size: cover;*/
		background-size: contain;
	}
	</style>
</head>
<body>
	<div>
	</div>
</body>
</html>

渐变色:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 300px;
		height: 200px;
		/*background:-webkit-linear-gradient(渐变的起始位置, 起始颜色, 结束颜色);*/
		/*background: -webkit-linear-gradient(top, red, green);*/
		
		/*background:-webkit-linear-gradient(渐变的起始位置, 颜色 位置, 颜色 位置....)*/
		background: -webkit-linear-gradient(top, red 0%, red 50%, blue 100%);
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		border: 1px solid #000;
		width: 600px;
		height: 600px;
		background: url(images/2.jpg) no-repeat top left , url(images/1.jpg) no-repeat bottom right;
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

动画背景:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 300px;
		height: 80px;
		border-radius: 20px;
		
		background: url(images/paopao.png)  no-repeat top left, url(images/paopao.png) no-repeat right bottom;
		background-color: blue; 
		transition: all 3s;
	}
	div:hover {
		background-position: right bottom, top left; 
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

透明度:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: red;
		opacity: 0.2;  /*盒子半透明*/
	}

	</style>
</head>
<body>
<div>
	<div></div>
	<p>123</p>
</div>
	
</body>
</html>

3D效果:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	body {
		perspective: 500px;
	}
	img {
		transition: all 5s;
	}
	img:hover {
		transform: rotateY(360deg);
	}
	</style>
</head>
<body>
	<img src="images/1.png" alt="">
</body>
</html>

过渡:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
		transition: all .3s;
	}
	div:hover {
		background: green ;
		transform: translate(100px, 100px) scale(0.3) rotate(45deg);
	}
	</style>
</head>
<body>
	<div>
		
	</div>
</body>
</html>

溢出隐藏:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>
	div {
		width: 150px;
		height: 100px;
		border: 1px solid #000;
		overflow: hidden;
	}
	</style>
</head>
<body>
	<div>
		dsaegadfasdfasdfasdfasdafasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfsdfasdfasdfasdfasdfasdfsdfasdfasdfasdfasdfasdfdfs
	</div>
</body>
</html>

布局:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>

	section {
		width: 80%;
		height: 150px;
		margin: 100px auto;
	}
	section div {
		width: 33.33%;
		height: 100%;
		float: left;
		margin: 0 10px;
	}
	section div:nth-child(1) {
		background-color: pink;
	}
	section div:nth-child(2) {
		background-color: red;
	}
	section div:nth-child(3) {
		background-color: blue;
	}

	</style>
</head>
<body>
	<section>
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</section>
</body>
</html>

效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>

	section {
		width: 80%;
		height: 150px;
		margin: 100px auto;
		display: flex;    
	}
	section div {	
		height: 100%;
		flex: 1; 
	}
	section div:nth-child(1) {
		background-color: pink;
		flex:  2;
	}
	section div:nth-child(2) {
		background-color: red;
		margin: 0 10px;
	}
	section div:nth-child(3) {
		background-color: blue;
		flex: 3;
	}

	</style>
</head>
<body>
	<section>
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>

	section {
		width: 80%;
		height: 150px;
		margin: 100px auto;
		display: flex;  
		min-width: 500px; 
	}
	section div {	
		height: 100%;
	}
	section div:nth-child(1) {
		background-color: pink;
		width: 200px;
	}
	section div:nth-child(2) {
		background-color: red;
		margin: 0 10px;
		flex: 2;
	}
	section div:nth-child(3) {
		background-color: blue;
		flex: 1;
	
	}

	</style>
</head>
<body>
	<section>
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>

	section {
		width: 80%;
		height: 150px;
		margin: 100px auto;
		display: flex;  
		min-width: 500px;   
		flex-direction: column;  /*垂直分布*/
	}
	section div {	
		flex: 1;  
	}
	section div:nth-child(1) {
		background-color: pink;
	}
	section div:nth-child(2) {
		background-color: red;
	}
	section div:nth-child(3) {
		background-color: blue;
	}

	</style>
</head>
<body>
	<section>
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</section>
</body>
</html>

动画:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dashu</title>
	<style>

	div {
		width: 100px;
		height: 100px;
		background-color: pink;
		position: absolute;
		left: 0;
		/*animation:动画名称 花费时间 运动曲线  何时开始  播放次数  是否反方向;*/
		animation: move 2s ease 0s infinite alternate;
		-webkit-animation: move 2s ease 0s infinite alternate;
	}

	/*声明动画  关键帧  @keyframes 动画名称 {  }  */
	@keyframes move  {
      	from {
			left: 0;
			background-color: pink;
      	}

      	to {
			left: 1000px;
			background-color: yellow;
      	}
	}
	@-webkit-keyframes move  {
      	from {
			left: 0;
			background-color: pink;
      	}

      	to {
			left: 1000px;
			background-color: yellow;
      	}
	}
	@-ms-keyframes move  {
      	from {
			left: 0;
			background-color: pink;
      	}

      	to {
			left: 1000px;
			background-color: yellow;
      	}
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

效果

效果

效果

效果

结言

好了,欢迎在留言区留言,与大家分享你的经验和心得。

感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

作者简介

达叔,理工男,简书作者&全栈工程师,感性理性兼备的写作者,个人独立开发者,我相信你也可以!阅读他的文章,会上瘾!,帮你成为更好的自己。长按下方二维码可关注,欢迎分享,置顶尤佳。

努力努力再努力Jeskson

posted @ 2019-03-16 09:48  达达前端  阅读(347)  评论(0编辑  收藏  举报