【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实现抖音风格字体效果（设置文本阴影）相关推荐

免费直播！真.零基础能学会的前端入门教程，还带实操抖音风格字体特效！
茫茫职海中,有没有那么一个又简单又赚钱的行业呢? 答案:前端!!! 前端是进入技术行业的一个捷径,规划好能事半功倍. 1.前端门槛低,简单易学: 2.应用场景广泛,现已涉及到了各个领域: 3.市场需求 ...
抖音风格故障效果PSD图层+剪辑设计必备
正文: 超级火爆的抖音风格故障效果PSD图层,剪辑设计必备,是一个PSD图层,我们只需要把要处理的图片插入到背景图层下方即可实现一些故障风效果. PSD源码: wwbef.lanzout.com/iO ...
现在抖音这么火，那么你知道如何用CSS实现抖音字体？
比如这种抖音字体是不是感觉很酷,它是如何实现的呢,下面孙叫兽就简单分享一下CSS的实现方法,记得点赞收藏. 老司机给大家的一些小建议,一定要敲代码敲代码敲代码(重要的事情说三遍),程序员是实战家,不是 ...
最简单的方法快速生成抖音风格文字——使用HTML和CSS代码
最简单的方法快速生成抖音风格文字--用HTML和CSS代码大家好! 这是我第一次与大家分享心得.希望能与大家共同学习.共同提升. 抖音作为近年来大火的APP,其具有特色的图标和字体收到了不少人的喜爱 ...
手把手教你撸一个能生成抖音风格动图的gif制作平台
前言又到了一周一次的周总结, 笔者基于之前的开源项目 blink , 开发了一款能在线配置故障艺术, 并一键生成gif动图的平台, 这里暂时取名为QT. 接下来笔者将复盘一下该可视化平台的实现步骤以 ...
Android 抖音爱心动画,Android自定义View实现抖音飘动红心效果
本文实例为大家分享了Android自定义View实现抖音飘动红心效果的具体代码,供大家参考,具体内容如下自定义View--抖音飘动红心效果展示动画效果使用自定义view完成红心飘动效果 Vie ...
第2章第9节：标题设计技巧：制作抖音风格的标题样式 [PowerPoint精美幻灯片实战教程]
您将在本节制作抖音风格的标题样式,首先选择此处的标题文字. 在字号输入框里输入66,以增加文字的尺寸. 点击加粗图标,使所选文字加粗显示. 接着将文字的颜色修改为红色. 使用键盘上的快捷键,复制当前的 ...
html5仿抖音切换效果,仿抖音视频滑动效果
更新记录 1.6.2(2020-06-04) 优化css3动画效果 1.6.1(2020-05-23) 1.修复串音 2.新增进度条 3.新增弹幕查看更多 scroll-video uniapp仿抖 ...
【有利可图网】PS教程：设计制作卡通游戏风格字体效果
本篇教大家如何巧用photoshop设计制作卡通游戏风格字体效果!教程简单实用,喜欢的小伙伴赶快收走学起来吧!设计师:UI小蜗

【Web】CSS实现抖音风格字体效果（设置文本阴影）

【Web】CSS实现抖音风格字体效果（设置文本阴影）相关推荐

最新文章

热门文章