js实现文字分割动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
height: 100%;
background: white;
}
h1 {
color: black;
text-align: center;
font-size: 10vw;
position: relative;
font-weight: 900;
text-transform: uppercase;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
margin: 0;
}
h1:before,
h1:after {
content: attr(data-heading);
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
h1:before {
clip-path: polygon(0 0, 100% 0%, 100% 39%, 0 67%);
color: white;
text-shadow: 3px -2px 5px white, -3px 3px 4px white;
background: white;
}
h1:after {
clip-path: polygon(0 0, 100% 0%, 100% 37%, 0 65%);
color: black;
animation: fracture 5s infinite ease;
}
@keyframes fracture {
0% {
transform: translateX(0);
}
50% {
transform: translate(-20px, 2%);
}
}
</style>
</head>
<body>
<h1 contenteditable data-heading="悠酒网">悠酒网</h1>
</body>
<script type="text/javascript">
var h1 = document.querySelector("h1");
h1.addEventListener("input", function() {
this.setAttribute("data-heading", this.innerText);
});
</script>
</html>
js实现文字分割动画的更多相关文章
- Canvas 3D球形文字云动画特效
Canvas 3D球形文字云动画特效 效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器 ...
- JS截取与分割字符串常用技巧总结
本文实例讲述了JS截取与分割字符串的常用方法.分享给大家供大家参考,具体如下: JS截取字符串可使用 substring()或者slice() 函数:substring() 定义:substring( ...
- js 实现文字滚动功能，可更改配置参数 带完整版解析代码。
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写文字滚动效果 需求分析: 需要 ...
- 用js触发CSS3-transition过渡动画
用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...
- iOS—图片编辑,文字下落动画的Demo
仿照Mac上的截图编辑功能做的一个图片编辑的Demo,功能有画矩形,圆形,箭头,手写,输入文字和分享. 做的时候看到一个大神的帖子写的一个文字动画的教程,故顺带学习做了一个类似的文字下落动画. 有兴趣 ...
- Three.js基础探寻十——动画
本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...
- js实现文字截断
先前用jq做了一个文字截断功能,但是不用jq的项目要实现此功能还要引如jq显得过于麻烦.这里写了一个js的文字截断功能.直接上代码. HTML(测试用的): <div>我是pox我是pox ...
- js spin 加载动画（loading）
js spin 加载动画 最近做页面ajax加载是又用到loading动画,还好有一个spin.js 具体的包大家可以去http://fgnass.github.com/spin.js/下载, 如果想 ...
- js实现文字逐个显示
先把代码摆上了吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtm ...
随机推荐
- 攻防世界（十一）warmup
攻防世界系列 :warmup 1.打开题目,一个贱贱的滑稽表情 F12看到注释内容source.php 2.访问source.php <?php highlight_file(__FILE__) ...
- [转发]PotPlayer 无损截取视频片段
PotPlayer 无损截取视频片段 2019-03-29 21:04:21 ForeverStrong 阅读数 2928 收藏 更多 分类专栏: 视频图像编辑 PotPlayer 无损截取视频 ...
- Linux进阶之Git分布式版本控制系统篇
一.Git介绍 Git(读音为/gɪt/.)是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理. Git 是 Linus Torvalds 为了帮助管理 Linux 内核 ...
- MyBatis 动态SQL（十二）
动态条件查询 以下是我们数据库表 tb_user 的记录: 假设现在有一个需求,就是根据输入的用户年龄和性别,查询用户的记录信息.你可能会说,这太简单了,脑袋里立马蹦出如下的 SQL 语句: SELE ...
- gin使用validator库参数校验若干实用技巧
validator库参数校验若干实用技巧 本文介绍了使用validator库做参数校验的一些十分实用的使用技巧,包括翻译校验错误提示信息.自定义提示信息的字段名称.自定义校验方法等. validato ...
- Python+Selenium自动化-定位一组元素，单选框、复选框的选中方法
Python+Selenium自动化-定位一组元素,单选框.复选框的选中方法 之前学习了8种定位单个元素的方法,同时webdriver还提供了8种定位一组元素的方法.唯一区别就是在单词elemen ...
- Docker学习(11) Dockerfile指令
Dockerfile指令 指令格式 FROM MAINTAINER RUN EXPOSE CMD ENTRYPOINT ADD COPY VOLUME WORKDIR ENV USER ONBUILD ...
- ZooKeeper学习笔记四：使用ZooKeeper实现一个简单的分布式锁
作者:Grey 原文地址: ZooKeeper学习笔记四:使用ZooKeeper实现一个简单的分布式锁 前置知识 完成ZooKeeper集群搭建以及熟悉ZooKeeperAPI基本使用 需求 当多个进 ...
- 夜晚场景图像ISP增强算法
夜晚场景图像ISP增强算法 输入输出接口 Input: (1)图像视频分辨率(整型int) (2)图像视频格式(RGB,YUV,MP4等) (3)摄像头标定参数(中心位置(x,y)和5个畸变 系数(2 ...
- 分层条件关系网络在视频问答VideoQA中的应用：CVPR2020论文解析
分层条件关系网络在视频问答VideoQA中的应用:CVPR2020论文解析 Hierarchical Conditional Relation Networks for Video Question ...