css阴影实现文字氛围酒吧氦灯效果

神奇大叔

于 2021-10-11 16:28:41 发布

阅读量232

点赞数

分类专栏：我有奇妙动画文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_43294560/article/details/120705909

版权

我有奇妙动画专栏收录该内容

43 篇文章 4 订阅

订阅专栏

基架:阴影
氛围灯:添加多层模糊距离加大的阴影,实现笼罩效果,模糊距离越大中间的文字越淡越清晰
可以通过filter: brightness(110%);增加文字亮度

代码示例:

 .orange {
     color: #ff5722;
 }
 
 .orange:hover {
     animation: orange .5s ease-in-out backwards;
 }
 
 @keyframes orange {
     to {
         text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff5722, 0 0 70px #ff5722, 0 0 80px #ff5722, 0 0 100px #ff5722, 0 0 150px #ff5722;
         
     }
     from {
         filter: brightness(110%);
         text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff5722, 0 0 35px #ff5722, 0 0 40px #ff5722, 0 0 50px #ff5722, 0 0 75px #ff5722;
     }
 }
	
 <div>
     <p class="pink">PINK</p>
 </div>
 <div>
     <p class="orange">Box-Shadow</p>
 </div>
 <div>
     <p class="yellow">YELLOW</p>
 </div>