html5点击字母点读,HTML5 CSS3 5个字母点击交互动画
CSS
语言:
CSSSCSS
确定
@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');
.word {
font-family: 'Anton', sans-serif;
perspective: 1000px;
perspective-origin: 200px 40px;
}
.word span {
cursor: pointer;
display: inline-block;
font-size: 100px;
user-select: none;
line-height: .8;
}
.word span:nth-child(1).active {
animation: balance 1.5s ease-out;
transform-origin: 0% 100% 0px;
}
@keyframes balance {
0%, 100% {
transform: rotate(0deg);
}
30%,
60% {
transform: rotate(-45deg);
}
}
.word span:nth-child(2).active {
animation: shrinkjump 1s ease-in-out;
transform-origin: bottom center;
}
@keyframes shrinkjump {
10%, 35% {
transform: scale(2, .2) translate(0, 0);
}
45%,
50% {
transform: scale(1) translate(0, -150px);
}
80% {
transform: scale(1) translate(0, 0);
}
}
.word span:nth-child(3).active {
animation: falling 2s ease-out;
transform-origin: bottom center;
}
@keyframes falling {
12% {
transform: rotateX(240deg);
}
24% {
transform: rotateX(150deg);
}
36% {
transform: rotateX(200deg);
}
48% {
transform: rotateX(175deg);
}
60%,
85% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(0deg);
}
}
.word span:nth-child(4).active {
animation: rotate 1s ease-out;
}
@keyframes rotate {
20%, 80% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
.word span:nth-child(5).active {
animation: toplong 1.5s linear;
}
@keyframes toplong {
10%, 40% {
transform: translateY(-48vh) scaleY(1);
}
90% {
transform: translateY(-48vh) scaleY(4);
}
}
/* Other styles */
body {
background-color: skyblue;
color: #fff;
display: flex;
font-family: 'Roboto', sans-serif;
justify-content: center;
align-items: center;
flex-direction: row;
height: 100vh;
margin: 0;
}
.fixed {
position: fixed;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
letter-spacing: 1px;
}
footer i {
color: red;
}
footer a {
color: #3C97BF;
text-decoration: none;
}
html5点击字母点读,HTML5 CSS3 5个字母点击交互动画相关推荐
- html5加载文字特效免费,纯CSS3创意loading文字特效
这是一款非常有创意的纯CSS3 loading加载文字动画特效.该loading文字特效中,字母O的内圆会不停的放大缩小,使用这个动画效果来提示用户当前的页面或任务正在加载中. 使用方法 HTML结构 ...
- html5搜索框在最右侧,html5搜索框特效点击搜索框弹出分类搜索框代码
特效描述:html5搜索框特效 点击搜索框弹出 分类搜索框.点击搜索框弹出分类搜索框代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Search People Sara Soue ...
- html5鼠标滑过图片 图片弹出层,纯CSS3鼠标滑过图片遮罩层动画特效
简要教程 这是一款使用纯CSS3制作的鼠标滑过图片遮罩层动画特效.该特效中,当鼠标滑过或悬停在图片上面时,会在图片上出现遮罩层动画,展示出图片的描述信息和链接图标按钮. 使用方法 在页面中引入boot ...
- html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
- html5怎么给字加颜色代码,字体颜色怎么设置?
字体颜色怎么设置?下面本篇文章给大家介绍一下HTML页面和word文档中设置字体颜色的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. HTML页面中设置字体颜色的方法 在网页开 ...
- html5语义化标签 加粗,html5标签 H5标签
html> h5文本元素 1.文本元素 2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~ 7.强调 倾斜元素 em 8.删除线2 ...
- Android8.0 HTML5,HTML5 7个最牛的HTML5移动开发框架
原标题:HTML5 7个最牛的HTML5移动开发框架 0.前言 本文引用地址:http://www.eepw.com.cn/article/201608/295975.htm你并不需要任何的原生应用编 ...
- HTML5网页术语,web前端之HTML5的一些术语和概念
HTML5是html标准的下一个版本,它並沒有完全颠覆後者,依然有很多相似之处,但是也有10个关键不同之处.(从头用html5建站更方便) HTML5与HTML4区别不是特别的大,新增了很多直观的新功 ...
- Html5的页面基本结构标签,HTML5:简介和文档基本结构
1)HTML5:http://www.w3.org/TR/html5/ HTML5简介 HTML5实际上是一系列用来制作现代富Web内容的相关技术的总称,其中最重要的三项技术是HTML5核心规范.CS ...
最新文章
- oracle 10.2 64位,Oracle 10.2.0.5 x64升级到11.2.0.3 x64
- 运行管理员线程和用户线程小练习
- 2012-04-12
- HDU1003——MAX SUM
- 扫雷程序设计 python_端口扫描
- matlab 判断两个矩阵有元素相等_Matlab入门教程 第 1 章 Matlab基础知识之基本运算...
- pm模型matlab算法,18基于遗传算法(粒子群算法、人工鱼群算法等)的投影寻踪模型MATLAB源代码...
- html文件可以分层吗,css分层是用什么标记?
- 苹果电脑获取Android Studio的发布版SHA1和开发版SHA1
- 在Spring环境下存取properties文件中的数值
- rls自适应滤波器matlab实现,rls算法的自适应滤波器matlab仿真作业.doc
- CCFCSP 201803-2碰撞的小球
- [译] APT分析报告:02.钓鱼邮件网址混淆URL逃避检测
- LeetCode刷题-反转字符串中的元音字母
- android椭圆形形框_什么是计算机硬件上的椭圆形Kong?
- 计算机怎么转换英语版本,电脑英文字母大小写怎么转换
- 微信小程序CMS系统开发教程开发初级
- Android手机屏幕不清晰,4大参数如何影响屏幕显示清晰度
- 腾讯云CentOS7 LAMP(linux的apache MariaDB php)yum方式部署
- 香港网络新危机:黑客入侵网上银行账户买卖股票
热门文章
- Python Tricks:Python‘s Functions Are First-Class
- [阅读技巧] 快速阅读之二 进一步提升阅读资料的速度
- 小学计算机辅助教育,计算机辅助教育 [应用现代教育技术辅助小学数学教学] .doc...
- 机械设计软件CAD系统—文件格式基础知识
- Stackoverflow热门问题(七)-为什么printf在遇到新行时才清空缓冲区,而不是调用后立即清空?
- Techme inc联手UMT打造创新种子生态圈
- 计算机软件考研英语,(完整版)计算机软件专业考研英语面试必备问题解析
- 孔松(信通院)-数字化时代云安全能力建设及趋势
- 使用Pyecharts进行全国水质TDS地图可视化全过程6:利用Python+Selenium自动化获取页面信息
- vue : 无法加载文件(因为在此系统上禁止运行脚本)