1、html部分

<div class="container"><svg viewBox="0 0 1000 300"><symbol id="line-text"><text text-anchor="middle" x="50%" y="50%" dy=".4em">web前端工程师</text></symbol><use xlink:href="#line-text" class="text"></use><use xlink:href="#line-text" class="text"></use><use xlink:href="#line-text" class="text"></use><use xlink:href="#line-text" class="text"></use></svg>
</div>

2、css部分

* {padding: 0;margin: 0;
}body {background-color: rgb(41, 45, 62);
}.container {font-size: 120px;font-weight: bold;text-transform: uppercase;
}svg {position: absolute;width: 100%;height: 100%;
}.text {fill: none;stroke-width: 5;stroke-dasharray: 0 240;stroke-dashoffset: 0;
}.text:nth-child(4n + 1) {stroke: rgb(39, 135, 238);animation: text1 4s ease-in-out forwards;
}.text:nth-child(4n + 2) {stroke: rgb(47, 169, 92);animation: text2 4s ease-in-out forwards;
}.text:nth-child(4n + 3) {stroke: rgb(249, 189, 56);animation: text3 4s ease-in-out forwards;
}.text:nth-child(4n + 4) {stroke: rgb(235, 61, 50);animation: text4 4s ease-in-out forwards;
}@keyframes text1 {100% {stroke-dashoffset: 1000;stroke-dasharray: 60 180;}
}@keyframes text2 {100% {stroke-dashoffset: 1060;stroke-dasharray: 60 180;}
}@keyframes text3 {100% {stroke-dashoffset: 1120;stroke-dasharray: 60 180;}
}@keyframes text4 {100% {stroke-dashoffset: 1180;stroke-dasharray: 60 180;}
}

css实现入场动画、炫酷、跑马、流水相关推荐

CSS实现文字动画炫酷效果
span{//设置文字动画背景动图background:url(https://www.17sucai.com/preview/776331/2019-07-28/asw/img/giphy.gif) ...
【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果
写在前面关于CSS 3D的效果,我之前也分享过一些,在视频号上也有,当然,视频号上没有源码,有兴趣的小伙伴,可以跟着视频自己敲代码,当然,这些代码,我后面也会分享到我们的网站上,大家可以直接到网站上 ...
CSS实现8种炫酷按钮
今天给大家分享8种炫酷按钮的CSS实现. 1. 3D按钮1 现在的主流是扁平化的设计,拟物化的设计比较少见了,所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左.下两个 ...
button按钮的属性设置_web前端入门到实战：CSS实现8种炫酷按钮
今天给大家分享8种炫酷按钮的CSS实现. 1. 3D按钮1 现在的主流是扁平化的设计,拟物化的设计比较少见了,所以我们仅从技术角度去分析如何实现这个3D按钮该按钮的立体效果主要由按钮多出的左.下两个 ...
高级UI- 属性动画炫酷动画案例+淘宝动画+源码解析+策略模式使用
文章目录属性动画源码: 案例1 案例2 最终效果思路 : 代码 TODU 案例3 加载的炫酷动画. 以及策略模式的使用效果图思路动画分析先实现小圆的旋转动画, 开始在ondraw里面写动画 ...
【CSS】767- 我写炫酷 CSS 效果的常用套路
作者:alphardex 链接:https://juejin.im/post/6881546676188741645 前言前篇传送门:https://juejin.im/post/684490403 ...
html怎么做动态切换效果,使用CSS制作一个比较炫酷的页面切换动画
今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了 ...
css的rotate3d实现炫酷的圆环转动动画
1.实现效果 2.实现原理 2.1 rotate3d rotate3d:rotate3d() CSS 函数定义一个变换,它将元素围绕固定轴移动而不使其变形.运动量由指定的角度定义; 如果为正,运动将为 ...
Html+css+js实现的炫酷效果，你知道几个呢？
1.实现抽奖大转盘 Html如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-T ...

css实现入场动画、炫酷、跑马、流水

目录

1、html部分

2、css部分

css实现入场动画、炫酷、跑马、流水相关推荐

最新文章

热门文章