【Web】CSS实现抖音风格字体效果（设置文本阴影）
简单记录 -慕课网- 步骤一：抖音风格字体效果
案例：抖音风格的字体特效。
实现这个
需要设置
- 网页背景颜色
- 字体颜色
- 字体大小
- 文本阴影
重点介绍如何设置文本阴影
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实现抖音风格字体效果（设置文本阴影）的更多相关文章
- CSS 中的字体兼容写法：用CSS为英文和中文字体分别设置不同的字体
font-family的调用方法: font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px/.75em ...
- CSS为英文和中文字体分别设置不同的字体
font-family的调用方法: div { font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font:bold 12px ...
- 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
- CSS笔记（五）字体
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母). 参考:http://www.w3school.com.cn/css/css_font.asp CSS字体系列 ...
- CSS中使用文本阴影与元素阴影
文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
- 抖音抖一抖-SVG和CSS视觉故障艺术小赏
故障艺术,英文名称叫glitch,在很多赛博朋克作品中经常看到,其实就是故意表现一种显示设备的小故障效果,抖音的图标其实就是这种的效果,我们看下这个图标 这个图标中的红色和蓝色的偏移其实就是一种故障艺 ...
- 抖音web端 s_v_web_id 参数生成分析与实现
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! 抖音web端 s_v_web_id 参数 ...
- 一个类似抖音 APP 拍摄按钮效果的控件
TouchButton 一个类似抖音 APP 拍摄按钮效果的控件 效果图预览 用法 <net.angrycode.library.TouchButton android:id="@+i ...
- CSS 字体效果
text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影.这个属性可以有两个作用,产生阴影和模糊主 ...
随机推荐
- 06 python开发之函数
06 python开发之函数 目录 06 python开发之函数 6 函数 6.1 基本使用 6.1.1 基本概念 6.1.2 定义函数 6.2 调用函数与函数返回值 6.2.1 调用函数三种形式 6 ...
- typora软件使用指南
Markdown学习 标题: 三级标题 四级标题 字体 hello,world! hello,world! hello,world! hello,world! 引用 选择狂神说java,走向人生巅峰 ...
- 11g RAC开启归档模式
1.关闭集群数据库 [oracle@rac01-+ASM1 ~]$ srvctl stop database -d rac 2.开启节点一数据库到mount状态 SQL> startup mou ...
- f12 Network的解析
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...
- HashMap 中 Key 类型的选择
什么对象可以作为HashMap的key值? 从HashMap的语法上来讲,一切对象都可以作为Key值.如:Integer.Long.String.Object等.但是在实际工作中,最常用的使用Stri ...
- windows jupyter lab中.ipynb转中文PDF
在jupyter lab中,File-Export Notebook as-Export Notebook to PDF,可以导出成PDF格式的文档,但在操作前需要安装些程序.1. 安装pandocA ...
- 多任务-python实现-迭代器相关（2.1.12）
@ 目录 1.需求 2.斐波那契数列演示 3.并不是只有for循环能接收可迭代数据类型,list,tuple也可以 1.需求 类比 早上起来吃包子 1.买1年的包子,放在冰箱,每天拿一个 2.每天下楼 ...
- Ubuntu命令集（持续更新）
Ubuntu命令集,生活工作汇总,没有顺序.(持续更新...) 1 pwd:没有参数,在终端现实我们当前所处的文件夹位置:ctrl+l:清除当前终端屏: 2 --------------------- ...
- Pygal之掷骰子
python之使用pygal模拟掷骰子创建直方图: 1,文件die.py,源码如下: 1 from random import randint 2 3 class Die(): 4 '''表示一个骰子 ...
- Core3.0部署后访问接口提示500.30
前言 在localhost直接运行的时候正常,发布之后访问就一直提示500.30 可能原因 app.UseExceptionHandler入参值 1.查看日志 大致提示Startup.cs的某个参数配 ...