【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属性来指定阴影.这个属性可以有两个作用,产生阴影和模糊主 ...
随机推荐
- JVM的艺术—类加载器篇（三）
JVM的艺术-类加载器篇(三) 引言 今天我们继续来深入的剖析类加载器的内容.上篇文章我们讲解了类加载器的双亲委托模型.全盘委托机制.以及类加载器双亲委托模型的优点.缺点等内容,没看过的小伙伴请加关注 ...
- js-enter提交表单导致页面刷新问题
问题:当页面只有一个文本框时,使用键盘enter操作执行提交表单的时候,会导致页面进行刷新,并且参数也会自动添加到url中. 解决办法: 1.给form添加onsubmit=return false; ...
- Vue：对axios进行简单的二次封装
主要做3点: 1.配置一个请求地址前缀 2.请求拦截(在请求发出去之前拦截),给所有的请求都带上 token 3.拦截响应,遇到 token 不合法则报错 // 对 axios 的二次封装 impor ...
- 关于C++的异常抛出
在接触 throw 之前,我们只知道可以通过函数的返回值来获取和定位错误,比如通过 return 来层层返回是一种方法,但如果牵扯到多层函数调用,那么通过 return 来返回错误显得过于拖沓,这时就 ...
- C++异常之七 标准库里的异常类
标准库里的异常类 C++标准提供了一组标准异常类,这些类以基类 Exception 开始,标准程序库抛出的所有异常,都派生于该基类,这些类构成如图所示的异常类的派生继承关系,该基类提供一个成员函数 w ...
- Jenkins的war包安装
安装Jenkins首先要安装jdk,在官网下载jdk安装并配置环境变量 1.Jenkins下载地址,下载war包 https://www.jenkins.io/download/ 2.打开命令行窗口, ...
- Python最会变魔术的魔术方法，我觉得是它！
在上篇文章中,我有一个核心的发现:Python 内置类型的特殊方法(含魔术方法与其它方法)由 C 语言独立实现,在 Python 层面不存在调用关系. 但是,文中也提到了一个例外:一个非常神秘的魔术方 ...
- 记录一次mac访问Windows共享目录失败
一,起因 起因,有人联系我说他们的mac电脑连接不上Windows的共享目录,Windows的电脑连接正常,没有报错,连接框抖两下就没了 二,排查问题 1,我自己想mstsc登陆服务器看看,结果服务器 ...
- Grafana 备份恢复教程
原文链接:https://fuckcloudnative.io/posts/how-to-back-up-all-of-your-grafana-dashboards/ 目前我们 k8s 集群的 Gr ...
- 08-flask-使用pymysql
代码 from flask import Flask from flask import render_template import pymysql # 创建flask对象 app = Flask( ...