CSS(層疊樣式表)是一種用于定義網(wǎng)頁(yè)外觀樣式的語(yǔ)言。除了常見的排版、字體和顏色等基本樣式,CSS還能制作許多令人驚嘆的動(dòng)漫效果。
/* 創(chuàng)建一個(gè)旋轉(zhuǎn)效果 */ .rotate { animation-name: spin; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
上面的代碼創(chuàng)建了一個(gè)旋轉(zhuǎn)效果。通過(guò)將一個(gè)元素的transform屬性從0度變換到360度,并且設(shè)置無(wú)限循環(huán),可以實(shí)現(xiàn)無(wú)限旋轉(zhuǎn)的動(dòng)畫效果。
/* 創(chuàng)建一個(gè)彈出效果 */ .pop { animation-name: scale; animation-duration: 0.5s; animation-timing-function: ease-out; transform-origin: center; } @keyframes scale { 0% { transform: scale(0); } 100% { transform: scale(1); } }
上面的代碼創(chuàng)建了一個(gè)彈出效果。通過(guò)將一個(gè)元素的transform屬性從0變換到1,并且設(shè)置漸變,可以實(shí)現(xiàn)元素呈現(xiàn)彈出效果的動(dòng)畫效果。
/* 創(chuàng)建一個(gè)閃爍效果 */ .blink { animation-name: blink; animation-duration: 1s; animation-iteration-count: infinite; } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
上面的代碼創(chuàng)建了一個(gè)閃爍效果。通過(guò)將元素的opacity屬性從0變換到1,并且設(shè)置漸變和無(wú)限循環(huán),可以實(shí)現(xiàn)元素閃爍的動(dòng)畫效果。
上述CSS動(dòng)漫效果僅僅是冰山一角,CSS還支持許多其他動(dòng)畫效果,如平移、放大、縮小、淡入淡出等等。通過(guò)巧妙地應(yīng)用這些動(dòng)畫效果,設(shè)計(jì)師可以創(chuàng)建出令人驚嘆的、具有吸引力的動(dòng)漫效果,從而吸引用戶的眼球。