HTML CSS 发光字头特效

这篇具有很好参考价值的文章主要介绍了HTML CSS 发光字头特效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果展示:

HTML CSS 发光字头特效,css3,css,前端文章来源地址https://www.toymoban.com/news/detail-814715.html

代码:

<html>
  <head> </head>
  <style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
      text-align: center;
    }
    h1{
        /* border: 3px solid rgb(201, 201, 201); */
        margin-bottom: 20px;
    }
    .hcqFont {
      position: relative;
      letter-spacing: 0.07em;
      font-weight: normal;
      margin: 0 auto;
    }
    .hcqFont:before,
    .hcqFont:after {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }
    .hcqStyle1 {
      color: hsl(184, 80%, 25%);
      text-shadow: 0 0 1px currentColor,
        /*highlight*/-1px -1px 1px hsl(184, 80%, 50%),
        0 -1px 1px hsl(184, 80%, 55%), 1px -1px 1px hsl(184, 80%, 50%),
        /*light shadow*/ 1px 1px 1px hsl(184, 80%, 10%),
        0 1px 1px hsl(184, 80%, 10%), -1px 1px 1px hsl(184, 80%, 10%),
        /*outline*/-2px -2px 1px hsl(184, 80%, 15%),
        -1px -2px 1px hsl(184, 80%, 15%), 0 -2px 1px hsl(184, 80%, 15%),
        1px -2px 1px hsl(184, 80%, 15%), 2px -2px 1px hsl(184, 80%, 15%),
        2px -1px 1px hsl(184, 80%, 15%), 2px 0 1px hsl(184, 80%, 15%),
        2px 1px 1px hsl(184, 80%, 15%), -2px 0 1px hsl(184, 80%, 15%),
        -2px -1px 1px hsl(184, 80%, 15%), -2px 1px 1px hsl(184, 80%, 15%),
        /*dark shadow*/ 2px 2px 2px hsl(184, 80%, 5%),
        1px 2px 2px hsl(184, 80%, 5%), 0 2px 2px hsl(184, 80%, 5%),
        -1px 2px 2px hsl(184, 80%, 5%), -2px 2px 2px hsl(184, 80%, 5%);
    }
    .hcqStyle2 {
      display: inline-block;
      font-weight: bold;
      color: #def;
      text-shadow: 0 0 1px currentColor, -1px -1px 1px #000, 0 -1px 1px #000,
        1px -1px 1px #000, 1px 0 1px #000, 1px 1px 1px #000, 0 1px 1px #000,
        -1px 1px 1px #000, -1px 0 1px #000;
      -webkit-filter: url(#diff1);
      filter: url(#diff1); /*background:#def;padding:0 .2em*/
    }
    .hcqStyle3 {
      background: #eee
        url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC)
        repeat;
      text-shadow: 5px -5px black, 4px -4px white;
      font-weight: bold;
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
    }
    .hcqStyle4 {
      color: transparent;
      -webkit-text-stroke: 1px red;
      letter-spacing: 0.04em;
    }
    .hcqStyle5 {
      color: transparent;
      background-color: blue;
      text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px,
        rgba(255, 255, 255, 0.2) 1px 3px 3px;
      -webkit-background-clip: text;
    }
    .hcqStyle6 {
      color: gold;
      letter-spacing: 0;
      text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777,
        0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333,
        0px 8px 7px #001135;
    }
    .hcqStyle7 {
      font-family: cursive;
      text-shadow: 6px 2px 2px #333;
      color: deeppink;
    }
    .text-reflect-base {
      color: palegreen;
      -webkit-box-reflect: below 10px;
    }
    .text {
        margin-top: 50px;
      background-image: -webkit-linear-gradient(
        left,
        blue,
        #66ffff 10%,
        #cc00ff 20%,
        #cc00cc 30%,
        #ccccff 40%,
        #00ffff 50%,
        #ccccff 60%,
        #cc00cc 70%,
        #cc00ff 80%,
        #66ffff 90%,
        blue 100%
      );
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-background-size: 200% 100%;
      -webkit-animation: masked-animation 4s linear infinite;
    }
    @keyframes masked-animation {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: -100% 0;
      }
    }
  </style>
  <body>
    <h1 class="hcqFont hcqStyle1">hcqStyle1 hello world !</h1>
    <h1 class="hcqFont hcqStyle2">hcqStyle2 hello world!</h1>
    <h1 class="hcqStyle3">hcqStyle3 hello world!</h1>
    <h1 class="hcqStyle4">hcqStyle4 hello world!</h1>
    <h1 class="hcqStyle5">hcqStyle5 hello world!</h1>
    <h1 class="hcqStyle6">hcqStyle6 hello world!</h1>
    <h1 class="hcqStyle7">hcqStyle7 hello world!</h1>
    <h1 class="text-reflect-base">text-reflect-base hello world!</h1>
    <h1 class="text">text hello world!</h1>
  </body>
</html>

到了这里,关于HTML CSS 发光字头特效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 15.CSS发光按钮的悬停特效

    css

    2024年02月10日
    浏览(31)
  • 超好看的前端特效HTML特效、CSS特效、JS特效(第一期)

    1. 粒子组成文字动画特效 文件组成: base.css demo.css bcg.jpg demo.js demo.scss index.html 2. 爱心表白特效 文件组成: heart.svg index.html 3. 爱心跟随鼠标 index.html 4. 满屏漂浮爱心 index.html 5. 黑客帝国矩阵雨 index.html 6. 2024新年快乐动画特效 文件目录: style.css script.js index.html 7. 表白特效

    2024年02月19日
    浏览(51)
  • 前端 | ( 十一)CSS3简介及基本语法(上) | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(49)
  • h5(html5)+css3前端笔记二

    一、表格标签 表格的主要作用: 表格主要用于 显示、展示数据 ,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 1. table/table 用来定义表格的标签

    2024年02月14日
    浏览(65)
  • 【前端基础篇】HTML5 + CSS3 入门知识

    万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation) HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简

    2024年02月09日
    浏览(78)
  • 前端 | ( 十三)CSS3简介及基本语法(下)| 伸缩盒模型 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(64)
  • 前端:运用html+css+js模仿京东上商品图片区域放大特效

    1. 前言 最近在网页端浏览京东上的商品时,觉得上面的那张gif图片上实现的特效不错,于是自己打算使用html+css+js技术来实现一下上述特效效果,我的实效果如下: 2. 前端界面 主要使用到浮动、绝对定位、相对定位等知识,不了解这部分知识点的读者可以先去了解了解,再

    2024年02月16日
    浏览(56)
  • 前端 | ( 十二)CSS3简介及基本语法(中)| 变换、过渡与动画 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(48)
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS的定位机制 文档流定位 元素类型   浮动定位 float的用处 float的特点 clear属性 层定位 position属性

    2024年02月05日
    浏览(72)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包