css动画改变高度有过渡效果,css3-形变、过渡、动画
一、2D形變
平移
transform:translate(x，y)
相對當前位置，向左移動x像素，像下移動y像素
transform:translateX(num)
相對當前位置，向左移動num像素
transform:translateY(num)
相對當前位置，向下移動num像素
縮放
transform:scale(x，y)
scale()方法，該元素增加或減少的大小，取決于寬度(X軸)和高度(Y軸)的參數
transform:scaleX( num )
改變元素的寬度
transform:scaleY( num )
改變元素的高度
旋轉
transform:rotate( 角度 );
參數是一個角度，表示旋轉多少度
傾斜
transform:skew(角度x，角度y)
沿著x軸旋轉多少度，沿著y軸轉多少度
transform:skewX(角度x)
沿著x軸旋轉多少度
transform:skewY(角度y)
沿著y軸旋轉多少度
二、3D形變
平移
transform:translate3d( x , y , z );
定義三個方向上的平移
transform:translateZ( z );
定義Z方向的平移(單用看不出效果)
縮放
transform: scale3d( x , y , z);
定義3個方向上的縮放，同時可以分別實現3個方向的分別設置
旋轉
rotate3d( x , y , z , angle )
x，表示旋轉軸X坐標方向的矢量。
y，表示旋轉軸Y坐標方向的矢量。
z，表示旋轉軸Z坐標方向的矢量。
angle，表示旋轉角度。正的角度值表示順時針旋轉，負值表示逆時針旋轉。
三、過渡
transition屬性
通過transition，我們可以在不使用flash的情況下，讓元素從一種樣式變化成另一種樣式
body{
position: relative;
}
#box{
height: 100px;
width: 100px;
background-color: skyblue;
transition: margin-left 3s;
}
// var box = document.querySelector("box");
box.onclick = function(){
this.style.marginLeft = "600px";
}
運行效果
GIF.gif
transition實現多個過渡
body{
position: relative;
}
#box{
/*如果動畫的元素是margin，不能設置auto*/
height: 100px;
width: 100px;
background-color: pink;
position: absolute;
top: 20px;
transition: margin-left 3s,background-color 3s,border-radius 3s,top 3s;
}
//var box = document.querySelector("box");
box.onclick = function(){
this.style.marginLeft = "600px";
this.style.backgroundColor = "red";
this.style.borderRadius = "50px";
this.style.top = "100px";
}
運行效果
GIF.gif
利用偽元素實現transition過度
body{
position: relative;
}
#box{
/*如果動畫的元素是margin，不能設置auto*/
height: 100px;
width: 100px;
background-color: pink;
position: absolute;
top: 20px;
transition: margin-left 3s,background-color 3s,border-radius 3s,top 3s;
}
#box:hover{
background-color: purple;
border-radius: 50px;
top: 50px;
}
運行結果
GIF.gif
利用transition實現3D動畫過度
body{
position: relative;
}
#box{
/*如果動畫的元素是margin，不能設置auto*/
height: 300px;
width: 300px;
margin: 15px 0 0 15px;
position: relative;
background: url(img/bg.jpg) round;
/*將來寫有關動畫相關的代碼，要寫兼容*/
/*transform-style: preserve-3d;*/
/*設置鏡頭距離*/
perspective: 20000px;
}
div img{
width: 130px;
height: 200px;
position: absolute;
top: 50px;
left: 85px;
transform-style: preserve-3d;
transform: rotateZ(180deg) rotateX(0) rotateY(0deg);
transition: all 3s;
}
div img:hover{
transform: rotateZ(0) rotateX(360deg) rotateY(180deg);
}
運行結果
GIF.gif
css3動畫
如果用@keyframes 創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：
規定動畫的名稱
規定動畫的時長
from-to
#box{
height: 30px;
width: 30px;
background-color: blue;
animation: rect 3s linear 0.5s alternate 3 ;
}
@keyframes rect{
from{
transform: translate(0,0);
background-color: blue;
}
to{
transform: translate(200px,200px);
background-color: red;
}
}
運行效果
GIF.gif
百分比
#box{
height: 50px;
width: 50px;
background-color: blue;
animation: rect 3s linear infinite alternate;
}
@keyframes rect{
0%{
transform: translate(0,0);
background-color: blue;
}
25%{
transform: translate(300px,0px);
background-color: red;
border-radius: 50%;
}
50%{
transform: translate(300px,300px);
background-color: pink;
border-radius: 0;
}
75%{
transform: translate(0px,300px);
background-color: orange;
border-radius: 50%;
}
100%{
transform: translate(0px,0px);
background-color: yellow;
}
}
運行效果
GIF.gif
小案例(動畫實現一個簡易大風車)
.circle{
height: 200px;
width: 200px;
margin: 50px auto;
background-color: pink;
border-radius: 50%;
position: relative;
animation: rect 2s linear infinite;
}
.f1{
height: 80px;
width: 50px;
background-color: blue;
position: absolute;
left: 100px;
top: 20px;
border-top-right-radius: 100%;
}
.f2{
width: 80px;
height: 50px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
border-bottom-right-radius: 100%;
}
.f3{
height: 80px;
width: 50px;
background-color: orange;
position: absolute;
left: 50px;
top: 100px;
border-bottom-left-radius: 100%;
}
.f4{
height: 50px;
width: 80px;
background-color: green;
position: absolute;
left: 20px;
top: 50px;
border-top-left-radius: 100%;
}
@keyframes rect{
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
運行結果
GIF.gif
喜歡就點贊
總結
以上是生活随笔為你收集整理的css动画改变高度有过渡效果,css3-形变、过渡、动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML+CSS+JS实现React简单
- 下一篇： HTML+CSS+JS实现 ❤️3D奥运