推荐一个前端呼吸效果文本动画
采用了html和css动画,有开发能力的同学可以参考移植,效果如下:【其他颜色可以自行添加,实现彩虹变换】
下面是源码,仅供参考:
- <style>
-
- a {
- text-align: center;
- font-size: 7em;
- margin-bottom: 0;
- margin-top: 0;
- line-height: 1;
- text-decoration: none;
- color: #fff;
- }
-
-
- a:nth-child(1) {
- font-family: Vampiro One;
- animation: neon1 1.5s ease-in-out infinite alternate;
- }
-
-
- @keyframes neon1 {
- from {
- text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de,
- 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
- }
- to {
- text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de,
- 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 75px #ff00de;
- }
- }
-
- </style>
- <div id="container">
- <a href="https://en.wikipedia.org/wiki/Violet_(color)">
- VIOLET
- </a>
- </div>