基于js编程方式模拟实现多种鼠标hover特效.zip资源-CSDN文库

共45个文件

jpg：13个

js：12个

css：8个

版权申诉

前端代码

96 浏览量 2022-11-10 00:27:01 上传评论收藏 1.11MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于js编程方式模拟实现多种鼠标hover特效.zip （45个子文件）

132692144647880747

jsbc_hover

css

demo4.css 2KB

demo2.css 1KB

demo5.css 2KB

demo3.css 1KB

demo7.css 4KB

base.css 7KB

demo1.css 2KB

demo6.css 2KB

index5.html 5KB

index4.html 5KB

img

8.jpg 57KB

2.jpg 108KB

1.jpg 60KB

6.jpg 19KB

3.jpg 96KB

5.jpg 48KB

11.jpg 132KB

4.jpg 155KB

10.jpg 106KB

13.jpg 81KB

12.jpg 116KB

9.jpg 54KB

wave.svg 1KB

7.jpg 47KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 6KB

demo4.js 1KB

demo2.js 6KB

nearby.js 2KB

demo.js 740B

demo6.js 5KB

demo1.js 1KB

demo7.js 6KB

demo3.js 3KB

demo5.js 4KB

charming.min.js 527B

imagesloaded.pkgd.min.js 5KB

TweenMax.min.js 112KB

index2.html 5KB

index6.html 7KB

index7.html 6KB

index3.html 4KB

<!DOCTYPE html> <html lang="zh" class="no-js"> <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>通过js编程方式实现多种鼠标hover特效</title> <link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/demo6.css" /> <script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script> </head> <body class="demo-6 loading"> <svg class="hidden"> <symbol id="icon-arrow" viewBox="0 0 24 24"> <title>arrow</title> <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/> </symbol> <symbol id="icon-drop" viewBox="0 0 24 24"> <title>drop</title> <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/> </symbol> <svg id="icon-github" viewBox="0 0 33 33"> <title>github</title> <path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29"></path> </svg> </svg> <main> <div class="message">请在桌面端浏览器上查看这个示例！</div> <div class="content content--fixed"> <header class="codrops-header"> <div class="codrops-links"> <a class="codrops-icon codrops-icon--prev" href="http://www.jb51.net/" title="返回下载页"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a> <a class="codrops-icon codrops-icon--drop" href="http://www.jb51.net/" title="脚本之家"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a> </div> <h1 class="codrops-header__title">Proximity Feedback Ideas</h1> </header> <span class="info">Get closer to the images.</span> <nav class="demos"> <a class="github" href="https://github.com/codrops/ProximityFeedback/" title="Find this project on GitHub" target="_blank"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a> <a class="demo" href="index.html"><span>Demo 1</span></a> <a class="demo" href="index2.html"><span>Demo 2</span></a> <a class="demo" href="index3.html"><span>Demo 3</span></a> <a class="demo" href="index4.html"><span>Demo 4</span></a> <a class="demo" href="index5.html"><span>Demo 5</span></a> <a class="demo demo--current" href="index6.html"><span>Demo 6</span></a> <a class="demo" href="index7.html"><span>Demo 7</span></a> </nav> </div> <div class="grid"> <a href="#" class="grid__item"> <div class="grid__item-img grid__item-img--bw" style="background-image: url(img/6.jpg)"></div> <div class="grid__item-content"> <h3 class="grid__item-title">Ferreira Campos</h3> <span class="grid__item-cta">View Project</span> </div> </a> <a href="#" class="grid__item"> <div class="grid__item-img grid__item-img--bw" style="background-image: url(img/7.jpg)"></div> <div class="grid__item-content"> <h3 class="grid__item-title">Warden Café</h3> <span class="grid__item-cta">View Project</span> </div> </a> <a href="#" class="grid__item"> <div class="grid__item-img grid__item-img--blur" style="background-image: url(img/8.jpg)"></div> <div class="grid__item-content"> <h3 class="grid__item-title grid__item-title--inverted">Andrea Capelli</h3> <span class="grid__item-cta">View Project</span> </div> </a> <a href="#" class="grid__item"> <div class="grid__item-img grid__item-img--blur" style="background-image: url(img/9.jpg)"></div> <div class="grid__item-content"> <h3 class="grid__item-title grid__item-title--inverted">Ricci Houston</h3> <span class="grid__item-cta">View Project</span> </div> </a> <a href="#" class="grid__item"> <div class="grid__item-imgwrap"> <div class="grid__item-img grid__item-img--scaled" style="background-image: url(img/10.jpg)"></div> </div> <div class="grid__item-content"> <h3 class="grid__item-title">Metro Empathy</h3> <span class="grid__item-cta">View Project</span> </div> </a> <a href="#" class="grid__item"> <div class="grid__item-imgwrap"> <div class="grid__item-img grid__item-img--scaled" style="background-image: url(img/11.jpg)"></div> </div> <div class="grid__item-content"> <h3 class="grid__item-title">InStyle City</h3> <span class="grid__item-cta">View Project</span> </div> </a> <a href="#" class="grid__item grid__item--bg"> <div class="grid__item-img grid__item-img--opaque" style="background-image: url(img/12.jpg)"></div> <div class="grid__item-content"> <h3 class="grid__item-title">Nature Zack</h3> <span class="grid__item-cta">View Project</span> </div> </a> <a href="#" class="grid__item grid__item--bg"> <div class="grid__item-img grid__item-img--opaque" style="background-image: url(img/13.jpg)"></div> <div class="grid__item-content"> <h3 class="grid__item-title">subIrish Moss</h3> <span class="grid__item-cta">View Project</span> </div> </a> </div> </main> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/demo.js"></script> <script src="js/TweenMax.min.js"></script> <script src="js/nearby.js"></script> <script src="js/charming.min.js"></script> <script src="js/demo6.js"></script> </body> </html>

评论收藏

内容反馈

版权申诉