SVG—初识6之闪烁动画和图案动画

已于 2022-12-23 16:02:41 修改
阅读量2.4k 收藏 10
点赞数 1
分类专栏： SVG 文章标签： 动画 css3 javascript
于 2022-10-12 18:18:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/127074117
版权

SVG—初识6

SVG 闪烁动画

闪烁动画效果的核心在于控制元素颜色的变化，掌握好时间的控制，让颜色的变化有引人注目的显示，这样在静态的页面中，自然会吸引住用户的眼球。

CSS实现闪烁动画

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            animation: shan 0.5s infinite alternate;
        }
        @keyframes shan {
            to{
                color: transparent;
            }
        }
</head>
<body>
<div>
    <span>Hello,你好啊</span>
</div>
</body>
</html>

在这里插入图片描述

  • 为了使颜色过渡更平滑，animation-direction的属性设置为 alternate 或者 alternate-reverse（默认为 normal）
  • 作用是会让动画增加一个循环周期
  • 还需要把 animation-duration （动画时长）减半，才能达到预期效果

SVG实现闪烁动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<svg width="960px" height="500px" class="left-top border" style="background-color: #0e2439;">
<path fill="none" style="stroke: #2de8e8;stroke-width: 3px;" d="m50,150 0,-40 30,-30 150,0 20,20 150,0">
        <animate
            attributeName="stroke"
            values="#2de8e8;#235fa7;#2de8e8"
            dur="0.5s"
            begin="0s"
            repeatCount="indefinite"
            />
    </path>
    <polygon fill="#2de8e8" style="stroke: #235fa7;stroke-width: 3px;" points="250,80 360,80 370,90 260,90">
        <animate
            attributeName="fill"
            values="#235fa7;#2de8e8;#235fa7"
            dur="1s"
            begin="0s"
            repeatCount="indefinite"
            />
        <animate
            attributeName="stroke"
            values="#235fa7;#2de8e8;#235fa7"
            dur="1s"
            begin="0s"
            repeatCount="indefinite"
        />
    </polygon>
    <path fill="none" style="stroke: #2de8e8;stroke-width: 3px;" d="m350,60 50,20 170,0 30,30 0,40">
        <animate
            attributeName="stroke"
            values="#2de8e8;#235fa7;#2de8e8"
            dur="0.5s"
            begin="0.5s"
            repeatCount="indefinite"
            />
    </path>
</svg>
</body>
</html>

在这里插入图片描述

GSAP 实现闪烁动画

多条折线同时闪烁，每条折线都有自己的动画设定，所以在 GSAP 中我们不能使用 timeline，动画不是线性的，而是并行的。

整个图的svg：

<svg width="960px" height="500px" class="left-top border" style="background-color: #0e2439;">
    <path fill="none" style="stroke: #2de8e8;stroke-width: 3px;" d="m50,150 0,-40 30,-30 150,0 20,20 150,0"></path>
    <polygon fill="#2de8e8" style="stroke: #2de8e8;stroke-width: 3px;" points="250,80 360,80 370,90 260,90"></polygon>
    <path fill="none" style="stroke: #2de8e8;stroke-width: 3px;" d="m350,60 50,20 170,0 30,30 0,40"></path>
    <ellipse rx="5" ry="8" cx="50" cy="170" fill="#2de8e8" />
    <line x1="50" x2="50" y1="170" y2="300" stroke-width="3px" stroke="#2de8e8"></line>

    <ellipse rx="13" ry="5" cx="130" cy="120" fill="#2de8e8" />
    <ellipse rx="13" ry="5" cx="500" cy="120" fill="#2de8e8" />
    <line x1="120" x2="500" y1="120" y2="120" stroke-width="1px" stroke="#2de8e8"></line>

    <path fill="none" style="stroke: #2de8e8;stroke-width: 3px;" d="m50,320 0,40 30,30 150,0 20,-20 150,0"></path>
    <polygon fill="#2de8e8" style="stroke: #2de8e8;stroke-width: 3px;" points="260,380 380,380 370,390 250,390"></polygon>
    <path fill="none" style="stroke: #2de8e8;stroke-width: 3px;" d="m370,400 50,-20 150,0 30,-30 0,-40"></path>
    <ellipse rx="5" ry="8" cx="600" cy="170" fill="#2de8e8" />
    <line x1="600" x2="600" y1="170" y2="300" stroke-width="3px" stroke="#2de8e8"></line>

    <ellipse rx="13" ry="5" cx="130" cy="350" fill="#2de8e8" />
    <ellipse rx="13" ry="5" cx="500" cy="350" fill="#2de8e8" />
    <line x1="120" x2="500" y1="350" y2="350" stroke-width="1px" stroke="#2de8e8"></line>
</svg>

在这里插入图片描述
做动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<svg width="960px" height="500px" class="left-top border" style="background-color: #0e2439;">
    <path  id="left-top"  fill="none" style="stroke: #235fa7;stroke-width: 3px;" d="m50,150 0,-40 30,-30 150,0 20,20 150,0"></path>
    <polygon id="top-polygon"   fill="#2de8e8" style="stroke: #2de8e8;stroke-width: 3px;" points="250,80 360,80 370,90 260,90"></polygon>
    <path  id="right-top"    fill="none" style="stroke: #235fa7;stroke-width: 3px;" d="m350,60 50,20 170,0 30,30 0,40"></path>


    <ellipse id="left-ellipse"  rx="5" ry="8" cx="50" cy="170" fill="#235fa7" />
    <line  id="left-line"   x1="50" x2="50" y1="170" y2="300" stroke-width="3px" stroke="#235fa7"></line>

<!--    中心顶部线条-->
       <ellipse id="top-left-ellipse" rx="13" ry="5" cx="130" cy="120" fill="#235fa7" />
       <ellipse id="top-right-ellipse" rx="13" ry="5" cx="500" cy="120" fill="#235fa7" />
       <line  id="top-line"   x1="120" x2="500" y1="120" y2="120" stroke-width="1px" stroke="#235fa7"></line>

<!--    右边中间的椭圆点和直线-->
    <ellipse id="left-ellipse" rx="5" ry="8" cx="600" cy="170" fill="#235fa7" />
    <line id="left-line" x1="600" x2="600" y1="170" y2="300" stroke-width="3px" stroke="#235fa7"></line>


    <!--底部的线条-->
    <path id="left-top" fill="none" style="stroke: #235fa7;stroke-width: 3px;" d="m50,320 0,40 30,30 150,0 20,-20 150,0"></path>
    <polygon id="top-polygon"  fill="#2de8e8" style="stroke: #2de8e8;stroke-width: 3px;" points="260,380 380,380 370,390 250,390"></polygon>
    <path id="right-top"  fill="none" style="stroke: #235fa7;stroke-width: 3px;" d="m370,400 50,-20 150,0 30,-30 0,-40"></path>

    <ellipse id="top-left-ellipse" rx="13" ry="5" cx="130" cy="350" fill="#235fa7" />
    <ellipse id="top-right-ellipse" rx="13" ry="5" cx="500" cy="350" fill="#235fa7" />
    <line id="top-line" x1="120" x2="500" y1="350" y2="350" stroke-width="1px" stroke="#235fa7"></line>
</svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script>
<script>
gsap.to("#left-top",{
    stroke: "#2de8e8",
    repeat: -1,
    yoyo: true,
    duration: 0.5,
    repeatDelay: 0
})
gsap.to("#top-polygon",{
    fill:"#235fa7",
    stroke: "#235fa7",
    repeat: -1,
    yoyo: true,
    duration: 0.5,
    repeatDelay: 0
})
gsap.to("#right-top",{
    stroke: "#2de8e8",
    repeat: -1,
    yoyo: true,
    duration: 0.25,
    repeatDelay: 0.1
})
gsap.to("#left-ellipse",{
    fill: "#2de8e8",
    stroke: "#2de8e8",
    repeat: -1,
    yoyo: true,
    duration: 0.3,
    repeatDelay: 0
})
gsap.to("#left-line",{
    fill: "#2de8e8",
    stroke: "#2de8e8",
    repeat: -1,
    yoyo: true,
    duration: 0.3,
    repeatDelay: 0
})
gsap.to("#top-left-ellipse",{
    fill: "#2de8e8",
    stroke: "#2de8e8",
    repeat: -1,
    yoyo: true,
    duration: 0.3,
    repeatDelay: 0
})
gsap.to("#top-right-ellipse",{
    fill: "#2de8e8",
    stroke: "#2de8e8",
    repeat: -1,
    yoyo: true,
    duration: 0.3,
    repeatDelay: 0
})
gsap.to("#top-line",{
    fill: "#2de8e8",
    stroke: "#2de8e8",
    repeat: -1,
    yoyo: true,
    duration: 0.3,
    repeatDelay: 0
})
</script>
</html>

在这里插入图片描述

SVG图案动画

在 Web 页面开发中使用 SVG 生成背景

SVG Pattern

  • 在 SVG 中声明一个 pattern 元素
  • pattern 中要声明我们想要绘制的图形
  • 创建一个新的图形，使用 SVG 中的 fill 属性，填充图案
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app {
            font-family: 'Avenir', Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 30px;
        }

    </style>
</head>
<body>
<div id="app">
    <svg width="360" height="240">
        <defs>
            <pattern id="rect" patternUnits="userSpaceOnUse" width="60" height="60">
                <rect width="30" height="30" fill="#4af" x="0" y="0"></rect>
            </pattern>
        </defs>

        <rect width="60" height="60" stroke="#a4f" stroke-width="2" fill="none" />
        <rect id="canvas" width="360" height="240" stroke="#aaa" fill="url(#rect)" />
    </svg>
</div>
</body>
</html>

在这里插入图片描述

VillanelleS
关注
专栏目录
svg实现闪烁的点_SVG 动画开发实战小册发布
weixin_39630880的博客
12-16 474
年中的时候，花了点时间在 SVG 动画开发学习上，经过不断探索总结，结合自己学到的知识，以小册子的形式沉淀下来一整套基于 SVG 进行动画开发的实践方法，我把它命名为《SVG 动画开发实战》。小册介绍如今的 Web 页面动画的实现方式有很多种解决方案，比如使用原生 CSS3 Animation、使用 SVG SMIL Animation，甚至是使用各种社区免费的类库，像比较流行的 ani...
svg实现闪烁的点_Loading动画的最佳实现方式
weixin_39588104的博客
12-01 750
点击上方 "程序员小乐"关注, 星标或置顶一起成长 每天凌晨00点00分, 第一时间与你相约 每日英文 Maturity not to see how old you, but your shoulders strong enough to see multiple responsibilities. 成熟不是看你的年龄有多大，而是看你的肩膀能挑起多重的责任。 每日掏心话 每个人的性格中，都有某些...
SVG动画-小球沿路径闪烁运动示例
04-03
SVG动画 - 前端及有SVG动画需求，html格式可直接用，可以参考其中内容改成其他格式
SVG动画详解：让你的图形动起来
最新发布
阿里渣渣java研发组-群主
08-28 1156
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，允许你通过代码定义图形。与位图不同，SVG可以无限缩放而不会失真，这使得它非常适合用于图标、插图和复杂的图形。SVG动画为Web开发者提供了一种强大且灵活的工具，可以用来制作高质量的动效，提升用户体验。在本文中，我们探讨了SVG动画的基本原理、实现方法以及实际应用场景。通过学习并掌握这些技巧，你可以为你的网页增添视觉亮点，使其在众多网站中脱颖而出。
svg动态赋值并让其闪烁
heshouwu_1026的博客
10-19 1067
svg动态赋值并让其闪烁
css svg 闪烁,如何在svg中实现闪烁效果？
weixin_32254243的博客
08-03 1153
我同意。 ＆＃34; animate＆＃34; SVG元素就是你想要的。对于任何想要使用javascript来设置这种动画并进行管理的人来说，这是我使用的方法：const BLINK_DURATION_ERROR = "0.5s";const BLINK_DURATION_WARNING = "0.75s";var svgNS = "http://www.w3.org/2000/svg";LCAR...
SVG动画效果
LiHang1234567777的博客
07-16 846
随着人工智能的不断发展，web这门技术也越来越重要，很多人都开启了学习web学习，本文就介绍了webSVG学习的基础内容。努力学习。
CSS3 SVG新年喇叭闪烁动画特效
07-24
在本文中，我们将深入探讨如何使用CSS3和SVG技术创建一个独特的新年喇叭闪烁动画特效。这个特效结合了SVG的矢量图形能力和CSS3的动画功能，为网页增添了一种富有节日气氛的视觉表现。 首先，SVG（Scalable Vector ...
css3+html5 svg新年快乐文字和喇叭闪烁动画特效
05-31
在本文中，我们将深入探讨如何使用CSS3、HTML5以及SVG技术来创建一个"新年快乐"的文字动画和闪烁的喇叭图标，为庆祝节日增添互动性和视觉吸引力。CSS（层叠样式表）是网页设计中用于定义布局和样式的语言，而HTML5则...
CSS3 SVG猫和狗表白动画特效
06-24
在本文中，我们将深入探讨如何使用CSS3和SVG技术创建一款可爱的“猫和狗表白动画特效”。CSS3（层叠样式表第三版）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言，而SVG（可缩放矢量图形）是...
SVG动画
tinggu的专栏
12-20 2389
SVG中提供三种常用动画标记
svg灯泡发光
04-03
使用svg编写灯泡，并加载到html中，点击发光并且能够闪烁
svg 动画管道效果
06-24
svg通过jquery的ajax请求webservice，获取数据更新svg标签数据。 实现了温度计和管道效果。 其中动画效果在IE10下有问题，其它浏览器没问题。
HTML5 SVG卡通动画特效
10-22
用HTML SVG，实现小树成长的线条 $(document).ready(function(){ // Setup your Lazy Line element. // see README file for more settings $('#demo').lazylinepainter({ 'svgData' : svgData, 'strokeWidth':2, 'strokeColor':'#dc908e', 'onComplete' : function(){ $(".treeTip").show().addClass("zoomIn"); }, 'onStart' : function(){ console.log('>> onStart'); } } ) // Paint your Lazy Line, that easy! var state = 'paint'; $('#demo').lazylinepainter(state); })
svg动画特效
m0_73800955的博客
12-21 1298
svg动画特效
SVG 实现闪烁动画
oWuMingXiaoBei1的博客
04-19 4835
SVG Web实现文字特效，展示地铁信息，航班信息 我考虑用jsp和CSS常规方式实现，后来考虑到不熟悉WEB编程，再着想了解SVG图片，所以弄了个这个，转载请注明 tspan 支持添加多个文本 repeatCount="indefinite" 循环 animate attributeType="CSS" CSS类型动画 https://blog.csdn.net/oWuMing...
【svg】svg动画
weixin_30477797的博客
07-31 425
如果你之前没有接触过svg，可以看下这个简略图：https://www.processon.com/view/link/5ae205a2e4b0411f64d1f65a 最近在看svg，发现svg和css animation结合起来，能够做一些很好玩儿的动画效果。 比如看这个： 其实这个怎么做的呢？我们继续往下看 我们知道stroke为描边，可...
css svg 闪烁,(SVG + CSS)波浪模式
weixin_28983061的博客
08-03 368
csshtml, body {width: 100%;height: 100%;}body {background: #131518;}#patt1 path {stroke: #ff509e;}#patt2 path {stroke: #95d13c;}#patt3 path {stroke: #00b6cb;}#patt4 path {stroke: #9753e1;}#mask1 rect ...
svg常用属性及动画效果
jieyucx的博客
10-20 3648
SVG是可缩放矢量图形（）的缩写。它是一种基于XML语法的2D矢量图形格式，用于描述二维图形和图像。与传统的栅格图像（如JPEGPNG等）相比，SVG使用数学描述来定义图形，因此可以无损地缩放和放大，而不会失真或失去清晰度。SVG可在各种分辨率和尺寸的设备上显示，并且支持交互性和动画效果，使得它成为一种非常强大和灵活的图形格式。viewBox是SVG元素的一个属性，用于定义SVG画布中可见区域的坐标系和大小。它是一个由4个数值组成的字符串，分别表示左上角的x坐标、左上角的y坐标、宽度和高度。viewBox。
使用SVG和CSS3创建炫酷边框动画效果
"利用SVG和CSS3实现炫酷边框动画，通过鼠标悬停使网格元素透明，边框顺时针旋转，创造独特视觉效果。此技术实验性，可能不兼容所有浏览器。主要涉及SVG的CSS过渡，stroke-dashoffset和stroke-dasharray属性，以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值