一、關於CSS Animation
CSS動畫，即是把CSS應用到HTML元素上，實現從一個狀態到另一個狀態，使元素產生動態效果。CSS動畫可以通過CSS中「animation」屬性來實現，它可以控制動畫的持續時間、速度曲線、變化數量、方向等。CSS動畫優點在於它完全包含在瀏覽器窗口內，不依賴其他技術，具有兼容性優勢。
下面我們通過一些具體的實例來展示CSS Animation的使用技巧與實戰：
二、使用CSS Animation實現圖標動畫
在網頁的設計中，常常用到圖標來代表某些功能或服務。使用CSS Animation可以為這些圖標增加交互性和視覺效果。
.icon {
width:100px;
height:100px;
background-color:#fff;
border-radius:50%;
position:relative;
margin:50px;
}
.icon:before,
.icon:after {
content:"";
display:block;
position:absolute;
top:12%;
left:12%;
transform:rotate(45deg);
width:75%;
height:75%;
border-top:1px solid #000;
}
.icon:after {
transform:rotate(-45deg);
}
.icon:hover:before {
animation:rotate_icon 1s linear both;
}
@keyframes rotate_icon {
0% {
transform:rotate(45deg);
}
25% {
transform:rotate(90deg);
}
50% {
transform:rotate(135deg);
box-shadow:-3px 3px 0 rgba(0,0,0,0.3);
}
75% {
transform:rotate(180deg);
box-shadow:-6px 6px 0 rgba(0,0,0,0.3);
}
100% {
transform:rotate(225deg);
}
}
代碼解析：該代碼的HTML元素類是「.icon」，並且在:hover樣式設置了「rotate_icon」動畫。當鼠標指針懸停在「.icon」元素上時，圖片會按照旋轉的路徑逐幀播放，在最後的一個時刻回到最初的位置，從而製造出獨特的動畫效果。通過這種方式，設計人員可以用純CSS來定義自己的交互設計元素。
三、使用CSS Animation實現按鈕的水波紋效果
按鈕的水波紋效果可為網頁的UI設計增添動態和活力。CSS Animation技術可以幫助設計人員簡單的實現這種效果，並且使其在任何瀏覽器上都能正常工作。
.button {
width:150px;
height:50px;
background-color:#59B3DA;
border:none;
border-radius:5px;
color:#fff;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1px;
position:relative;
overflow:hidden;
margin:50px;
}
.button::after {
content:"";
display:block;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
pointer-events:none;
background:rgba(255,255,255,0.5);
animation:animate-wave 1s;
}
@keyframes animate-wave {
0% {
transform:scale(0);
opacity:1;
}
100% {
transform:scale(2);
opacity:0;
}
}
代碼解析：該代碼的HTML元素類是「.button」，並且在:after設置了「animate-wave」動畫。在按鈕被點擊時，頁面上會出現一個放大並逐漸消失的水波紋效果，用CSS Animation的優點在於它不會像許多相似的庫那樣增加頁面代碼及腳本執行的時間。滑動手勢也能夠啟動這個效果，只需要使用JavaScript在觸摸事件上綁定內容即可。
四、使用CSS Animation實現眨眼效果
在一些網頁或手機APP的互動設計中，常常會用到眨眼動畫來增強人物圖像的表現力，讓個性化的動畫形象更能引起用戶的注意。CSS Animation技術可以簡單的實現這種效果。
.eye {
width:80px;
height:80px;
border-radius:50%;
background-color:#ddd;
position:relative;
margin:50px;
overflow:hidden;
}
.eye::before {
content:"";
display:block;
width:40%;
height:100%;
background-color:#000;
border-radius:50%;
position:absolute;
top:0;
left:45%;
animation:lids 4s infinite ease-in-out;
}
.eye::after {
content:"";
display:block;
width:15%;
height:15%;
background-color:#fff;
border-radius:50%;
position:absolute;
top:30%;
left:45%;
animation:pupil 4s infinite ease-in-out;
}
@keyframes lids {
0%, 100% {
top:0;
transform:rotate(0deg)
}
25%, 75% {
top:50%;
transform:rotate(180deg)
}
}
@keyframes pupil {
0%, 100% {
top:30%;
left:45%;
}
25% {
top:15%;
left:18%;
}
75% {
top:15%;
left:72%;
}
}
代碼解析：該代碼的HTML元素類是「.eye」，並且在:before及:after設置了「lids」及「pupil」動畫。當動畫被設置後，眼睛的藍色和白色部分就會開始隨機眨眼，或者視線向左或向右移動，不斷地變化。這種UI交互效果使得頁面頁面不僅有豐富的元素，同時也更有活力和動態效果。
五、使用CSS Animation實現3D旋轉效果
CSS3有一個非常強大的特性——3D旋轉。它可以通過CSS的「transform」屬性結合「perspective」屬性實現一個在三維空間內的動畫效果，讓旋轉的圖像更具真實、立體感。通過 CSS Animation，我們可以非常便捷地來實現這種動畫效果。
.rotating-box {
width:200px;
height:200px;
position:relative;
margin:50px;
transform-style:preserve-3d;
animation:rotate 4s infinite linear;
}
.front, .back {
width:200px;
height:200px;
position:absolute;
left:0;
top:0;
border:1px solid #000;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
font-size:25px;
color:#FFF;
}
.front {
background-color:rgb(125, 194, 211);
transform:rotateY(0deg);
}
.back {
background-color:rgb(199, 153, 153);
transform:rotateY(180deg);
}
@keyframes rotate {
from {
transform:rotateY(0deg);
}
to {
transform:rotateY(360deg);
}
}
代碼解析：該代碼的HTML元素類是「.rotating-box」，並且在該元素上設置了「rotate」動畫、以及子元素.front及.back。該代碼展示了一個會 360 度旋轉的盒子。盒子裏面有兩面不同的面板，分別被命名為「.front」和「.back」，他們轉動的軸心被設置在CSS3的原點上。當盒子內部的元素被旋轉時，盒子本身的輪廓線仍然是豎直的，這使它看起來是立體的。通過修改程序的數值，我們可以改變盒子的大小和視角。
六、使用CSS Animation實現任意曲線路線動畫
CSS Animation能夠在任意曲線路線上產生動畫，這可以實現非常專業的繪圖和圖標設計。下面這個例子展示一個基於CSS Animation的路徑動畫：
.path {
width:200px;
height:200px;
margin:50px auto;
position:relative;
}
.dot {
width:20px;
height:20px;
border-radius:50%;
background-color:rgb(150, 121, 121);
position:absolute;
top:40px;
left:0;
animation-path:path 3s infinite;
}
@keyframes path {
50% {
transform:translateX(250px) translateY(150px) rotate(180deg);
}
100% {
transform:translateX(500px) translateY(0px) rotate(360deg);
}
}
代碼解析：該代碼的HTML元素類是「.path」及「.dot」，並且在「.dot」元素上設置了「path」動畫。它會沿着設置的曲線來移動。假如設置一個漸變效果或其他過渡效果，這種動畫效果就能夠達到更高的視覺效果。
七、結語
在本文中，我們介紹了幾個使用CSS Animation製作炫酷動畫效果的技巧與實戰。CSS動畫可以被用來優化網站的效果和性能，同時還使你能夠打造出令人難忘的交互設計。當然，你可以根據自己的需要和創造性進行設計和創作，會有無限可能性等待着你去探索！
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/250999.html
微信掃一掃 
支付寶掃一掃 