效果"/>
css svg 描边动画效果
svg实现的一个微不足道的描边效果：
线条是运动着的，以下是png,本应放gif来着
颜色看起来有点乱，哈哈
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>流光</title><style>.text{fill:#eee;font-size: 80px;}.text1{stroke: #f00;animation: slide1 5s linear infinite;}@keyframes slide1{0%{stroke-dashoffset: -0;}100% {stroke-dashoffset: 125;}}.text2{stroke: #f33;animation: slide2 5s linear infinite;}@keyframes slide2{0%{stroke-dashoffset: -35;}100% {stroke-dashoffset: 160;}}.text3{stroke: #f66;animation: slide3 5s linear infinite;}@keyframes slide3{0%{stroke-dashoffset: -70;}100% {stroke-dashoffset: 195;}}.text4{stroke: #faa;animation: slide4 5s linear infinite;}@keyframes slide4{0%{stroke-dashoffset: -105;}100% {stroke-dashoffset: 230;}}</style>
</head>
<body><div class="svg_wrap"><svg xmlns="" version="1.1" width="600px;height: 300px;"><text class="text text1" x="50" y="100"stroke-dasharray="35 135" >细草微风岸，平林月未满</text><text class="text text2" x="50" y="100"stroke-dasharray="35 135" >细草微风岸，平林月未满</text><text class="text text3" x="50" y="100"stroke-dasharray="35 135" >细草微风岸，平林月未满</text><text class="text text4" x="50" y="100"stroke-dasharray="35 135" >细草微风岸，平林月未满</text></svg></div>
</body>
</html>
更多推荐
css svg 描边动画效果
发布评论