1.翻转的字符

在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下:

<div class="container">

<span>H</span>

<span>E</span>

<span>L</span>

<span>L</span>

<span>O</span>

</div>

为container和span定义CSS样式规则,并定义实现5个字符翻转的动画关键帧。完整的HTML文件内容如下。

<!DOCTYPE html>
<html>
<head>
<title>字符翻转</title>
<style>
.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);
}
</style>
</head>
<body>
<div class="container">
<span style="--delay:0s;--color:#f00">H</span>
<span style="--delay:0.4s;--color:#f0f">E</span>
<span style="--delay:0.8s;--color:#ff0">L</span>
<span style="--delay:1.2s;--color:#0ff">L</span>
<span style="--delay:1.6s;--color:#800080">O</span>
</div>
</body>
</html>

在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图1所示的动画效果。

图1  字符绕X轴翻转

若将上面的关键帧设置中的两个属性值“rotateX”均改成“rotateY”,则呈现如图2所示的动画效果。

图2  字符绕Y轴翻转

若将上面的关键帧设置中的两个属性值“rotateX”均改成“rotateZ”,则呈现如图3所示的动画效果。

图3  字符绕Y轴翻转

2.跳跃的字符

我们可以通过修改字符区span的top属性的属性值让字符上下移动,同时设置文本的阴影,形成字符的跳跃动画效果。

编写的完整HTML文件如下。

<!DOCTYPE HTML>
<html>
<head>
<title>跳跃的字符</title>
<style>
.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);
}
}
</style>
</head>
<body>
<div class="container">
<span style="--delay:0s;--color:#f00">H</span>
<span style="--delay:0.1s;--color:#f0f">a</span>
<span style="--delay:0.2s;--color:#ff0">p</span>
<span style="--delay:0.3s;--color:#0f0">p</span>
<span style="--delay:0.4s;--color:#0ff">y</span>
<span style="--delay:0.5s;--color:#00f">N</span>
<span style="--delay:0.6s;--color:#800080">e</span>
<span style="--delay:0.7s;--color:#008080">w</span>
<span style="--delay:0.8s;--color:#ff6347">Y</span>
<span style="--delay:0.9s;--color:#ee82ee">e</span>
<span style="--delay:1.0s;--color:#8b4513">a</span>
<span style="--delay:1.1s;--color:#fa8072">r</span>
</div>
</body>
</html>

在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图4所示的动画效果。

图4  跳跃的字符

3.霓虹字符

通过滤镜的方式让文字发光,形成霓虹文字效果。编写HTML文件内容如下。

<!DOCTYPE html>
<html>
<head>
<title>霓虹字符</title>
<style>
.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);
}
}
</style>
</head>
<body>
<div class="container">
<span>W</span>
<span>U</span>
<span>H</span>
<span>A</span>
<span>N</span>
</div>
</body>
</html>

在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图5所示的动画效果。

图5  霓虹文字

CSS动画实例:跳跃的字符的更多相关文章

  1. CSS动画实例

    上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果 代码:最外层div包含2个小的div : a和b.   a有左右边框(高度 ...

  2. CSS动画实例:太极图在旋转

    利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1.旋转的太极图 设页面中有<div ...

  3. CSS动画实例:移动的眼珠子

    适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...

  4. CSS动画实例:小圆球的海洋

    CSS背景属性用于定义HTML元素的背景,在CSS提供的背景属性中, background-image:指定要使用的一个或多个背景图像: background-color:指定要使用的背景颜色: ba ...

  5. CSS动画实例:旋转的圆角正方形

    在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...

  6. CSS动画实例:一颗躁动的心

    在页面中放置一个类名为container的层作为盛放心心的容器,在该层中再定义一个名为heart的子层,HTML代码描述如下: <div class="container"& ...

  7. CSS动画实例:Loading加载动画效果(三)

    3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  8. CSS动画实例:升空的气球

    1.制作一个气球 设页面中有<div class="balloon"></div>,为. balloon设置样式规则如下: .balloon { heigh ...

  9. CSS动画实例:行星和卫星

    设页面中有<div class=" planet "></div>,用来绘制一个行星和卫星图形.这个图形包括三部分:行星.卫星和卫星旋转的轨道.定义. pl ...

随机推荐

  1. 设计模式:decade模式

    目的:为系统中的一组联动接口提供一个高层次的接口,从而降低系统的复杂性 优点:使用窗口模式可以使得接口变少 继承关系图: 例子: class Subsystem1 { public: void Ope ...

  2. Shell基本语法---shell数组

    shell数组 arr=( ) #定义数组 echo ${#arr[*]} #打印数组长度 echo ${arr[]} #打印数组的第一个成员 echo ${arr[]} #打印数组的二个成员 ech ...

  3. 一年经验Java开发0713面试

    @ 目录 介绍一下你做的某些模块,有些什么比较复杂的地方? 你们的文件怎么存储的? 怎么没有用文件服务器? 文件存储有没有做备份? 在项目上有没有什么搞不定的问题? 对搞不定的问题你是怎么处理的? 你 ...

  4. 前端学习(一):Html

    进击のpython ***** 前端学习--HTML HTML全称HyperText Mackeup Language,超文本标记语言 网页的超链接,图片,音频,视频都可以超文本 标记就相当于你在本子 ...

  5. 《谁说菜鸟不会数据分析》高清PDF全彩版|百度网盘免费下载|Python数据分析

    <谁说菜鸟不会数据分析>高清PDF全彩版|百度网盘免费下载|Python数据分析 提取码:p7uo 内容简介 <谁说菜鸟不会数据分析(全彩)>内容简介:很多人看到数据分析就望而 ...

  6. map 函数基本写法

    map(需要对对象使用的函数,要操作的对象) 函数可以是自定义的,也可以是内置函数的,或者 lambda 匿名函数 操作的对象多为 可迭代对象可以是函数名的列表集合     2020-05-04

  7. PHP rsort() 函数

    实例 对数组 $cars 中的元素按字母进行降序排序: <?php$cars=array("Volvo","BMW","Toyota" ...

  8. PHP xml_set_default_handler() 函数

    定义和用法 xml_set_default_handler() 函数为 XML 解析器建立默认的数据处理器.高佣联盟 www.cgewang.com 该函数规定在只要解析器在 XML 文件中找到数据时 ...

  9. 6.6 省选模拟赛 线段 二维数点问题 树套树 CDQ分治

    LINK:线段 还是太菜了 没看出这道题真正的模型 我真是一个典型的没脑子选手. 考虑如何查询答案. 每次在一个线段x的状态被更改后 可以发现有影响的是 和x相连那段极长连续1子段. 设这个子段左端点 ...

  10. 基于DispatchProxy打造自定义AOP组件

    DispatchProxy是微软爸爸编写的一个代理类,基于这个,我扩展了一个AOP组件 暂时不支持依赖注入构造方法,感觉属性注入略显麻烦,暂时没打算支持 基于特性的注入流程 [AttributeUsa ...