欢迎光临黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

神奇的SVG动画

时间:2023-03-02   来源:网站建设

用CSS可以写出漂亮的动画。直接上例子。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SVG动画</title>
    <style>
.button{
    width: 200px;
    height:50px;
    background: #fff; 
    margin:300px auto;
    position: relative;
    border:1px solid #ddd;
    cursor: pointer;
}
.hover-text{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}
.shape{
    fill:#fff;
     width: 200px;
    height: 50px;
}
.button:hover .shape{
    fill:#fff;
    -webkit-animation: draw 0.5s linear forwards;
    animation: draw 0.5s linear forwards;
}

@keyframes draw {
    0% {
        stroke-dasharray: 160 520;
        stroke-dashoffset: -460;
        stroke-width: 4px;
    }

    100% {
        stroke-dasharray: 760;
        stroke-dashoffset: 0;
        stroke-width: 4px;
        stroke: red;
    }
}
    </style>


</head>
<body>
<div class="button"> 
    <svg viewBox="0 0 200 50" version="1.1" xmlns="http://www.w3.org/2000/svg" > 
        <rect class="shape"></rect> 
    </svg> 
        <div  class="hover-text">文字标题</div>        
</div>
    
</body>
</html>


SVG 线条动画基础入门知识

button垂直水平居中、shape透明填充,边框宽度4px,边框颜色#1199ff。

也许你会对fill、stroke-width等属性有点懵,下面看看他们的描述:

  • fill:类比 css 中的 background-color,给 svg 图形填充颜色;

  • stroke-width:类比 css 中的 border-width,给 svg 图形设定边框宽度;

  • stroke:类比 css 中的 border-color,给 svg 图形设定边框颜色;

  • stroke-linejoin | stroke-linecap:设定线段连接处的样式;

  • stroke-dasharray:值是一组数组,没数量上限,每个数字交替表示划线与间隔的宽度;

  • stroke-dashoffset:则是划线与间隔的偏移量

重点能够实现线条动画的关键属性 stroke-dasharray 。属性 stroke-dasharray 可控制用来描边的点划线的图案范式。


本文标签:
新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

新安装的BT宝塔,如何进行安全设置修复
新安装的BT宝塔,如何进行安全设置修复

安装好宝塔面板之后,我们进行安全扫描,会发现至少扫描出十几个风险。如果有钱,就直接企业版,一键进行修...

pbootcms百度推广链接打不开显示404错误页面
pbootcms百度推广链接打不开显示404错误页面

pbootcms百度推广竞价/?bd_vid=**** 埋码无法打开的情况该如何解决?解决方法找到 apps/home/controller/In...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top