CSS3 懸浮特效可以幫助開發(fā)者實現(xiàn)一些炫酷的效果,讓網(wǎng)站更加生動有趣,吸引用戶眼球。
下面,我們來介紹幾個常用的 CSS3 懸浮特效:
/* 1. hover 放大 */ .box:hover { transform: scale(1.2); } /* 2. hover 漸變背景色 */ .box:hover { background: linear-gradient(red, yellow); } /* 3. hover 過渡旋轉(zhuǎn) */ .box:hover { transition: transform 1s; transform: rotate(360deg); } /* 4. hover 彩虹文字 */ .box:hover { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, violet, blue, green, yellow, orange, red); } /* 5. hover 陰影效果 */ .box:hover { box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); }
以上就是幾個常用的 CSS3 懸浮特效,可以根據(jù)需求選擇合適的效果進行實現(xiàn)。需要注意的是,在使用這些特效時,應(yīng)考慮到瀏覽器的兼容性問題。