HTML5SVG实现的灯塔光束扫描动画效果源码.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

98 浏览量 2022-11-03 23:38:05 上传评论收藏 3KB ZIP 举报

HTML5是一种先进的网页开发技术，它极大地扩展了网页的表现力，使得开发者能够创建出更加丰富、动态和交互的用户体验。SVG（Scalable Vector Graphics）是HTML5中的一个关键组件，用于创建矢量图形，这些图形可以无损缩放，无论放大多少倍，图像质量始终保持清晰。在本压缩包中，"HTML5 SVG实现的灯塔光束扫描动画效果源码.zip"提供了使用SVG创建灯塔光束扫描动画的具体实现。这个源码示例展示了如何利用SVG的图形元素和CSS3的动画属性来制作动态效果。SVG图形元素包括`<circle>`、`<rect>`、`<polygon>`等，它们可以被用来绘制各种形状，如圆形、矩形和多边形。在这个案例中，可能用到了`<path>`元素来描绘灯塔和光束的路径，因为它能更灵活地绘制复杂的图形路径。 CSS3的`@keyframes`规则是创建动画的核心，它定义了动画从开始到结束时各阶段的样式。在灯塔光束扫描的动画中，可能会有类似以下的`@keyframes`定义： ```css @keyframes lighthouse-beam { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 这段代码表示光束从0度开始旋转，直到360度结束，形成了一个完整的循环，模拟灯塔的光束扫过周围环境的效果。此外，`<svg>`元素的`<animate>`或`<animateTransform>`子元素也可以用来添加动画效果。例如，可以通过改变`<path>`元素的`d`属性或`<rect>`的`width`、`height`等属性，来实现光束的开启和关闭，或者改变灯塔的光照强度。为了使动画更加逼真，可能还涉及到JavaScript的使用，例如使用`requestAnimationFrame()`函数来控制动画的帧率和流畅性，或者监听用户的交互事件，如点击按钮启动或停止扫描动画。这个源码实例为学习HTML5和SVG结合使用制作动画提供了一个很好的实践案例。通过理解并分析源码，开发者不仅可以掌握SVG图形元素的使用，还能深入理解CSS3动画的工作原理，以及如何将这些技术融合在一起，创造出富有视觉吸引力的网页互动效果。

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 SVG实现的灯塔光束扫描动画效果源码.zip （1个子文件）

132689862401292860

index.html 14KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5 SVG 灯塔光束扫描动画</title> <style> .light polygon { -webkit-box-shadow: 10px 10px 5px 0px rgba(250, 250, 250, 0.65); -moz-box-shadow: 10px 10px 5px 0px rgba(250, 250, 250, 0.65); box-shadow: 10px 10px 5px 0px rgba(250, 250, 250, 0.65); animation: rotate 5s infinite; } /*light beam animation*/ @keyframes rotate { 0% { transform-origin: left; opacity: 0; } 20% { opacity: 1; } 50% { opacity: 1; } 60% { opacity: 0; transform: rotatey(180deg); } 65% { opacity: 0; } 100% { opacity: 0; } } .image { margin-left: 200px; z-index: 1; position: absolute; top: 40px; left: 0; } .sky { margin-left: -8%; margin-top: -38%; width: 130%; } .wave { animation: waves 11s infinite ease; } /*waves animation*/ @keyframes waves { 20% { transform: translate(12px, 2px); } 30% { transform: translate(-1px, 1px); } 50% { transform: translate(0px, 0px); } 70% { transform: translate(10px, 1px); } 90% { transform: translate(8px, 2px); } 100% { transform: translate(0px, 0px); } } .container { overflow: hidden; } </style> </head> <body> <div class="container"> <svg class="image" version="1.1" viewBox="0 0 1100 800"> <foreignObject x="0" y="0" width="500" height="550"> <img class="sky" src="https://i.imgsafe.org/12cd3e8cb5.png" /> </foreignObject>  <linearGradient id="sea" x1="52%" y1="0%" x2="48%" y2="100%"> <stop offset="0%" style="stop-color:rgb(45,73,133);stop-opacity:1" /> <stop offset="43%" style="stop-color:rgb(45,73,133);stop-opacity:1" /> <stop offset="95%" style="stop-color:rgb(48,56,79);stop-opacity:1" /> <stop offset="99%" style="stop-color:rgb(48,56,79);stop-opacity:1" /> </linearGradient> <linearGradient id="waves" x1="52%" y1="0%" x2="48%" y2="100%"> <stop offset="0%" style="stop-color:rgb(45,73,133);stop-opacity:1" /> <stop offset="99%" style="stop-color:rgb(45,73,133);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(3,132,242);stop-opacity:1" /> </linearGradient> <polyline points="-70,515 0,700 630,700 630,515" style="fill:url(#sea);stroke:none; path d=" M -70, 518 C 8, 480, -60, 505, 0, 518, " fill="none " stroke="#000 " stroke-width="1px ";" />  <path class="wave" id="wave1" d="M -70, 518 C 8, 480, -60, 505, 0, 518," fill="none" stroke="none" stroke-width="1px" /> <path class="wave" id="wave2" d="M 0, 520 C 78, 480, 10, 505, 70, 525," fill="url(#waves)" stroke="none" stroke-width="px" /> <path class="wave" id="wave3" d="M 69, 520 C 148, 480, 80, 505, 140, 525," fill="url(#waves)" stroke="none" stroke-width="1px" /> <path class="wave" id="wave4" d="M 139, 517 C 218, 480, 150, 505, 210, 518," fill="url(#waves)" stroke="none" stroke-width="1px" /> <path class="wave" id="wave5" d="M 209, 518 C 288, 480, 220, 505, 280, 518," fill="url(#waves)" stroke="none" stroke-width="1px" /> <path class="wave" id="wave6" d="M 279, 518 C 358, 480, 290, 505, 350, 518," fill="url(#waves)" stroke="none" stroke-width="1px" /> <path class="wave" id="wave7" d="M 349, 518 C 428, 480, 360, 505, 420, 518," fill="url(#waves)" stroke="none" stroke-width="1px" /> <path class="wave" id="wave8" d="M 419, 520 C 498, 480, 430, 505, 490, 525," fill="url(#waves)" stroke="none" stroke-width="1px" /> <path class="wave" id="wave9" d="M 489, 519 C 568, 480, 500, 505, 560, 521," fill="url(#waves)" stroke="none" stroke-width="1px" /> <path class="wave" id="wave10" d="M 559, 515 C 638, 480, 570, 505, 610, 525," fill="url(#waves)" stroke="none" stroke-width="1px" />  <path d="M100,550 C280,400 460,550 460,550" fill="#014D15" stroke="#000" stroke-width="2px" />  <polyline points="100,549 180,560 140,580 240,600 210,610 280,630 350,610 320,600 420,580 380,560 460,549" style="fill:#014D15;stroke:black;stroke-width:2" />  <polyline points="200,480 205,450 345,450 348,480" style="fill:white;stroke:black;stroke-width:2;" /> <polyline points="182,501 200,470 350,470 369,501" style="fill:black;stroke:black;stroke-width:2" /> <polyline points="205,450 200,450 200,445 200,445 195,445 195,440 355,440 355,445 350,445 350,445 350,450" style="fill:black;stroke:black;stroke-width:2" /> <polyline points="210,439 215,255 217,255 218,253 224,251 230,250 236,249 292,247 335,255 340,439" style="fill:white;stroke:black;stroke-width:2" /> <path d="M215,250 C275,230 333,250 333,250" fill="none" stroke="#000" stroke-width="2px" />  <polyline points="237,160 237,205 305,205 305,160" style="fill:grey;stroke:black;stroke-width:2" /> <path d="M 239, 161 C 232, 162, 250, 157, 305, 160" fill="grey" stroke="#000" stroke-width="2px" /> <path d="M211,256 C275,235 337,256 337,256" fill="none" stroke="#000" stroke-width="5px" /> <path d="M212,249 C275,229 336,249 336,249" fill="none" stroke="#000" stroke-width="5px" /> <path d="M215,248 C233,245 210,220 210,218" fill="none" stroke="#000" stroke-width="4px" /> <line x1="224" y1="248" x2="224" y2="210" style="stroke:black;stroke-width:2" /> <path d="M245,240 C248,230 240,212 240,210" fill="none" stroke="black" stroke-width="4px" /> <line x1="248" y1="240" x2="248" y2="208" style="stroke:black;stroke-width:2" /> <line x1="275" y1="240" x2="275" y2="208" style="stroke:black;stroke-width:4" /> <path d="M303,243 C298,238 308,210 308,210" fill="none" stroke="black" stroke-width="4px" /> <line x1="299" y1="243" x2="299" y2="210" style="stroke:black;stroke-width:2" /> <path d="M330,247 C313,245 335,218 335,218" fill="none" stroke="#000" stroke-width="4px" /> <line x1="322" y1="243" x2="322" y2="212" style="stroke:black;stroke-width:2" /> <path d="M205,219 C275,189 343,219 343,219" fill="none" stroke="#000" stroke-width="5px" /> <path d="M206,214 C275,186 340,214 340,214" fill="none" stroke="#000" stroke-width="5px" />  <polyline points="216,185 216,210 231,210 231,180 231,210 250,205 250,176 250,205 270,205 270,175 270,205 290,202 290,176 290,202 311,210 311,180 311,210 326,210 326, 185" style="fill:none;stroke:black;stroke-width:1" /> <path d="M214,187 C275,159 328,187 328,187" fill="none" stroke="#000" stroke-width="1px" /> <path d="M214,190 C275,162 328,190 328,190" fill="none" stroke="#000" stroke-width="1px" /> <path d="M214,205 C275,182 328,205 328,205" fill="none" stroke="#000" stroke-width="1px" /> <line x1="245" y1="115" x2="245" y2="160" style="stroke:black;stroke-width:2" /> <line x1="297" y1="115" x2="297" y2="160" style="stroke:black;stroke-width:2" /> <path d="M244,115 C274,102 298,115 298,115" fill="none" stroke="#000" stroke-width="2px" /> <line x1="250" y1="112" x2="250" y2="160" style="stroke:black;stroke-width:1" /> <line x1="265" y1="110" x2="265" y2="160" style="stroke:black;stroke-width:1" /> <line x1="280" y1="110" x2="280" y2="160" style="stroke:black;stroke-width:1" /> <line x1="292" y1="112" x2="292" y2="160" style="stroke:black;stroke

评论收藏

内容反馈

版权申诉