效果图:
原理:多个SVG描边动画使用不同的animation-delay即可!
对于一个形状SVG元素或文本SVG元素,可以使用stroke-dasharray来控制描边的间隔样式,并且可以用stroke-dashoffset来控制描边的偏移量,借此可以实现描边动画效果,更具体的资料可以看看张大神的《纯CSS实现帅气的SVG路径描边动画效果》
我们先实现一个简单的文字描边动画:
<svg width="100%" height="100"> <text text-anchor="middle" x="50%" y="50%" class="text"> segmentfault.com </text> </svg>
.text{ font-size: 64px; font-weight: bold; text-transform: uppercase; fill: none; stroke: #3498db; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; } @keyframes stroke { 100% { stroke-dashoffset: -400; } }
演示地址:http://output.jsbin.com/demic...
然后我们同时使用多个描边动画,并设置不同的animation-delay:
<svg width="100%" height="100"> <text text-anchor="middle" x="50%" y="50%" class="text text-1"> segmentfault.com </text> <text text-anchor="middle" x="50%" y="50%" class="text text-2"> segmentfault.com </text> <text text-anchor="middle" x="50%" y="50%" class="text text-3"> segmentfault.com </text> <text text-anchor="middle" x="50%" y="50%" class="text text-4"> segmentfault.com </text> </svg>
注意:要使用多少种颜色,就放多少个text
.text{ font-size: 64px; font-weight: bold; text-transform: uppercase; fill: none; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; } .text-1{ stroke: #3498db; text-shadow: 0 0 5px #3498db; animation-delay: -1.5s; } .text-2{ stroke: #f39c12; text-shadow: 0 0 5px #f39c12; animation-delay: -3s; } .text-3{ stroke: #e74c3c; text-shadow: 0 0 5px #e74c3c; animation-delay: -4.5s; } .text-4{ stroke: #9b59b6; text-shadow: 0 0 5px #9b59b6; animation-delay: -6s; } @keyframes stroke { 100% { stroke-dashoffset: -400; } }
大功告成,演示地址:http://output.jsbin.com/vuyuv...
需要注意的几个点:
- 各个元素的animation-delay与animation的总时长的设置要协调
- stroke-dashoffset与stroke-dasharray的设置要协调
转自:https://segmentfault.com/a/1190000010963326
时间: 2024-10-08 21:46:37