CSS3鼠标hover图片遮罩层文字动画特效.zip资源-CSDN文库

共17个文件

jpg：8个

css：3个

html：1个

版权申诉

css3

58 浏览量 2022-11-02 23:37:43 上传评论收藏 179KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3鼠标hover图片遮罩层文字动画特效.zip （17个子文件）

132689849202941346

CSS3_hoverwz

css

htmleaf-demo.css 6KB

style.css 2KB

normalize.css 2KB

2.jpg 34KB

1.jpg 28KB

img

transport.jpg 19KB

sports.jpg 12KB

technics.jpg 12KB

animals.jpg 27KB

fashion.jpg 18KB

people.jpg 24KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 3KB

scss

style.scss 1KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3鼠标hover图片遮罩层动画效果</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1>CSS3鼠标hover图片遮罩层动画效果 <span>Transparent Image Hover Overlay With Pure CSS3</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> <div class="media"> <img class="media__image" src="img/animals.jpg" alt="" /> <div class="media__body"> <h2>Cool Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p> </div> </div> <div class="media"> <img class="media__image" src="img/technics.jpg" alt="" /> <div class="media__body"> <h2>Cool Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p> </div> </div> <div class="media"> <img class="media__image" src="img/transport.jpg" alt="" /> <div class="media__body"> <h2>Cool Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p> </div> </div> <div class="media"> <img class="media__image" src="img/fashion.jpg" alt="" /> <div class="media__body"> <h2>Cool Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p> </div> </div> <div class="media"> <img class="media__image" src="img/people.jpg" alt="" /> <div class="media__body"> <h2>Cool Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p> </div> </div> <div class="media"> <img class="media__image" src="img/sports.jpg" alt="" /> <div class="media__body"> <h2>Cool Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam voluptatem necessitatibus cum, tenetur repellat, eaque eos debitis! Quaerat.</p> </div> </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉