filter: hue-rotate() 制作炫酷的文字效果
主要用到属性有：
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() 制作炫酷的文字效果的更多相关文章
- css3实现炫酷的文字效果_空心/立体/发光/彩色/浮雕/纹理等文字特效
这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke ...
- css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
- css3 之炫酷的loading效果
css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...
- 一个炫酷的Actionbar效果
今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示 ...
- 用AI制作炫酷效果
PART1:制作第一个效果 步骤一:新建一个800*600的画布. 骤二:从工具栏选“矩形工具”,创建一个800*600的矩形.白色的是画布,浅红色(我的AI之前保留的填充颜色,每个人都不一样)的是你 ...
- web报表设计器在线制作炫酷图表
相信很多人都看过这些大屏的图表,是不是感觉效果很酷炫,做起来会很复杂,按照传统的方式去做,使用数据分析工具结合ps美化可能耗时要数月才能做出来.但这个时候用Smartbi自助仪表盘功能,全方位的满足各 ...
- Vue + Bootstrap 制作炫酷个人简历（一）
最近看了别人做的简历,简单炫酷,自己非常喜欢,于是打算自己做一个,尝试一下. 由于写这篇随笔的时候才开始动工,所以目前没有成品给大家看. emmm等我更新完会在最后附上成品. 现在 开始! 首先 配置 ...
- 推荐六款炫酷的HTML5效果插件
1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果.这和HTML5 ...
- >炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...
- iOS动画开发之五——炫酷的粒子效果
在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休 ...
随机推荐
- ProxySQL(7)：详述ProxySQL的路由规则
文章转载自:https://www.cnblogs.com/f-ck-need-u/p/9300829.html 关于ProxySQL路由的简述 当ProxySQL收到前端app发送的SQL语句后,它 ...
- Minio纠删码快速入门
官方文档地址:http://docs.minio.org.cn/docs/master/minio-erasure-code-quickstart-guide Minio使用纠删码erasure co ...
- 使用logstash读取MySQL数据传输到es，并且@timestamp字段采用MySQL中的字段时间--建议采用这个
MySQL中数据样式 ES中数据样式 input { jdbc { jdbc_connection_string => "jdbc:mysql://192.168.0.145:3306 ...
- electron 基础
electron 基础 前文我们快速的用了一下 electron.本篇将进一步介绍其基础知识点,例如:生命周期.主进程和渲染进程通信.contextBridge.预加载(禁用node集成).优雅的显示 ...
- springboot H2 linux下搭建使用
这次研究是H2数据库了,关键还是再Linux下进行搭建部署的,被这个数据库快弄死了弄了4天时间,现在大致可以用了,还有些细节需要修正. 我这边使用的是springboot集成模式.直接使用代码启停方式 ...
- 【Java8新特性】- Optional应用
Java8新特性 - Optional应用 生命不息,写作不止 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 一个有梦有戏的人 @怒放吧德德 分享学习心得,欢迎指正,大家一起学习成长! ...
- 前端框架Vue------＞第一天学习（3）
文章目录 8 .使用Axios实现异步通信 9 .表单输入绑定 9.1 . 什么是双向数据绑定 9.2 .为什么要实现数据的双向绑定 9.3 .在表单中使用双向数据绑定 8 .使用Axios实现异步通 ...
- Vue中组件化编码使用、实现组件之间的参数传递（实战练习二）
上一章节实现的是静态页面的设计.这一章节实现将数据抽取出来.通过组件间参数的传递来实现 上一章节链接地址:https://blog.csdn.net/weixin_43304253/article/d ...
- mybatisPlus在Springboot中的使用
文章目录 1.简介 2.支持的数据库 3.框架 4.创建一个springboot项目 4.1 .pom文件中加入依赖 4.2.yml文件的配置 4.3 .数据库脚本 4.4.实体类 4.5 .启动类添 ...
- 在vue中引入elementui
文章目录 1.下载安装 2.在main.js中引入 3.可以根据封装好的组件自行调用 官网地址:https://element.eleme.cn/#/zh-CN 1.下载安装 npm i elemen ...