记录-css实现交融文字效果
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
CSS是有魔法的,我们今天来实现一个CSS的动画效果,只需要几行代码就可以搞定。
第一步、我们要将一行文字从中间展开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background: #000;}.container{margin-top: 50px;text-align: center;background-color: #000;filter: contrast(30);}.text{font-size: 100px;color: #fff;/* 第一步、如何从中间展开 */letter-spacing: 0px;}</style>
</head>
<body><div class="container"><span class="text">hello world</span></div>
</body>
</html>
以上是基础代码结构,通过调整letter-spacing的值,我们可以控制他的展开与收起。值越小为负数时文字就可以挤在一起,越大文字间距就越大。
默认值为0时正常显示的效果
小于正常值的效果
我们可以为节点加上keyframes动画,此时letter-spacing属性转由keyframes控制可以达到自动展开文字的效果
.text{font-size: 100px;color: #fff;animation: showup 3s forwards;
}
@keyframes showup {from{letter-spacing: -50px;}to{letter-spacing: 10px;}
}
第二步、我们需要设置文字融合在一起的效果
先给文本节点设置filter blur文字变得模糊
学过ps的就会知道,当给图片加上较高的对比度的时候,就会导致黑的部分越黑,白的部分越白。我们给父节点加上filter,设置contrast(30),可以获得如下效果
这样就有了一些圆润的边缘,最后我们将对应的css属性交给keyframes控制,就可以达到最终的效果
@keyframes showup {from{letter-spacing: -50px;/* 新增 */filter: blur(10px);}to{letter-spacing: 10px;/* 新增 */filter: blur(2px);}
}
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background: #000;}.container{margin-top: 50px;text-align: center;background-color: #000;filter: contrast(30);}.text{font-size: 100px;color: #fff;/* 第一步、如何从中间展开 *//* letter-spacing: 0px; */animation: showup 3s forwards;}@keyframes showup {from{letter-spacing: -50px;filter: blur(10px);}to{letter-spacing: 10px;filter: blur(2px);}}</style>
</head>
<body><div class="container"><span class="text">hello world</span></div>
</body>
</html>
本文转载于:
https://juejin.cn/post/7220696133730828344
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
记录-css实现交融文字效果相关推荐
- jQuery和CSS制作霓虹灯文字效果
原文:jQuery和CSS制作霓虹灯文字效果 源代码下载地址:http://www.zuidaima.com/share/1607121521200128.htm
- html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
- 纯CSS实现的文字效果还可以这么酷炫
大家好,我是前端实验室的大师兄! 前言 CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能. 本文中大师兄为你精选了5个使用纯CSS实现的文字 ...
- 纯CSS实现的文字效果
大家好,我是前端实验室的大师兄! 前言 CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能. 本文中大师兄为你精选了10个使用纯CSS实现的文 ...
- css实现空心文字效果
在日常开发中大家很有可能会遇到需要手动实现空心文字效果 实现方式一 (空心字体) <style> .text{-webkit-text-stroke: 1px black; // 根据需求 ...
- css 光影掠过文字效果
光影:通过渐变背景图产生 文字上有光影:background-clip:text;属性 效果图: 文字上白色的光影是会移动的 代码示例: html, body {width: 100%;height: ...
- css实现立体投影文字效果
非常立体的字,偶然在某个系统看到的,扒下来以备日后使用.原始页面上还有鼠标移动到某个字上就会有"点亮"的效果,不知道怎么实现的,我仔细查看了它的css代码以及事件,发现都没有.实在 ...
- CSS ::selection 选中文字效果
::selection伪元素,用来定义用户鼠标已选择内容的样式 测试代码: p::selection{ background: #45caaf; color: #fff; } p::-moz-sele ...
- 纯CSS3文字效果推荐
前端开发whqet,csdn,王海庆,whqet,前端开发专家 之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究 ...
最新文章
- SAP MM公司间STO里的交货单自动创建?
- android连接mysql查询表内记录_Android Room数据库多表查询的使用实例
- keras模型保存和加载
- 使用Oracle WebLogic对应用程序外部的EJB的引用
- Spring源码分析-Spring事务源码分析
- 大数据分析平台安全的重要性
- js string函数之slice,indexOf,split联合获取参数
- outlook安装包下载
- TOPSIS法 —— matlab
- dell主板恢复出厂设置_DELL(戴尔)BIOS进入及恢复默认值
- 亚马逊AWS图形界面登陆
- 华为HG8347R V3R016C10S135光猫桥接 北京联通 恢复华为原版
- 数据库原理与应用(五)专门的关系运算
- 揭露杀毒软件的那些密秘
- 园林景观cad_5+ 园林景观设计PSD树木建筑人物鸟瞰图效果图ps后期分层素材库配景A...
- DDR3基本概念1 - 存储单元结构和原理
- 刷主板bios改变机器码_主板BIOS升级超完整教程,一学就会!
- 半夜仍在加班的我,知道了老板跟女友都在跑步。
- linux下贪吃蛇代码,贪吃蛇 linux 程序
- 小程序使用腾讯地图获取当前位置和地图选取位置