HTML5SVG鼠标hover图形变形切换特效.zip资源-CSDN文库

共20个文件

css：8个

js：7个

html：5个

版权申诉

78 浏览量 2022-11-03 23:38:26 上传评论收藏 91KB ZIP 举报

HTML5是一种先进的网页开发技术，它为Web开发者提供了丰富的功能和强大的工具，使得网页内容更加生动、交互性更强。SVG（Scalable Vector Graphics）是HTML5中的一个关键部分，它允许在网页上创建和显示高质量的矢量图形。本教程通过一个名为“HTML5 SVG鼠标hover图形变形切换特效”的压缩包，向我们展示了如何利用SVG和HTML5的特性实现鼠标悬停时图形的动态变换效果。 SVG图形的一大优势在于它们是基于矢量的，这意味着不论放大多少倍，图形都能保持清晰，不会出现像素化的现象。此外，SVG还支持动画和交互性，这使得它成为创建网页动态效果的理想选择。在这个特效中，主要涉及到以下几个知识点： 1. **SVG元素**：SVG图形由一系列的元素组成，如`<rect>`（矩形）、`<circle>`（圆形）、`<polygon>`（多边形）等。这些元素可以通过CSS样式进行控制，包括颜色、填充、描边等属性。 2. **CSS3选择器与过渡效果**：CSS3的`:hover`选择器用于指定元素在鼠标悬停时的样式变化。结合`transition`属性，可以平滑地过渡到新的样式，实现图形的变形效果。 3. **SVG的变形（Transform）属性**：SVG元素可以通过`transform`属性实现位移（translate）、旋转（rotate）、缩放（scale）等变形操作。在hover效果中，这些变形常被用来创建动态视觉效果。 4. **JavaScript与SVG的交互**：虽然纯CSS可以实现简单的hover效果，但复杂的交互可能需要JavaScript的参与。通过JavaScript，我们可以精确地控制SVG元素的行为，比如改变图形的形状、大小或位置，实现更丰富的动画效果。 5. **事件监听**：在JavaScript中，可以使用`addEventListener`方法来监听鼠标悬停（mouseover/mouseout）等事件，当事件触发时执行相应的函数，更新SVG元素的属性，实现图形的变形切换。 6. **动画框架**：对于更复杂的动画，可以使用像GreenSock（GSAP）这样的JavaScript库，它提供了强大的时间轴管理和动画控制功能，可以简化SVG动画的编写过程。这个压缩包中的示例可能包含一个HTML文件和一个或多个SVG文件，以及相关的CSS和JavaScript代码。通过学习和研究这些文件，你可以了解到如何将这些概念应用到实际项目中，创造出吸引人的网页交互效果。理解并掌握这些HTML5和SVG技术，对于提升网页设计和开发能力具有重要意义。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 SVG鼠标hover图形变形切换特效.zip （20个子文件）

132689873381277919

HTML5SVG_bianxing

css

htmleaf-demo.css 6KB

demo4.css 174B

demo2.css 775B

demo5.css 4KB

demo3.css 524B

demo1.css 2KB

demo.css 5KB

normalize.css 2KB

index5.html 19KB

index4.html 6KB

index.html 183KB

demo4.js 4KB

anime.min.js 11KB

demo2.js 2KB

demo.js 1KB

demo1.js 4KB

demo3.js 749B

demo5.js 7KB

index2.html 8KB

index3.html 9KB

<!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>HTML5 SVG图形变形效果</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/demo1.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> <body class="demo-1"> <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> <symbol id="icon-github" viewBox="0 0 32.6 31.8"> <title>github</title> <path d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"/> </symbol> <symbol id="icon-keyboard" viewBox="0 0 100 70"> <title>keyboard</title> <path d="M 60.94,1.83 39.22,1.83 C 36.71,1.83 34.67,3.86 34.67,6.376 L 34.67,28.1 C 34.67,30.61 36.71,32.65 39.22,32.65 L 60.94,32.65 C 63.45,32.65 65.5,30.61 65.5,28.1 L 65.5,6.376 C 65.5,3.86 63.45,1.83 60.94,1.83 Z M 44.79,18.63 50.08,11.74 55.37,18.63 Z" opacity="0.2"/> <path d="M 60.86,36.75 39.14,36.75 C 36.63,36.75 34.59,38.79 34.59,41.3 L 34.59,63.02 C 34.59,65.53 36.63,67.57 39.14,67.57 L 60.86,67.57 C 63.38,67.57 65.41,65.53 65.41,63.02 L 65.41,41.3 C 65.42,38.79 63.38,36.75 60.86,36.75 Z M 50.08,57.45 44.79,50.55 55.37,50.55 Z" opacity="0.2" /> <path d="M 95.45,36.75 73.73,36.75 C 71.22,36.75 69.18,38.79 69.18,41.3 L 69.18,63.02 C 69.18,65.53 71.22,67.57 73.73,67.57 L 95.45,67.57 C 97.97,67.57 100,65.53 100,63.02 L 100,41.3 C 100,38.79 97.97,36.75 95.45,36.75 Z M 83.4,57.45 83.4,46.86 90.3,52.16 Z" /> <path d="M 26.27,36.75 4.55,36.75 C 2.037,36.75 0,38.79 0,41.3 L 0,63.02 C 0,65.53 2.037,67.57 4.55,67.57 L 26.27,67.57 C 28.78,67.57 30.82,65.53 30.82,63.02 L 30.82,41.3 C 30.82,38.79 28.78,36.75 26.27,36.75 Z M 16.69,57.45 9.79,52.16 16.69,46.86 Z" /> </symbol> </svg> <main> <div class="message">请在桌面浏览器上查看这个DEMO。</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">Organic Shape Morph Ideas</h1> <span class="info">请用鼠标hover圆形图案</span> </header> <nav class="demos"> <svg class="icon icon--keyboard"><use xlink:href="#icon-keyboard"></use></svg> <a class="demo demo--current" 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> </nav> </div> <div class="content"> <svg class="scene" width="50vh" height="50vh" viewBox="0 0 500 500" xmlns:pathdata="http://www.codrops.com/"> <defs> <clipPath id="clip_circle"> <circle cx="250" cy="249.9" r="246.5" /> </clipPath> </defs> <g class="scene__clip" clip-path="url(#clip_circle)"> <rect class="scene__bg" width="500" height="500" /> <path class="scene__bgdots" d="M 469.8,260.6 C 469.8,261 469.8,262 469.3,262.6 469.8,265.5 468.3,269 464.9,269 461.4,269 459.9,265.5 460.3,262.6 460.3,262 459.9,261.5 459.9,260.6 L 459.9,252.1 C 459.4,252.1 458.9,252.6 458.4,252.6 455.9,253.1 454.5,251.1 453.9,249.1 452.9,248.6 452.5,248.1 451.9,247.7 448,243.7 452.5,238.2 456.9,239.7 458.4,239.1 460.3,239.7 461.9,240.6 464.3,238.7 468.9,239.1 469.8,242.2 470.3,243.1 470.3,244.2 470.3,245.7 L 470.3,260.6 Z M 390.4,392.4 C 389.9,392.9 388.9,393.4 388.4,394 390.4,397.9 384.4,402.9 380.4,399.4 377.5,396.9 373.5,395.4 370.5,392.9 370,392.4 369.5,392 369,390.9 L 364,390.9 C 363.5,390.9 363.1,390.9 362.6,390.4 362.6,391.5 361.6,392.4 360,393.4 357.6,394.9 356.6,396.4 356,398.4 358.6,400.4 361.6,401.3 364,403.8 366,405.8 366,408.6 364.6,410 365.5,411 366,412 365.5,413.5 365.5,415.5 365.1,417 364,418.4 363.5,419 362.6,421.4 362.6,419.9 362,423.4 358.6,425 355.6,424.4 355.1,426.4 353.6,428.4 351.1,428.4 L 344.7,428.4 C 344.2,428.4 343.6,428.4 343.2,427.9 342.7,428.8 342.1,429.9 340.6,430.8 336.6,432.8 336.6,435.4 336.6,439.4 336.6,439.4 336.6,439.4 336.6,439.4 L 336.6,439.4 C 336.6,439.4 336.6,439.4 336.6,439.8 336.6,440.8 336.1,441.8 335.6,442.3 334.6,444.8 333.6,447.2 331.6,449.2 327.2,453.7 320.2,446.8 324.6,442.3 325.2,441.8 325.7,441.3 326.1,440.3 323.2,438.8 322.6,434.8 324.6,432.8 323.7,431.9 322.6,430.8 321.7,429.9 320.2,428.4 320.2,426.9 320.2,425.9 319.2,426.9 318.2,427.9 316.8,427.9 316.2,427.9 315.7,427.9 315.2,427.9 317.7,430.4 317.2,435.4 313.2,436.3 313.2,436.3 313.2,436.3 313.2,436.8 313.2,437.4 312.8,437.9 312.8,437.9 312.8,437.9 312.8,437.9 312.8,437.9 311.7,438.8 310.8,439.8 308.8,439.8 307.7,439.8 307.3,439.4 306.8,439.4 306.8,439.8 306.3,439.8 306.3,440.3 305.3,441.3 304.3,442.3 303.3,443.3 308.8,443.8 308.8,452.7 302.8,452.7 298.4,452.7 296.8,447.2 299.3,444.8 296.8,444.3 294.9,441.8 295.3,439.4 294.9,439.4 294.4,439.8 293.9,439.8 295.9,442.3 295.3,446.8 291.9,447.8 291.9,447.8 291.9,447.8 291.9,448.3 291.9,448.8 291.3,449.2 291.3,449.2 291.3,449.2 291.3,449.2 291.3,449.2 291.3,449.7 290.9,449.7 290.4,449.7 290.4,449.7 290.4,450.3 290.4,450.3 293.3,452.7 292.4,459.2 287.5,459.2 286.9,459.2 285.9,459.2 285.5,458.7 285.5,461.2 284,464.1 280.9,464.1 280.4,464.1 279.5,464.1 278.9,463.6 278.5,465.2 277.5,466.7 276,467.1 275.5,469.1 274,470.7 271.5,470.7 269.1,470.7 267.5,469.1 267.1,467.1 267.1,467.1 266.5,467.1 266.5,467.1 266.5,468.1 265.6,469.1 264,470.1 260.1,472.1 260.1,474.5 260.1,479.1 260.1,485.5 250.2,485.5 250.2,479.1 250.2,471.1 251.6,465.6 259.1,461.6 260.6,460.7 262,461.2 263.6,461.6 264,459.7 265.6,457.7 268,457.7 L 274.5,457.7 C 275,457.7 276,457.7 276.5,458.2 276.9,456.2 278.5,454.7 280.9,454.7 281.5,454.7 282.4,454.7 282.9,455.2 282.9,455.2 282.9,454.7 282.9,454.7 280.4,454.3 278.5,452.7 276,450.3 272,446.3 277.5,439.8 282,442.8 282.4,441.8 282.9,441.3 284,440.8 284,440.8 284,440.3

评论收藏

内容反馈

版权申诉