css 跳跃动画,CSS动画实例:跳跃的字符
1.翻转的字符
在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下:
H
E
L
L
O
为container和span定义CSS样式规则,并定义实现5个字符翻转的动画关键帧。完整的HTML文件内容如下。
字符翻转
.container
{
margin: 0 auto;
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
display:flex;
align-items: center;
justify-content: center;
border: 4px solid rgba(255, 0, 0, 0.9);
background:#d8d8d8;
border-radius: 10%;
}
.container>span
{
font-size: 130px;
font-family: "Impact",sans-serif;
display: inline-block;
animation:flip 2s infinite linear;
transform-origin:0 70%;
transform-style:preserve-3d;
}
@keyframes flip
{
50% { transform: rotateX(360deg); }
100% { transform: rotateX(360deg); }
}
.container>span:nth-child(1n+0)
{
color:var(--color);
animation-delay: var(--delay);
}
H
E
L
L
O
在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图1所示的动画效果。
图1 字符绕X轴翻转
若将上面的关键帧设置中的两个属性值“rotateX”均改成“rotateY”,则呈现如图2所示的动画效果。
图2 字符绕Y轴翻转
若将上面的关键帧设置中的两个属性值“rotateX”均改成“rotateZ”,则呈现如图3所示的动画效果。
图3 字符绕Y轴翻转
2.跳跃的字符
我们可以通过修改字符区span的top属性的属性值让字符上下移动,同时设置文本的阴影,形成字符的跳跃动画效果。
编写的完整HTML文件如下。
跳跃的字符
.container
{
margin: 0 auto;
width: 600px;
height: 200px;
position: relative;
overflow: hidden;
display:flex;
align-items: center;
justify-content: center;
border: 4px solid rgba(255, 0, 0, 0.9);
background:#f5f5f5;
border-radius: 10%;
}
.container>span
{
position: relative;
top: 20px;
display: inline-block;
animation: bounce .3s ease infinite alternate;
font-family: "Impact",sans-serif;
font-size: 80px;
text-shadow: 0 1px 0 #CCC,
0 2px 0 #CCC,
0 3px 0 #CCC,
0 4px 0 #CCC,
0 5px 0 #CCC,
0 6px 0 transparent,
0 7px 0 transparent,
0 8px 0 transparent,
0 9px 0 transparent,
0 10px 10px rgba(0, 0, 0, .4);
}
.container>span:nth-child(1n+0)
{
color:var(--color);
animation-delay: var(--delay);
}
@keyframes bounce
{
100%
{
top: -20px;
text-shadow: 0 1px 0 #CCC,
0 2px 0 #CCC,
0 3px 0 #CCC,
0 4px 0 #CCC,
0 5px 0 #CCC,
0 6px 0 #CCC,
0 7px 0 #CCC,
0 8px 0 #CCC,
0 9px 0 #CCC,
0 50px 25px rgba(0, 0, 0, .2);
}
}
H
a
p
p
y
N
e
w
Y
e
a
r
在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图4所示的动画效果。
图4 跳跃的字符
3.霓虹字符
通过滤镜的方式让文字发光,形成霓虹文字效果。编写HTML文件内容如下。
霓虹字符
.container
{
margin: 0 auto;
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
display:flex;
align-items: center;
justify-content: center;
border: 4px solid rgba(255, 0, 0, 0.9);
background:#000000;
border-radius: 10%;
}
.container>span
{
margin-right: 10px;
display: inline-block;
font-size: 100px;
font-family: "Impact",sans-serif;
color: white;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
animation-name: anim;
animation-timing-function: linear;
animation-direction: alternate-reverse;
animation-iteration-count: infinite;
}
.container>span:nth-child(1)
{
animation-delay: 0.2s;
animation-duration: 0.5s;
}
.container>span:nth-child(2)
{
animation-delay: 0.4s;
animation-duration: 1s;
}
.container>span:nth-child(3)
{
animation-delay: 0.6s;
animation-duration: 1.5s;
}
.container>span:nth-child(4)
{
animation-delay: 0.8s;
animation-duration: 2s;
}
.container>span:nth-child(5)
{
animation-delay: 1s;
animation-duration: 2.5s;
}
@keyframes anim
{
0%
{
opacity: .1;
background-position: 0 0;
filter: hue-rotate(0deg);
}
10% { background-position: 5px 0; }
20% { background-position: -5px 0; }
30% { background-position: 15px 0; }
40% { background-position: -5px 0; }
50% { background-position: -25px 0; }
60% { background-position: -50px 0; }
70% { background-position: 0 -20px; }
80% { background-position: -60px -20px;}
81% { background-position: 0 0; }
100%
{
opacity: 1;
background-position: 0 0;
filter: hue-rotate(360deg);
}
}
W
U
H
A
N
在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图5所示的动画效果。
图5 霓虹文字
CSS动画实例
上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果 代码:最外层div包含2个小的div : a和b. a有左右边框(高度 ...
CSS动画实例:太极图在旋转
利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1.旋转的太极图 设页面中有
CSS动画实例:移动的眼珠子
适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...
CSS动画实例:小圆球的海洋
CSS背景属性用于定义HTML元素的背景,在CSS提供的背景属性中, background-image:指定要使用的一个或多个背景图像: background-color:指定要使用的背景颜色: ba ...
CSS动画实例:旋转的圆角正方形
在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下:
CSS动画实例:Loading加载动画效果(三)
3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
CSS动画实例:升空的气球
1.制作一个气球 设页面中有
CSS动画实例:行星和卫星
设页面中有
随机推荐
centos单用户模式修改ROOT密码
首先启动的时候的时候,需要进入单用户模式(进入单用户模式的前提是系统引导器能正常工作),单用户模式是不需要输入密码,并且(进入单用户模式,没有开启网络服务,不支持远程连接 )网上说可以通过GRUB ( ...
好用的一个从SharePoint导出小工具
1. 输入 Site Url(Site Collection), 然后点"load"按钮 2.选择Web后,点选需导出的文档库,然后点"Next"按钮 ...
Day1 三级目录
d_city = { "河南" : {"郑州" : ["二七区","中原区","回族管城区",&qu ...
java读写中文文件
在用Java程序进行读写含中文的txt文件时,经常会出现读出或写入的内容会出现乱码.原因其实很简单,就是系统的编码和程序的编码采用了不同的编码格式.通常,假如自己不修改的话,windows自身采用的编 ...
WEB.xml配置文件解读
1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取和两个结点. 2.紧急着,容创建一个Servl ...
HP 1010、 1020、 1022 、M1005激光打印机内部无卡纸,但机器仍提示卡纸?
HP 1010.1018.1020.1022.M1005激光打印机,硒鼓原装编号:Q2612A 1800页 ( A4纸,5%覆盖率).是办公桌面小型打印机中主流产品,故障率极小. 现有一台HP 10 ...
初尝Web API《转》
HTTP 并不是只能用在网页中.它其实还是一个强大的平台,可以用来生成一些API,暴露服务和数据.HTTP很简单灵活,还非常普及.几乎所有你能想到的平台都有HTTP库,所以HTTP服务可以囊括很大范围 ...
vue中使用cookie记住用户上次选择(本次例子中为下拉框)
最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了, ...
再有人问你synchronized是什么,就把这篇文章发给他
在再有人问你Java内存模型是什么,就把这篇文章发给他.中我们曾经介绍过,Java语言为了解决并发编程中存在的原子性.可见性和有序性问题,提供了一系列和并发处理相关的关键字,比如synchronize ...
css 跳跃动画,CSS动画实例:跳跃的字符相关推荐
- css怎样使弹跳的小球旋转,如何使用纯CSS实现小球跳跃台阶的动画效果(附源码)...
本篇文章给大家带来的内容是关于如何使用纯CSS实现小球跳跃台阶的动画效果(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github ...
- css玻璃雨滴效果,CSS实现雨滴动画效果的实例代码
玻璃窗 今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
- html实现的动画效果代码,CSS实现雨滴动画效果的实例代码
玻璃窗 今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
- css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示 设计思路与核心技术 旋转地球效果实现主要 ...
- 利用 CSS animation 和 CSS sprite 制作动画
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
- CSS学习--DIY Loading动画
首先要知道什么是CSS3动画?然后才能做出自己想要的动画效果.下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍,希望对你有用. 动画是使元素从一种样式逐渐变 ...
- CSS 实现加载动画之四-圆点旋转
原文:CSS 实现加载动画之四-圆点旋转 圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以 ...
- [css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放 一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
- html和css动画效果,css过渡和css动画的区别是什么?
CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果.那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助. css过渡 ...
- CSS 实现加载动画之一-菊花旋转
CSS 实现加载动画之一-菊花旋转 原文:CSS 实现加载动画之一-菊花旋转 最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意 ...
最新文章
- 太牛了!这所211大学,又有95后硕士生一作发Nature!
- 如何将html页面上的形状存储,css – html -split一个页面成为所需的形状作为div?...
- 网络营销外包——改善企业网站排名现状网络营销外包少不了
- vs2017中编译提示一些系统头文件没有找到
- oracle去重等基础问题
- python简单小游戏代码_一个简单的python小游戏---七彩同心圆
- Oracle 11g中文版高清视频教程
- 智慧交通day02-车流量检测实现05:小车匀加速案例
- VUE---不连接后端的登录验证规则方法
- 编写 iPhone Friendly 的 Web 应用程序 (Part 6 - iUI)
- 基于python sklearn的 SVM支持向量机 类实现
- html圆形圆心坐标,圆心坐标公式
- wps2019怎么调整字间距_wps2019表格和文字间距太大怎么调整?
- 中兴光猫F412超级管理员密码获取
- linux无法识别耳机,Ubuntu 7.10中不能正常使用耳机的解决方法
- ninjia必须以root权限运行问题
- [V8]找出可能影响性能的代码(模式)
- Unity三体运行模拟体验
- 广告人必看 | 广告素材资源都在这
- macOS 查验国家税务总局发票