transition transform 效果進階1 body如何漸變色填充
一 transition的拆分寫
明確其擁有的四個屬性值
transition-property 發生漸變效果的屬性
transition-duration 完成過渡效果的時間
transition- timing-function 完成過渡效果的動畫效果 linear ease ease-in ease-out
step-start= step(1 ,start)
step-end=step(1,end)
steps( n1,n2),n1代表完成的步數，n2代表start或者end ,指定每一步的值發生變化的時間點。第二個參數是可選的，默認值爲end。
transition-deplay 開始進行過渡效果的延遲
- transition 屬性連寫
transition :all 2s ease-in 1s
all 代表所有的屬性都會有過渡效果，只要設置了，2s代表一個過渡效果的時間，ease-in代表過渡的方式，1s代表延遲
二 transform屬性(2d)(x 正方向水平向右，y正方向垂直向下，z正方向在垂直於窗口向外)
- translate(x,y ) 指定對象移動，基準是父盒子左上角，移動 x y z是代表距離左上角的距離translatex(length|percentage),translatey(number)指定x y的移動距離。如果第二個參數省略，那麼默認爲0 ；其中百分比的基準是以元素自身的寬高爲基準，然後乘以百分比，得到移動的距離值。
transform：translate(50px,40px)代表向右和向下移動50px 40px； - scale(x,y) ,代表指定對象縮放比例，x，y分別對應x y軸的縮放。scalex(number) scaley(number),如果第二個參數省略默認和第一個參數相等。
- rotate(angle) 輸入角度值，代表元素2d的旋轉角度 需要有個transition-origin屬性。關於旋轉的方向：遵循“左手定則”大拇指指向軸的正方向，四指的方向就是旋轉的方向，也是角度值爲正的方向;rotate(angle),默認以z軸爲基準進行旋轉，rotatex(angel)，rotatey(angle),rotatez(angle) 以x和y軸爲基準進行旋轉(3D)。注意在3d裏面纔有rotatex(angel)，rotatey(angle),rotatez(angle)，在2d裏面只有rotate(angle)
- skew(x,y) 指定x y的扭曲距離。如果第二個參數省略，那麼默認爲0 ;skewx(number) skewy(number).
三：有關body的漸變色填充問題：
body默認是沒有高度的，但是卻可以直接給body設置背景顏色，這是爲什麼呢?好多人會問，不是應該元素有了寬高纔能有背景色嗎？
這裏明確一點，body設置背景色是瀏覽器自動配置的，即使body的高度是默認的高度。
走個小demo理解下這個問題、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: blue;
/* background: linear-gradient(to bottom,rgba(0,0,255,0.1),rgba(0,0,255,0.5),rgb(0,0,255));*/
}
</style>
</head>
<body>
</body>
</html>
body {
background: linear-gradient(to
bottom,rgba(0,0,255,0.1),rgba(0,0,255,0.5),rgb(0,0,255));
}
給body一個高度：
height:100px ;
我們會發現的問題是：純色填充body沒有問題，那麼如何解決漸變填充body這種情況呢？
很簡單，
html,body {
height :100% ;
}
四 ，寫個demo玩一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
height: 100%;
margin: 0;
}
body{
background: linear-gradient(to bottom,rgba(0,0,255,0.1),rgba(0,0,255,0.5),rgb(0,0,255));
box-sizing:border-box;
}
.fish {
width: 174px;
height: 126px;
background:url(img/fish.png) no-repeat;
/*border: 1px solid #000;*/
transition: all 2s linear;
}
body:hover .fish{
transform:translate(1000px,500px) rotate(45deg) scale(.5,.5);
}
/*背景圖片默認左上角平鋪，然後改變背景圖片的位置即可*/
.animation {
animation: autoMove 1s steps(8) infinite;
}
/*動畫關鍵字 */
@keyframes autoMove {
from {}
to {
background-position: 0 -1008px;
}
}
</style>
</head>
<body>
<div class="fish animation"></div>
</body>
</html>
