css3-背景、漸變、過渡、2D變換
一、背景(background)
1.background-size
背景大小：水平 垂直
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .wrap { width: 300px; height: 200px; border: 1px solid black; background: url(img/baby0.jpg) no-repeat; margin: 100px auto; } </style> </head> <body> <div class="wrap"></div> </body> </html>
2.background-origin
原點/起始點:
background-origin:border-box(以邊框為起始點)；
background-origin:content-box(以內容為起始點)；
background-origin:padding-box(以內邊距為起始點).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .wrap { width: 500px; height: 500px; border: 20px solid rgba(0,0,255,0.2); background: url(img/baby0.jpg) no-repeat; background-origin: border-box; margin: 100px auto; padding: 30px; } </style> </head> <body> <div class="wrap"></div> </body> </html>
3.background-clip
背景裁剪：
background-clip：border-box(以邊框裁剪)；
background-clip：content-box(以內容裁剪)；
background-clip：padding-box(以內邊距裁剪)；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .wrap { width: 500px; height: 500px; border: 35px solid rgba(0,0,255,0.3); margin: 100px auto; background: url(img/baby0.jpg) no-repeat; background-clip: content-box; padding: 35px; } </style> </head> <body> <div class="wrap"></div> </body> </html>
4.多背景
background:url() left top no-repeat,right top no-repeat, left bottom no-repeat,right bottom no-repeat;
background:url() no-repeat center center;居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrap {
width: 623px;
height: 417px;
border: 1px solid black;
background: url(img/bg1.png) no-repeat left top,
url(img/bg2.png) no-repeat right top,
url(img/bg3.png) no-repeat right bottom,
url(img/bg4.png) no-repeat left bottom,
url(img/bg5.png) no-repeat center center;
margin: 100px auto;
line-height: 400px;
text-align: center;
font-family: "微軟雅黑";
color: blueviolet;
font-size: 40px;
font-weight: 900;
}
</style>
</head>
<body>
<div class="wrap">好好學習!</div>
</body>
</html>
二、漸變
1.線性漸變
background:linear-gradient(to left,yellow,green);
to left:漸變方向 值2:顏色
background:linear-gradient(45deg,yellow,green);
值1:漸變角度 值2：顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 1000px;
height: 100px;
border: 1px solid black;
margin: 0 auto;
margin-top: 20px;
}
.div1 {
background: linear-gradient(to left,yellow,green);
}
.div2 {
height: 300px;
background: linear-gradient(to left,green,yellow);
}
.div3 {
background: linear-gradient(90deg,yellow,pink,blue,red);
}
.div4 {
background: linear-gradient(135deg,
black 0%,
black 25%,
yellow 25%,
yellow 50%,
green 50%,
green 75%,
red 75%,
red 100%);
}
.div5 {
background: linear-gradient(135deg,
#000 0%,
#000 25%,
#fff 25%,
#fff 50%,
#000 50%,
#000 75%,
#fff 75%,
#fff 100%
);
background-size: 100px 100px;
animation: move 1s linear infinite;
}
@keyframes move{
from{
background-position: 0px 0px;
}
to{
background-position: 100px 0px;
}
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>
2.徑向漸變
background:radial-gradient(at center,yellow,green);
at:關鍵詞 center:中心點/起始點 值2:顏色
background:radial-gradient(at 50px 50px,yellow,green);
50px 50px:距離水平50畫素，垂直50畫素的距離。
background:radial-gradient(100px 50px at center,yellow,green);中心顯示橢圓
100px 50px:由中心點向外輻射的範圍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 1px solid black;
float: left;
margin-top: 60px;
margin-right: 40px;
}
.div1 {
background: radial-gradient(at center,yellow,green);
}
.div2 {
background: radial-gradient(at left top,yellow,green);
}
.div3 {
background: radial-gradient(at 50px 50px,yellow 0%,pink 30%,green 60%,red 100%);
}
.div4 {
background: radial-gradient(100px 50px at center,yellow,green);
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
</html>
三、過渡
transiation:param1,param2;
param1:過度的屬性
param2:過度的時間
簡便方式:transiation:all 3s;
all表示該元素所有屬性。
可分開寫：transiation-property:left;過渡的屬性
transiation-duration:2s;過渡的時間
設定過渡的速度:
transiation-timing-function:linear(勻速/線性過渡)/ease(平滑過渡)/ease-in(加速/由慢到快)/
ease-out(由慢到快)/ease-in-out(由慢到快再到慢)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.wrap {
width: 200px;
height: 200px;
border: 1px solid black;
background: green;
position: relative;
left: 0;
top: 0;
transition: left 1s,top 1s;
}
.wrap:hover {
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
四、2D變換
都可從X、Y方向縮放、扭曲、旋轉、位移
屬性：transform:scale(x,y); 縮放倍數 (x,y)可為小數，不可為負數
transform:skew(45deg); 扭曲 單位為角度
transform:rotate(45deg); 旋轉 單位為角度
設定旋轉的中心點：transform-origin:center bottom;
transform:tranlate(x,y); 位移 x表示水平位移 y表示垂直位移
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap {
width: 300px;
height: 300px;
background: red;
margin: 150px auto;
transition: all 0.5s;
}
.wrap:hover {
background: purple;
border-radius: 50%;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>