新闻中心 网络推广 网站建设 优化推广

神奇的SVG动画

用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 可控制用来描边的点划线的图案范式。


留言

电话微信    15899750475

工作时间:8:30-12:00;13:30-17:00

微信和手机同号,欢迎加微信沟通!

电话

关注公众号

 
微信
Top