CSS3实现的九宫格图片鼠标悬停去除遮罩层特效源码.zip资源-CSDN文库

共12个文件

jpg：9个

url：1个

html：1个

版权申诉

css3

105 浏览量 2022-11-02 23:35:36 上传评论收藏 210KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3实现的九宫格图片鼠标悬停去除遮罩层特效源码.zip （12个子文件）

132674313554457001

css

style.css 1KB

img

30-200x200.jpg 57KB

1-200x200.jpg 50KB

51-200x200.jpg 33KB

10-200x200.jpg 37KB

41-200x200.jpg 32KB

35-200x200.jpg 35KB

61-200x200.jpg 33KB

20-200x200.jpg 36KB

71-200x200.jpg 34KB

index.html 2KB

服务器软件.url 122B

<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3九宫格图片悬停遮罩层特效 - 站长素材</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> </head> <body> <div class="image-container"> <div class="image" style="--clip-start: ellipse(0 0 at 0 0); --clip-end: ellipse(150% 150% at 0 0);"> <a href="#"><img src="img/10-200x200.jpg" /><img src="img/10-200x200.jpg" /></a> </div> <div class="image" style="--clip-start: inset(100% 0 0 0); --clip-end: inset(0 0 0 0);"> <a href="#"><img src="img/20-200x200.jpg"><img src="img/20-200x200.jpg"></a> </div> <div class="image" style="--clip-start: ellipse(0 0 at 100% 0); --clip-end: ellipse(150% 150% at 100% 0);"> <a href="#"><img src="img/30-200x200.jpg"><img src="img/30-200x200.jpg"></a> </div> <div class="image" style="--clip-start: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); --clip-end: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);"> <a href="#"><img src="img/35-200x200.jpg"><img src="img/35-200x200.jpg"></a> </div> <div class="image" style="--clip-start: circle(0); --clip-end: circle(125%);"> <a href="#"><img src="img/1-200x200.jpg"><img src="img/1-200x200.jpg"></a> </div> <div class="image" style="--clip-start: inset(100% 100% 100% 100%); --clip-end: inset(0 0 0 0);"> <a href="#"><img src="img/41-200x200.jpg"><img src="img/41-200x200.jpg"></a> </div> <div class="image" style="--clip-start: ellipse(0 0 at 0 100%); --clip-end: ellipse(150% 150% at 0 100%);"> <a href="#"><img src="img/51-200x200.jpg"><img src="img/51-200x200.jpg"></a> </div> <div class="image" style="--clip-start: inset(0 0 100% 0); --clip-end: inset(0 0 0 0);"> <a href="#"><img src="img/61-200x200.jpg"><img src="img/61-200x200.jpg"></a> </div> <div class="image" style="--clip-start: ellipse(0 0 at 100% 100%); --clip-end: ellipse(150% 150% at 100% 100%);"> <a href="#"><img src="img/71-200x200.jpg"><img src="img/71-200x200.jpg"></a> </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉