【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属性来指定阴影.这个属性可以有两个作用,产生阴影和模糊主 ...
随机推荐
- 面试 HTTP和HTML 浏览器
HTTP和HTML 浏览器 #说一下http和https #参考回答: https的SSL加密是在传输层实现的. (1)http和https的基本概念 http: 超文本传输协议,是互联网上应用最为广 ...
- B. Navigation System【CF 1320】
传送门 题目:简单理解就是,我们需要开车从s点到t点.车上有一个导航,如果当前点为x,则导航会自动为你提供一条从x到t的最短的路线(如果有多条,则随机选一条),每走到下一个点则会实时更新最短路线,当然 ...
- 关于BAPI_ACC_DOCUMENT_POST解读
BAPI_ACC_DOCUMENT_POST是SAP ERP提供生成会计凭证的标准BAPI,这个BAPI可以用到多种场景生成会计凭证,实际项目中一般情况下更多的是生成应收和应付的会计凭证,分别对应客户 ...
- Arduino PROGMEM 从程序空间读取float值的方法
方法: 使用avr-libc提供的宏定义: #define pgm_read_float_near(address_short) __LPM_float((uint16_t)(address_shor ...
- Python利用openpyxl带格式统计数据（2）- 处理mysql数据
上一篇些了openpyxl处理excel数据,再写一篇处理mysql数据的,还是老规矩,贴图,要处理的数据截图: 再贴最终要求的统计格式截图: 第三贴代码: 1 ''' 2 #利用openpyxl向e ...
- Tensorflow环境配置&安装
Tensorflow环境配置&安装 明知故犯,是不想有遗憾. 背景:Tensorflow 环境配置和安装. 一.安装 Anaconda 二.建立.激活.安装.验证.使用 Tensorflow ...
- [.NET] - 初步认识AutoMapper
初步认识AutoMapper AutoMapper 初步认识AutoMapper 前言 手动映射 使用AutoMapper 创建映射 Conventions 映射到一个已存在的实例对象 前言 通常 ...
- 【程序包管理】篇章2：rpm程序包来源合法和完整性验正
来源合法性验正: 数字签名 私钥签名完整性 哈希 注意: 1.如果是网站下载的程序包的话,没有公钥,就无法进行来源合法性验证,所以最好使用系统自带的rpm程序包或去可靠的网站下载程序包.[如 ...
- Linq基础知识
开发人员不需要关心将要访问的是关系数据库还是XML数据,或是远程对象,它都采用同样的访问方式. Linq包含一系列的查询技术,其中Linq到对象是对内存进行操作,LINQ到SQL是对数据库的操作,LI ...
- 各公有云1核1G的云主机跑分对比
本文主要测评华为云.腾讯云.阿里云 1H1G服务器的性能,为保证结果有效性,使用环境如下: 1.1H1G Ubuntu 16.04_x64 2.Unixbench Version 5.1.3,详细信息 ...