電商項目（中） 如果 值不是 ，可以使用 屬性， 鐘錶： 心動： 海浪： 背景： 漸變色： 動畫背景： 透明度： 3D效果： 過渡： 溢出隱藏： 佈局： 動畫： 結言 好了，歡迎在留言區留言，與大家分享你的經驗和心得。 感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋 ...
電商項目（中）
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>
結言
好了，歡迎在留言區留言，與大家分享你的經驗和心得。
感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。
作者簡介
達叔，理工男，簡書作者&全棧工程師，感性理性兼備的寫作者，個人獨立開發者，我相信你也可以！閱讀他的文章，會上癮！，幫你成為更好的自己。長按下方二維碼可關註，歡迎分享，置頂尤佳。
