首页 > 其他分享 >css 发光文字

css 发光文字

时间:2023-11-24 17:57:53浏览次数:23  
标签:文字 rgba 1px background 0% 发光 font css 255

      .textBox {
        font-family: "Microsoft YaHei";
        font-size: 28px;
        font-weight: bold;
        white-space: nowrap;
        line-height: 40px;
        background: linear-gradient(
          30deg,
          rgba(255, 255, 255, 0) 28%,
          rgba(245, 241, 194, 0.75) 42%,
          rgba(237, 63, 50, 0.87) 49%,
          rgba(255, 226, 188, 0.64) 56%,
          rgba(255, 255, 255, 0) 69%
        );
        background-size: 200% 200%;
        letter-spacing: 3.4px;
        animation: gradientBG 3s linear infinite;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
      }

      @keyframes gradientBG {
        0% {
          background-position: 0% 0%;
        }

        100% {
          background-position: 200% 0%;
        }
      }

 

标签:文字,rgba,1px,background,0%,发光,font,css,255
From: https://www.cnblogs.com/laremehpe/p/17854373.html

相关文章

  • 微信小程序 文字换行设置
    在wxml中的样式为block时,通过设置包裹文字的view的样式可达到换行,设置的属性为:word-break: break-word; 例:wxml和wxss<viewclass="text-format">超出的文字,超出的文字,超出的文字,超出的文字,超出的文字,超出的文字,<view>.text-form{word-break:break-word;......
  • HTML+CSS+Javascript+Vue
    TableofContentsI.HTMLII.CSSGetStartedI.HTML按tab自动生成LabelMeaningPropertiesdiv块状元素span行间元素h1-h6标题iicon图标strong字体加粗a超链接img插入图片video插入视频controlsinput表单(输入账号、......
  • 给ELement 穿梭框加表单必填项验证,提示文字总是存在问题。该页面有重复提交功能
    背景目前项目中form表单提交中有地方用到了穿梭框,穿梭框是必填项,需要rules验证是否选择了数据,一般穿梭框是change触发 问题但是选择change触发,会出现如下问题,也就是用户一选,下面就触发校验规则了,用户体验很差 尝试解决方案将校验触发改成blur,啊哈解决但是又碰到新的问......
  • CSS杂记
    .bigClass{  margin:200pxauto;保证金:200px自动;  width:500px;宽度:500px;  height:500px;高度:500px;  background-color:yellow;背景颜色:黄色;  display:flex;显示:柔体;  /*控制子容器位置*/  align-items:center;align......
  • word 一行文字平均间隔占一行
    最近做生成word的功能,发现修订内容,总是区区几个字就劈叉很大间隔占满一行,效果如下图其实是分散对齐的问题,可以选择将“修订内容:”单独作为一行,或者选择左对齐即可。......
  • 随机文字旋转
    <template><div><divclass="block_title"style="margin-bottom:12px;"><spanclass="title">预警关键词</span></div><svgstyle="margin:auto":width="width":heig......
  • css 水平垂直居中的几种方法
    水平垂直居中的几种方式记录一下容器内只有单一元素时居中的几种方式<divstyle="width:300px;height:300px"class="wrap"><divstyle="width:100px;height:100px"class="box"></div></div>1.容器flex,调整内部轴线.wrap{di......
  • CSS 尺寸单位概述
    在本文中,我们将探讨CSS尺寸单位的四大类别。我们将了解这些尺寸单位的用途、它们的最佳工作原理,以及如何在每种情况下选择最佳尺寸单位,从而在各种媒体和设备尺寸下优化我们的布局。关于CSS尺寸单位CSS提供了多种指定元素大小或长度的方式,其中一些更为直观。CSS单位可分......
  • Tailwind CSS 解决了什么问题?
    从页面样式设计的颗粒度Granularity来谈起元素颗粒度我们知道,构成网页页面元素的最底层,最原始的东西就是HTML&CSS为每一个元素指定不同的内联inline-style或者class来控制它的呈现方式,最细程度可以到元素的style属性来控制,颗粒度停留在元素<!DOCTYPEhtml><htmll......
  • 纯CSS实现炫酷文本阴影效果
    如图所示,这是一个文本阴影效果,阴影有多个颜色,鼠标悬停时文本阴影效果消失,文本回到正常的效果。让我们逐步分解代码,看看如何使用纯CSS实现这个效果的。基于以上动图可以分析出以下是本次实现的主要几个功能点:文本有多个颜色的阴影的效果文本有空心镂空的效果鼠标悬停时文本回......