994399414SVG 入门 0 评论 176 阅读 2019-03-15 10:26:54 举报
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 使用 SVG + CSS 实现动态霓虹灯文字效果 </title>
- <style>
- .wrap{
- width:1100px;
- margin:200px auto;
- }
- #svgBox{
- width:100%;
- }
- .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;
- }
- }
- .svgText{
- width:600px;
- margin:0 auto;
- }
- .svgText h3{
- font-size:18px;
- color:#333;
- line-height:2;
- }
- .svgText p{
- font-size:16px;
- color:#888;
- line-height:2;
- }
- .svgText p a,.svgText p a:hover{
- color:#01a6fc;
- font-weight:600;
- }
- .svgText ul li{
- font-size:16px;
- color:#888;
- line-height:2;
- }
- </style>
- </head>
- <body>
- <div class="wrap">
- <div id="svgBox">
- <svg width="100%" height="100">
- <text text-anchor="middle" x="50%" y="50%" class="text text-1">
SVG + CSS 实现动态霓虹灯文字效果
- </text>
- <text text-anchor="middle" x="50%" y="50%" class="text text-2">
SVG + CSS 实现动态霓虹灯文字效果
- </text>
- <text text-anchor="middle" x="50%" y="50%" class="text text-3">
SVG + CSS 实现动态霓虹灯文字效果
- </text>
- <text text-anchor="middle" x="50%" y="50%" class="text text-4">
SVG + CSS 实现动态霓虹灯文字效果
- </text>
- </svg>
- </div>
- <div class="svgText">
- <h3 > 实现原理 </h3>
- <p > 对于一个形状 SVG 元素或文本 SVG 元素, 可以使用 stroke-dasharray 来控制描边的间隔样式, 并且可以用 stroke-dashoffset 来控制描边的偏移量, 借此可以实现描边动画效果. 本案例中, 多个 SVG 描边动画使用不同的 animation-delay 即可实现. 更具体的资料可以看看张大神的
- <a target="_blank" href="https://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-动画-路径/">《纯 CSS 实现帅气的 SVG 路径描边动画效果》</a></p>
- </div>
- <div class="svgText">
- <h3 > 需要注意的几个点 </h3>
- <ul>
- <li > 各个元素的 animation-delay 与 animation 的总时长的设置要协调 </li>
- <li> stroke-dashoffset 与 stroke-dasharray 的设置要协调 </li>
- </ul>
- </div>
- </div>
- </body>
- </HTML>
svg
评论
0
喜欢
2
赞
0
来源: http://www.qdfuns.com/note/19393/fcadaf10331ea4d3c352397bc920c84a.html