当前位置:首页 > 技术博客 > CSS > CSS字体动画渐变效果

CSS字体动画渐变效果

admin1年前 (2022-05-12)CSS921


这是一款个性新颖的css文字特效代码,css字体渐变效果,画面中的文字不仅呈现颜色的渐变效果且伴随炫酷的闪烁效果。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CSS字体动画渐变效果</title>
    <style>
      body {
        background: rgb(197, 196, 196);
        margin: 0;
      }
      main {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .text {
        background: url(/zb_users/upload/2023/09/20230919023723169506224356174.webp);
        background-size: contain;
        background-position: top left;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 10rem;
        font-weight: bold;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="text">LiuZhiXi.CN</div>
    </main>
  </body>
</html>


版权声明:本文由 LzxBlog 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/257.html

标签: CSS渐变文字

相关文章

拟物风格创意的开关按钮切换特效

拟物风格创意的开关按钮切换特效

使用css3 svg js制作立体的灰白色按钮开关,点击on/off开关按钮切换动画特效。body {   font-famil...

css颜色渐变数值调试

css颜色渐变数值调试

<style> :root {   --color-background: #e8e0fd; &nbs...

炫酷的登录注册表单切换代码

炫酷的登录注册表单切换代码

基于CSS3属性制作创意的登录注册表单样式,酷炫的登录/注册表单ui特效。下载链接: https://pan.baidu.com/s/1hhpCnROFc0gT...

3D文字关注动画页面

3D文字关注动画页面

使用css3 keyframes 属性制作蓝色大气的感谢关注3D数字动画特效。适用于404或引导页。<style> @import ur...

让网站支持苹果的 黑暗模式(深色Dark模式)

让网站支持苹果的 黑暗模式(深色Dark模式)

prefers-color-scheme 用于检测用户的系统主题是浅色或深色,此属性有三个值no-preference 表示用户未指定操作系统模式,其...

CSS原子环绕标志动画

CSS原子环绕标志动画

CSS原子环绕标志动画<head> <meta charset="UTF-8"> <meta...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。
X 要酷!乐于助人,网络是一个神奇的地方,玩得愉快,击掌