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

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

实现这个



需要设置

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

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

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. Chrome中Console使用技巧

    1.使用Jquery 先在控制台执行一下 ;(function(d,s){d.body.appendChild(s=d.createElement('script')).src='https://cd ...

  2. 学好Spark/Kafka必须要掌握的Scala技术点（一）变量、表达式、循环、Option、方法和函数，数组、映射、元组、集合

    前言 Scala是以JVM为运行环境的面向对象的函数式编程语言,它可以直接访问Java类库并且与Java框架进行交互操作.正如之前所介绍,Spark是用Scala语言编写的,Kafka server端 ...

  3. 【面试专栏】Java并发编程：volatile关键字

    1.  内存模型 若一个变量在多线程环境下同时操作,则可能出现结果不一致的情况.这就是常说的缓存不一致性问题. 解决缓存不一致问题,通常有两个解决方案: 通过在总线加LOCK#锁的方式 因为CPU和其 ...

  4. 初始化CentOS7

    安装CentOS7 配置网络 # 修改网络配置 vi /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE="Ethernet" PROX ...

  5. 网站开发学习Python实现-Django项目部署-介绍(6.2.1）

    @ 目录 1.第一步:找源码 2.第二步:在windows中更改代码 2.第三步:同步到linux中 3.第三步:部署 4.第四步:运行 关于作者 1.第一步:找源码 从github上找一个djang ...

  6. Yii 文件上传类的使用

    https://segmentfault.com/a/1190000009674814 以上链接的文章已经写的很好了,一目了然,这里不再多做说明. 补充:当执行 UploadedFile->sa ...

  7. 流程控制之☞ while 和 for 的故事

    学习三连鞭... 什么是循环? 为什么要有循环? 如何用循环? 循环的基本语法:while   和     for 先来看while循环: while条件:首先得是个循环体. 1.如果条件为真,那么循 ...

  8. Python利用pandas处理数据后画图

    pandas要处理的数据是一个数据表格.代码: 1 import pandas as pd 2 import numpy as np 3 import matplotlib.pyplot as plt ...

  9. Python字符串常用的一些东西

    字符串的常用方法dir(str).查看某一方法的用法help(str.xxx). 1,索引和切片: 2,len():查看字符串的总长度. 3,+,拼接一个或多个字符串. 4,in,判定字符是否在字符串 ...

  10. ASP.NET Core Web 支付功能接入 微信-扫码支付篇（转）

    原文 https://www.cnblogs.com/essenroc/p/8630730.html // 随着版本更迭,新版本可能无法完全适用,请参考仓库内的示例. 这篇文章将介绍ASP.NET C ...