简单记录 -慕课网- 步骤一：抖音风格字体效果

案例：抖音风格的字体特效。

实现这个



需要设置

  • 网页背景颜色
  • 字体颜色
  • 字体大小
  • 文本阴影

重点介绍如何设置文本阴影

CSS的文本阴影text-shadow属性

  • 无扩散的阴影：text-shadow： 水平偏移量 垂直偏移量 颜色；例如：text-shadow: -1px -3px #ff00de

    三个参数 阴影颜色 水平偏移量 垂直偏移量

  • 扩散阴影 ：text-shadow: 水平偏移量 垂直偏移量 模糊半径 颜色 ; 例如：text-shadow: 0 0 20px #2addfd ;

    模糊半径如果没有指定数值，则默认为0，值越大，模糊半径越大，阴影也就越大越淡。

text-shadow: -1px -3px #ff00de

第一个参数水平偏移量，负数代表水平向左偏移 ，正数代表水平向右偏移 0px就是不偏移，这里-1px就是水平向左偏移1px。

第一个参数垂直偏移量，负数代表水平向上偏移 ，正数代表水平向下偏移 0px就是不偏移。这里-3px就是水平向上偏移3px。

实现：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>抖音风格字体效果</title>

    <style>

        body{

            background-color:gray;

        }

        h1{

            font-size:32px;

            color:white;

            text-shadow: red -1px -3px;

        }

        h2{

            font-size:64px;

            color:white;

            text-shadow:#ff00de -2px -4px  , #2addfd 4px 0px;

        }

        h3{

            font-size:32px;

            color:white;

            text-shadow:#ff00de -1px -3px ;

        }

        h4{

            font-size:64px;

            color:white;

            text-shadow:#ff00de -1px -3px  ,  0 0 20px #2addfd ;

        }

        h5{

            font-size:64px;

            color:white;

            text-shadow: 0 0 20px #2addfd ;

        }

    </style>

</head>

<body>

<h1>落霞与孤鹜齐飞 </h1>

<h2>秋水共长天一色</h2>

<h3>老当益壮，宁移白首之心？</h3>

<h4>穷且益坚，不坠青云之志。</h4>

<h5>你好呀你好呀你好呀</h5>

</body>

</html>

效果：

【Web】CSS实现抖音风格字体效果（设置文本阴影）的更多相关文章

  1. CSS 中的字体兼容写法：用CSS为英文和中文字体分别设置不同的字体

    font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/.75em ...

  2. CSS为英文和中文字体分别设置不同的字体

    font-family的调用方法: div { font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px ...

  3. 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

    一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...

  4. CSS笔记（五）字体

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母). 参考:http://www.w3school.com.cn/css/css_font.asp CSS字体系列 ...

  5. CSS中使用文本阴影与元素阴影

    文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...

  6. 抖音抖一抖-SVG和CSS视觉故障艺术小赏

    故障艺术,英文名称叫glitch,在很多赛博朋克作品中经常看到,其实就是故意表现一种显示设备的小故障效果,抖音的图标其实就是这种的效果,我们看下这个图标 这个图标中的红色和蓝色的偏移其实就是一种故障艺 ...

  7. 抖音web端 s_v_web_id 参数生成分析与实现

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! 抖音web端 s_v_web_id 参数 ...

  8. 一个类似抖音 APP 拍摄按钮效果的控件

    TouchButton 一个类似抖音 APP 拍摄按钮效果的控件 效果图预览 用法 <net.angrycode.library.TouchButton android:id="@+i ...

  9. CSS 字体效果

    text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影.这个属性可以有两个作用,产生阴影和模糊主 ...

随机推荐

  1. Redis数据持久化（RDB、AOF）

    1. 简介   Redis作为内存型数据库,数据都保存在内存中,如果重启或意外宕机后,数据会全部丢失.因此,Redis提供了完善的持久化机制,将内存中的数据持久化到磁盘上,避免了完整性和安全性的问题, ...

  2. 关于Java Integer和Long直接比较

    Integer和Long不能直接equals比较会返回False Long.class源码 ` public boolean equals(Object obj) { if (obj instance ...

  3. matplotlib的学习2-基本用法

    import matplotlib.pyplot as plt import numpy as np x = np.linspace(-1, 1, 50)#范围-1 到 1,个数是50 y = 2*x ...

  4. 一个简单的CSS示例

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 & ...

  5. C#动态实体集的反序列化（动态JSON反序列化）

    一.使用场景 我们在将 JSON 反序列化实体集的时候,如果字段是固定的,那么我们序列化非常简单,对应字段写的实体集就可以了.比如下面这种: { "data":[ { " ...

  6. 关于Git的一些常规操作

    最近刚换了新的办公电脑,Git有重新安装了一遍,很多步骤久了不操作就忘了,又是好一顿折腾,于是这次就顺便记下来了. 不错的Git教程: https://www.liaoxuefeng.com/wiki ...

  7. 1.Redis基础命令

    重要概念 redis是单线程模型,所有命令都会进入一个队列,然后依次被执行. 全局命令 >>>select dbindex #切换数据库,默认有16个库,库标识符为0-15 > ...

  8. java 字符串String.intern()方法学习

    在jdk1.6与jdk1.7中,String类中的intern()方法实现的原理是有一些差异的.1.在jdk1.6中,intern()方法是先查找字符串常量池是否含有当前字符串,如果没有,那么就在字符 ...

  9. SQL Server中datetimeset转换datetime类型问题浅析

    在SQL Server中,数据类型datetimeoffset转换为datetime类型或datetime2类型时需要特别注意,有可能一不小心你可能会碰到下面这种情况.下面我们构造一个简单案例,模拟一 ...

  10. JPDA 远程调试方法记录

    一.JPDA概念 JPDA(Java platform debugger architecture)是java平台调试架构的简称,由java虚拟机后端和调试平台前端组成. 1.java虚拟机提供了ja ...