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

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

实现这个



需要设置

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

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

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. sqli-labs less32-37(宽字节注入)

    less-32 Bypass addslashes() less-33 Bypass addslashes() less-34 Bypass Add SLASHES less-35 addslashe ...

  2. postgresql修改postgres用户密码

    [postgres@pg01 ~]$ psql -Upostgres -dpostgres postgres=# alter user postgres with password 'postgres ...

  3. masterha_check_repl --conf=/etc/mha/app1.cnf检查错误

    [mysql@node3 ~]$ masterha_check_repl --conf=/etc/mha/app1.cnf Tue Jul 7 22:43:26 2020 - [warning] Gl ...

  4. 为了Java微信支付V3开发包，我找出了微信支付文档至少六个错误

    1. 前言 最近忙的一批,难得今天有喘气的机会就赶紧把最近在开发中的一些成果分享出来.前几日分享了自己写的一个微信支付V3的开发包payment-spring-boot-starter,就忙里偷闲完善 ...

  5. 去掉RedisDesktopManager更新提示弹窗

    去掉RedisDesktopManager更新提示弹窗 起因 每次打开RDM都要弹出一个更新提示弹窗,虽然打开次数不频繁,总是有个弹窗再点一次OK按钮,还不能设置关闭更新检查.更新下载还要各种登录麻烦 ...

  6. 蒲公英 &#183; JELLY技术周刊 Vol.34: 芜湖～ Flutter

    蒲公英 · JELLY技术周刊 Vol.34 提及跨端,你能想到那些技术?PWA.小程序.Ionic.React Native.Weex--当然也少不了 Flutter,历时 3 年,Flutter ...

  7. linux之文本编辑器vi常用命令

    由于经常在linux下面文本操作,所以这里稍微系统的总结一下自己常用的vi命令 1.打开命令: vi+filename  (还有各种打开的姿势,只不过我比较顺手这个) 2.退出命令: :q   退出而 ...

  8. 深入解析 C# 的 String.Create 的方法

    作者:Casey McQuillan 译者:精致码农 原文:http://dwz.win/YVW 说明:原文比较长,翻译时精简了很多内容,对于不重要的细枝末节只用了一句话概括,但不并影响阅读. 你还记 ...

  9. （30）ASP.NET Core3.1 集成Apollo快速安装与使用

    1.介绍 Apollo(阿波罗)是携程框架部研发并开源的一款生产级的配置中心产品,它能够集中管理应用在不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用 ...

  10. Java进阶专题(二十) 消息中间件架构体系（2）-- RabbitMQ研究

    前言 接上文,这个继续介绍RabbitMQ,并理解其底层原理. 介绍 RabbitMQ是由erlang语言开发,基于AMQP(Advanced Message Queue 高级消息队列协议)协议实现的 ...