HTML+CSS+JS实现 ❤️6种transform图片悬停动态效果❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️6种transform图片悬停动态效果❤️
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?🍅 作者主頁(yè)：Java李楊勇?
🍅 簡(jiǎn)介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、Java李楊勇公號(hào)作者? ?簡(jiǎn)歷模板、學(xué)習(xí)資料、面試題庫(kù)、技術(shù)互助【關(guān)注我，都給你】
🍅 歡迎點(diǎn)贊 👍 收藏 ?留言 📝 ??
效果演示：?文末獲取源碼?
代碼目錄：?
主要代碼實(shí)現(xiàn)：
CSS樣式：
body, figure, figcaption, img, h2, p {padding: 0;margin: 0; }body {width: 100%; }figure {position: relative;float: left;overflow: hidden;height: 350px;width: 33.33%; }figcaption {position: absolute;top: 0;left: 0;color: #fff;font-family: "???è?ˉé?…é?‘"; }figure img {opacity: 0.8; }figure figcaption, figure figcaption p, figure img {transition: all 0.35s; }figure figcaption, figure figcaption div {transition: all 0.35s; }figure figcaption p, figure figcaption h2 {transition: all 0.35s; }figure:hover img {transform: translate(-150px, 0);opacity: 0.5 }@media screen and ( max-width: 600px) {figure {width: 100%} }@media screen and (min-width: 601px) and ( max-width: 1000px) {figure {width: 50%} }@media screen and (min-width: 1001px) {figure {width: 33.33%} }.one {background: #f9aa0f; }.one figcaption {padding: 20px; }HTML代碼 :
<!DOCTYPE html> <html><head lang="en"><meta charset="UTF-8"><!--<meta name="viewport" content="width=device-width, initial-scale=1.0">--><title></title><link rel="stylesheet" href="css/css3.css" /> </head><body><figure class="one"><img src="img/img01.jpg" /><figcaption><h2>移動(dòng)效果標(biāo)題</h2><p>移動(dòng)效果一</p><p>移動(dòng)效果二</p><p>移動(dòng)效果三</p></figcaption></figure><figure class="two"><img src="img/img02.jpg" /><figcaption><h2>旋轉(zhuǎn)效果標(biāo)題</h2><p>旋轉(zhuǎn)效果</p><div></div></figcaption></figure><figure class="three"><img src="img/img03.jpg" /><figcaption><h2>斜切效果標(biāo)題</h2><p>斜切效果</p></figcaption></figure><figure class="four"><img src="img/img04.jpg" /><figcaption><h2>縮放效果標(biāo)題</h2><p>縮放效果</p><div></div></figcaption></figure><figure class="five"><img src="img/img05.jpg" /><figcaption><h2>縮放效果標(biāo)題</h2><p>縮放效果</p><div><input type="button" value="button1" /></div></figcaption></figure><figure class="six"><img src="img/img07.jpg" /><figcaption><h2>縮放效果標(biāo)題</h2><p>縮放效果</p><div class="border1"></div><div class="border2"></div></figcaption></figure> </body></html>源碼獲取
大家可以點(diǎn)贊、收藏、關(guān)注、評(píng)論我啦 、查看博主主頁(yè)或下方微信公眾號(hào)獲取更多~！
打卡 文章 更新?45??/? 100天
精彩推薦更新中：
HTML5大作業(yè)實(shí)戰(zhàn)案例《100套》
Java畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例《100套》
總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️6种transform图片悬停动态效果❤️的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： SpringBoot配置图片虚拟映射
- 下一篇： ❤️六W字《计算机基础知识》（七）（建议