2张图片鼠标经过切片显示代码.zip资源-CSDN文库

共3个文件

jpg：2个

html：1个

jQuery特效

CSS特效

网页特效

113 浏览量 2023-11-02 22:56:20 上传评论收藏 79KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

2张图片鼠标经过切片显示代码.zip （3个子文件）

jiaoben6612

img

2.jpg 52KB

1.jpg 50KB

index.html 2KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } body { background-color: rgba(0, 0, 0, 0.5); } #change { position: relative; width: 500px; height: 280px; margin: 100px auto; overflow: hidden; transition: 0.5s; } .span { display: block; width: 500px; height: 280px; position: absolute; transform: scale(1.5); transition: 0.6s; left: 0; top: 0; z-index: -999; background-image: url(img/2.jpg); background-repeat: no-repeat; } #change:hover .span { transform: scale(1); } #change ul { list-style: none; font-size: 0; } #change ul li { width: 250px; height: 140px; background-image: url(img/1.jpg); background-repeat: no-repeat; transition: 0.5s; } #change ul li:nth-child(1) { background-position-x: 0; background-position-y: 0; } #change ul li:nth-child(2) { background-position-x: -250px; background-position-y: 0; position: absolute; left: 250px; top: 0; } #change ul li:nth-child(3) { background-position-x: 0; background-position-y: -140px; } #change ul li:nth-child(4) { background-position-x: -250px; background-position-y: -140px; position: absolute; left: 250px; top: 140px; } #change:hover ul li:nth-child(1) { background-position-y: 140px; } #change:hover ul li:nth-child(2) { background-position-x: -500px; } #change:hover ul li:nth-child(3) { background-position-x: 250px; } #change:hover ul li:nth-child(4) { background-position-y: -280px; } </style> </head> <body> <div id="change"> <ul> <li></li> <li></li> <li></li> <li></li> <span class="span"></span> </ul> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈