电商项目（中）
position: static | relative | absolute | fixed | sticky ;
如果position值不是static，可以使用z-index属性，
<style>
#position {
position: absolute;
top: 50%;
left: 50%;
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 {
100%;
height: 100%;
}
.colock {
400px;
height: 400px;
border: 1px solid #000;
border-radius: 50%;
margin: 50px auto;
position: relative;
}
.colock>div {
position: absolute;
}
.line {
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 {
380px;
height: 380px;
background-color: #fff;
border-radius: 50%;
left: 50%;
top: 50%;
margin-top: -190px;
margin-left: -190px;
}
.h {
6px;
height: 130px;
background-color: #000;
margin-left: -3px;
left: 50%;
top: 60px;
transform-origin:bottom;
animation: rotate 43200s steps(60) infinite;
}
.m {
4px;
height: 150px;
background-color: green;
margin-left: -2px;
left: 50%;
top: 40px;
transform-origin:bottom;
animation: rotate 3600s steps(60) infinite;
}
.s {
2px;
height: 160px;
background-color: pink;
margin-left: -1px;
left: 50%;
top: 30px;
transform-origin:bottom;
animation: rotate 60s steps(60) infinite;
}
.dotted {
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 {
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 {
100%;
height: 100%;
background: url(img/bg.jpg) no-repeat;
background-size: cover;
position: relative;
}
.box {
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;
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 {
100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -50px;
margin-top: -50px;
animation: rotate 10s linear infinite;
}
.lin1:after {
content: "";
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 {
150px;
height: 150px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -75px;
margin-top: -75px;
animation: rotate 5s linear infinite;
}
.lin2:after {
content: "";
10px;
height: 10px;
background-color: blue;
display: block;
border-radius: 50%;
position: absolute;
left: 25px;
top: 10px;
}
.lin3 {
230px;
height: 230px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -115px;
margin-top: -115px;
animation: rotate 10s linear infinite;
}
.lin3 span {
20px;
height: 20px;
display: block;
background-color: green;
border-radius: 50%;
position: absolute;
left: 50px;
animation: rotate 5s linear infinite;
}
.lin3 span b {
10px;
height: 10px;
background-color: pink;
display: block;
border-radius: 50%;
position: absolute;
left: 25px;
}
.lin4 {
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;
10px;
height: 10px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 120px;
}
.line5 {
450px;
height: 450px;
border: 1px solid #ccc;
border-radius: 50%;
margin-left: -220px;
margin-top: -220px;
animation: rotate 10s linear infinite;
}
.line5 span {
30px;
height: 30px;
background-color: blue;
border-radius: 50%;
display: block;
position: absolute;
left: 120px;
}
.line5 span b {
display: block;
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 {
100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #0EA9B1;
}
.box {
100%;
height: 100%;
position: relative;
overflow: hidden;
}
.box img {
position: absolute;
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 {
100px;
height: 100px;
position: absolute;
left: 50px;
top: 50px;
}
.sun:after {
content: "";
display: block;
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;
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 {
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 {
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;
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 {
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 {
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 {
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 {
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 {
80%;
height: 150px;
margin: 100px auto;
}
section div {
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 {
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 {
80%;
height: 150px;
margin: 100px auto;
display: flex;
min- 500px;
}
section div {
height: 100%;
}
section div:nth-child(1) {
background-color: pink;
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 {
80%;
height: 150px;
margin: 100px auto;
display: flex;
min- 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 {
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>
结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
作者简介
达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。