【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属性来指定阴影.这个属性可以有两个作用,产生阴影和模糊主 ...
随机推荐
- java、tomcat安装
今天记录下如何安装java和tomcat,毕竟作为开发人员换电脑或重装系统后都是要装好这些环境的. java的安装: 1.下载sdk,官网地址:https://www.oracle.com/techn ...
- Vue高仿网易云网页端源码
音乐播放器虽然烂大街了,但是作为前端没自己撸一个一直是个遗憾, 而且偶然间发现 pc 端 web 版的网易云音乐做的实在是太简陋了, 社区仿 pc 客户端的网易云也不多见,为了弥补这个遗憾, 就用 ...
- springmvc中使用文件下载功能
项目代码:https://github.com/PeiranZhang/springmvc-fileupload 使用文件下载步骤 对请求处理方法使用void或null作为返回类型,并在方法中添加Ht ...
- web服务器专题：tomcat（二）模块组件与server.xml 配置文件
web服务器专题:tomcat(二)模块组件与server.xml 配置文件 回顾: Web服务器专题:tomcat(一) 基础模块 一个Server.xml的实例 <?xml version= ...
- 个人微信公众号搭建Python实现 -个人公众号搭建-永久素材管理（14.3.5)
@ 目录 1.说明 2.上传素材 3.获取素材列表 关于作者 1.说明 个人微信公众号开发的功能有限,因为很多权限没有,但支持上传永久素材,具体查看微信公众号文档 这里的请求都要将本地IP地址放到微信 ...
- Nessus<强大的漏扫工具>
刷漏洞,抓鸡必备,,,,,,, 参考文章: https://blog.csdn.net/wwl012345/article/details/96998187 肝,,,,太全了,,, ps : 我不是脚 ...
- Hive中的集合数据类型
除了使用础的数据类型string等,Hive中的列支持使用struct, map, array集合数据类型. 数据类型 描述 语法示例 STRUCT 和C语言中的struct或者"对象&qu ...
- Angular入门，开发环境搭建，使用Angular CLI创建你的第一个Angular项目
前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...
- Python批量创建word文档（1）- 纯文字
Python创建word文档,任务要求:小杨在一家公司上班,每天都需要给不同的客户发送word文档,以告知客户每日黄金价格.最后贴上自己的联系方式.代码如下: 1 ''' 2 #python根据需求新 ...
- C# 队列Queue，ConcurrentQueue，BlockingCollection 并发控制lock，Monitor，信号量Semaphore
什么是队列? 队列Queues,是一种遵循先进先出的原则的集合,在.netCore中微软给我们提供了很多个类,就目前本人所知的有三种,分别是标题提到的:Queue.ConcurrentQueue.Bl ...