HTML+CSS+JS实现 ❤️6种transform图片悬停动态效果❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️6种transform图片悬停动态效果❤️
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?🍅 作者主頁：Java李楊勇?
🍅 簡介：Java領域優質創作者🏆、Java李楊勇公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】
🍅 歡迎點贊 👍 收藏 ?留言 📝 ??
效果演示：?文末獲取源碼?
代碼目錄：?
主要代碼實現：
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>移動效果標題</h2><p>移動效果一</p><p>移動效果二</p><p>移動效果三</p></figcaption></figure><figure class="two"><img src="img/img02.jpg" /><figcaption><h2>旋轉效果標題</h2><p>旋轉效果</p><div></div></figcaption></figure><figure class="three"><img src="img/img03.jpg" /><figcaption><h2>斜切效果標題</h2><p>斜切效果</p></figcaption></figure><figure class="four"><img src="img/img04.jpg" /><figcaption><h2>縮放效果標題</h2><p>縮放效果</p><div></div></figcaption></figure><figure class="five"><img src="img/img05.jpg" /><figcaption><h2>縮放效果標題</h2><p>縮放效果</p><div><input type="button" value="button1" /></div></figcaption></figure><figure class="six"><img src="img/img07.jpg" /><figcaption><h2>縮放效果標題</h2><p>縮放效果</p><div class="border1"></div><div class="border2"></div></figcaption></figure> </body></html>源碼獲取
大家可以點贊、收藏、關注、評論我啦 、查看博主主頁或下方微信公眾號獲取更多~！
打卡 文章 更新?45??/? 100天
精彩推薦更新中：
HTML5大作業實戰案例《100套》
Java畢設項目精品實戰案例《100套》
總結
以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️6种transform图片悬停动态效果❤️的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringBoot配置图片虚拟映射
- 下一篇： HTML+CSS+JS实现echarts