CSS动画效果、文字渐变过渡效果、文本阴影

最新推荐文章于 2024-10-07 23:36:42 发布

Just-MenHee

最新推荐文章于 2024-10-07 23:36:42 发布

阅读量6.5k

点赞数 3

文章标签： css3动画文字渐变效果颜色过度效果文字渐变动画 css渐变

本文链接：https://blog.csdn.net/weixin_39417767/article/details/82116421

版权

写了一个文字渐变的动画效果,纯CSS动画.文字加了一点阴影效果,看起来有发光哒感觉~

效果如下图

这里因为是截图,所以没有办法看到动态的效果.大家可以拷贝我下面的代码自己试一试

代码看下面

html

<div class="son">			
	Particia
</div>

css

.son {
    color: #5BA6DF;
    text-shadow: 1px 1px 10px #5BA6DF;
    background-image: -webkit-linear-gradient(left, #2EC7C9, #E6D205 25%, #2EC7C9 50%,         #E6D205 75%, #2EC7C9 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
    font-family:Chaparral Pro Light;
	letter-spacing:2px;
	font-size:56px;
  }


 @keyframes masked-animation {
            0% {
                background-position: 0 0;   
            }
            100% {
                background-position: -100% 0;
            }
        }