近年來,隨著互聯(lián)網技術的不斷發(fā)展,前端技術也在不斷地升級和改善。CSS3作為前端技術的一部分,具有眾多優(yōu)秀特點,如動畫、漸變色和圓角等等。今天,我將和大家分享幾個CSS3小作品。
/* 作品一:圖片放大特效 */ img:hover { transition: all .2s ease-in-out; transform: scale(1.2); } /* 作品二:背景漸變特效 */ body { background: linear-gradient(to right, #ff8a00, #e52e71); } /* 作品三:文本陰影特效 */ h1 { text-shadow: 3px 3px 3px #999; } /* 作品四:3D旋轉特效 */ .box { transform-style: preserve-3d; } .box:hover { transform: rotateY(180deg); } /* 作品五:邊框動畫特效 */ .button { border: 2px solid #FEDFE1; position: relative; overflow: hidden; transition: all .3s ease; z-index: 1; } .button:hover { border-radius: 50%; box-shadow: 0 0 10px #FEDFE1; color: #FEDFE1; } .button::before { content: ''; position: absolute; z-index: -1; top: -50%; left: -50%; width: 200%; height: 250%; background-color: #FEDFE1; transition: all .3s ease; } .button:hover::before { transform: rotate(45deg); top: -10%; left: -10%; }
以上這些小作品只是CSS3的冰山一角,我們可以根據自己的需要提取特定的CSS3屬性,制作出屬于自己的小作品。CSS3的強大能力使得它成為Web開發(fā)人員必備的技能之一,也使得我們的網站更加美觀和有趣。
上一篇css height最小
下一篇css hack的理解