標籤：
一、過渡、變形和動畫
1. 過渡 transition
應用舉例：
a元素normal狀態樣式為一種，:hover時為另一種，希望由normal轉為active時緩慢的變化，這是可以在normal樣式中添加transition，如transition: all 1s ease 0s.
屬性介紹：
簡寫是transition: all 1s ease 0s， 從前到後屬性意義依次是：
transition-property:要過渡的css屬性名稱
transition-duration:完成過渡需要的時間
transition-timing-function:過渡的速度如何變化，比如有ease linear ease-in ease-out ease-in-out cubic-bezier。如果沒定義瀏覽器預設用ease。
transition-delay: 可選。定義過渡開始前的延遲時間
也可以設定不同的css屬性有不同的過渡時間，像這樣：
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
2. 2d變形 transform
transfrom可以指定元素會做什麼樣的變形，可用的2d變形有：
transfrom: translate(40px, 10px)
translate是上下左右移動，translate第一個值說的是左右移動值，第二個值是上下移動。上面的例子就是說向右移動40px，向下移動10px。
transform : scale(1.7)
scale可以控制元素放大縮小。scale(1.7)是將元素放大1.7倍大小，scale(0.5)是將元素縮小到0.5倍大小。
transform: rotate(45deg)
rotate是將元素旋轉多少度。rotate(45deg)是元素順時針旋轉45度。
transform: skew(10deg, 20deg)
skew是將元素進行斜切。skew(10deg, 20deg)是x軸方向10度斜切，y軸方向20度斜切
transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989)
matrix可以在像素級上完成上面幾個屬性值完成的效果，具體咋弄不研究了，我不是做設計的。。
transform-origin: 20% 20%
transform-origin可以設定transform時中心點在哪裡，不設定預設是以元素的中心為中心點。
3. 3d變形
關於3d變形舉一個例子，翻拍效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.blue{
background: blue;
}
.pink{
background: pink;
}
.face{
width: 200px;
height: 400px;
}
.container{
-webkit-perspective: 500; /*透視，值越小效果越明顯*/
}
.card{
transform-style: preserve-3d; /*3d變化在子項目上保留*/
transition: 10s;
width: 200px;
height: 400px;
}
.container:hover .card{
transform: rotateY(180deg); /*從下往上看順時針旋轉180度*/
}
.face{
position: absolute;
backface-visibility: hidden; /*反轉到後面看不見*/
}
.back{
transform: rotateY(180deg); /*這沒有transition的過程哦*/
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="face front blue">front</div>
<div class="face back pink">back</div>
</div>
</div>
</body>
</html>
4. 動畫
上一個“顫抖吧”的例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
@keyframes shake{
0% {
transform: rotate(30deg);
}
50% {
transform: rotate(-50deg);
}
100%{
transform: rotate(20deg);
}
}
@-webkit-keyframes shake{ /*定義動畫，名字是shake，不同階段的css*/
0% {
transform: rotate(30deg);
}
50% {
transform: rotate(-50deg);
}
100%{
transform: rotate(20deg);
}
}
.float{
position: absolute;
top: 200px;
left: 200px;
animation: shake 0.5s infinite ease-in; /*應用動畫，shake是動畫名，0.5是執行一次動畫的事件，infinite是動畫執行次數當然也可以設定成5表示執行5次*/
-webkit-animation: shake 0.5s infinite ease-in;
width: 30px;
height: 30px;
background: red;
}
</style>
</head>
<body>
<div class="float"></div>
</body>
</html>
【css3】筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
