主要用到属性有：
filter 滤镜的 hue-rotate 色调旋转，
text-shadow 文字阴影，
transform 的 scale缩放，
transition 过渡属性，
animation 动画

效果图：

代码：

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">

 7     <title>text-animation</title>

 8     <style>

 9         html,body {

10             height: 100%;

11             margin: 0;

12             padding: 0;

13         }

14         body {display: flex;justify-content: center;align-items: center;background-color: #333;} /*用flex布局让div上下左右居中对齐*/

15         h1 {

16             color: white; /*字体颜色*/

17             display: inline-block; /*转换为行内块*/

18             font-size: 7rem; /*字体大小*/

19             letter-spacing: 1rem; /*字体间距*/

20             cursor: pointer; /*光标手指状态*/

21             text-transform: uppercase; /*文字内容大写*/

22             line-height: 1rem; /*行高*/

23             text-shadow: #fff 0 0 10px,#fff 0 0 20px,

24             rgb(245, 10, 245) 0 0 30px,rgb(245, 10, 245) 0 0 40px,

25             purple 0 0 50px,purple 0 0 60px,purple 0 0 70px; /*文字阴影*/

26             transition: transform .8s; /*过渡*/

27         }

28         h1:hover {

29             transform:scale(.3); /*缩放*/

30         }

31

32         /*给每个文字设置不同时长的动画*/

33         h1:first-of-type {animation: light 4s linear infinite;}

34         h1:nth-of-type(2) {animation: light 3s linear infinite;}

35         h1:nth-of-type(3) {animation: light 2.8s linear infinite;}

36         h1:nth-of-type(4) {animation: light 3.6s linear infinite;}

37         h1:nth-of-type(5) {animation: light 4.4s linear infinite;}

38         h1:nth-of-type(6) {animation: light 2s linear infinite;}

39         h1:nth-of-type(7) {animation: light 3.3s linear infinite;}

40         h1:nth-of-type(8) {animation: light 1.4s linear infinite;}

41         h1:nth-of-type(9) {animation: light 1s linear infinite;}

42         h1:last-of-type {animation: light 5s linear infinite;}

43         @keyframes light {

44             100% {filter: hue-rotate(360deg);/*色调旋转*/}

45         }

46     </style>

47 </head>

48 <body>

49     <div>

50         <h1>h</h1>

51         <h1>e</h1>

52         <h1>l</h1>

53         <h1>l</h1>

54         <h1>o</h1>

55         <br/>

56         <h1>w</h1>

57         <h1>o</h1>

58         <h1>r</h1>

59         <h1>l</h1>

60         <h1>d</h1>

61     </div>

62 </body>

63 </html>

filter: hue-rotate() 制作炫酷的文字效果的更多相关文章

  1. css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效

    这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...

  2. css3制作炫酷导航栏效果

    今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

  3. css3 之炫酷的loading效果

    css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...

  4. 一个炫酷的Actionbar效果

    今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示 ...

  5. 用AI制作炫酷效果

    PART1:制作第一个效果 步骤一:新建一个800*600的画布. 骤二:从工具栏选“矩形工具”,创建一个800*600的矩形.白色的是画布,浅红色(我的AI之前保留的填充颜色,每个人都不一样)的是你 ...

  6. web报表设计器在线制作炫酷图表

    相信很多人都看过这些大屏的图表,是不是感觉效果很酷炫,做起来会很复杂,按照传统的方式去做,使用数据分析工具结合ps美化可能耗时要数月才能做出来.但这个时候用Smartbi自助仪表盘功能,全方位的满足各 ...

  7. Vue + Bootstrap 制作炫酷个人简历（一）

    最近看了别人做的简历,简单炫酷,自己非常喜欢,于是打算自己做一个,尝试一下. 由于写这篇随笔的时候才开始动工,所以目前没有成品给大家看. emmm等我更新完会在最后附上成品. 现在 开始! 首先 配置 ...

  8. 推荐六款炫酷的HTML5效果插件

    1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果.这和HTML5 ...

  9. >炫酷的计时器效果Canvas绘图与动画<

    >炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...

  10. iOS动画开发之五——炫酷的粒子效果

    在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休 ...

随机推荐

  1. 云服务器 Centos7 部署 Elasticsearch 8.0 + Kibana 8.0 指南

    文章转载自:https://mp.weixin.qq.com/s/iPfh9Mkwxf5lieiqt6ltxQ 服务器是命令行模式登录,没法以浏览器方式访问.而官方推荐的快捷部署方式,在kibana ...

  2. Traefik知识点

    Traefik 的各种 Providers Traefik 中的配置发现是通过下面的一些 providers 来实现的. providers 是现有的一些基础架构组件,可以是编排工具,容器引擎,云提供 ...

  3. Solutions：应用程序性能监控/管理(APM)实践---python/flask

    本文部分内容转载自:https://blog.csdn.net/UbuntuTouch/article/details/102844900 官方文档:https://www.elastic.co/gu ...

  4. Java SpringBoot 项目构建 Docker 镜像调优实践

    PS:已经在生产实践中验证,解决在生产环境下,网速带宽小,每次推拉镜像影响线上服务问题,按本文方式构建镜像,除了第一次拉取.推送.构建镜像慢,第二.三-次都是几百K大小传输,速度非常快,构建.打包.推 ...

  5. 内网横向渗透 之 ATT&CK系列一 之 拿下域控制器

    信息收集 信息收集 域控制器的相关信息: 通过arp扫描发现域控制器的ip地址为:192.168.52.138,尝试使用msf的smb_login模块登录smb是否成功 1 search smb_lo ...

  6. Tubian-Win上线！Tubian官方的Windows软件适配项目

    Sourceforge.net下载:https://sourceforge.net/projects/tubian/ 123网盘下载: https://www.123pan.com/s/XjkKVv- ...

  7. C#-4 方法

    一 何为方法 方法是一块具有名称的代码,是类的函数成员. 方法主要分为方法头和方法体. void Method() { 语句1: 语句2: } 二 类型推断和var关键字 var sum = 15; ...

  8. HTML5中新增实用的标签

    1:progress  进度条 <h3>progress</h3> <progress value="75" max="100"& ...

  9. 【.NET 6+Loki+Grafana】实现轻量级日志可视化服务功能

    前言:日志功能是几乎所有程序或系统都必备的一个功能.该文章通过使用Loki+Grafana来实现日志记录与可视化查询,欢迎围观. 有关环境: 操作系统:WIN 10 .NET环境:.NET 6 开发环 ...

  10. mac通过docker一键部署Nexus3

    目录 mac通过docker一键部署Nexus3 一.前言 二.系统配置 三.安装步骤 1.Dockerhub查看镜像地址 2.一键安装 2.1.克隆脚本 2.2.安装程序 2.2.1.程序安装详情 ...