CSS动画实例：跳跃的字符

1．翻转的字符

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

</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动画实例：跳跃的字符的更多相关文章

CSS动画实例
上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果代码:最外层div包含2个小的div : a和b. a有左右边框(高度 ...
CSS动画实例：太极图在旋转
利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1．旋转的太极图设页面中有<div ...
CSS动画实例：移动的眼珠子
适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...
CSS动画实例：小圆球的海洋
CSS背景属性用于定义HTML元素的背景,在CSS提供的背景属性中, background-image:指定要使用的一个或多个背景图像: background-color:指定要使用的背景颜色: ba ...
CSS动画实例：旋转的圆角正方形
在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...
CSS动画实例：一颗躁动的心
在页面中放置一个类名为container的层作为盛放心心的容器,在该层中再定义一个名为heart的子层,HTML代码描述如下: <div class="container"& ...
CSS动画实例：Loading加载动画效果（三）
3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
CSS动画实例：升空的气球
1．制作一个气球设页面中有<div class="balloon"></div>,为. balloon设置样式规则如下: .balloon { heigh ...
CSS动画实例：行星和卫星
设页面中有<div class=" planet "></div>,用来绘制一个行星和卫星图形.这个图形包括三部分:行星.卫星和卫星旋转的轨道.定义. pl ...

随机推荐

《Head First 设计模式》：工厂方法模式
正文一.定义工厂方法模式定义了一个创建对象的接口,但由子类决定要实例化的类是哪一个.工厂方法让类把实例化推迟到子类. PS:在设计模式中,"实现一个接口"泛指实现某个超类型(可 ...
题解洛谷 P5443 【[APIO2019]桥梁】
考虑若只有查询操作,那么就可以构造\(Kruskal\)重构树,然后在线询问了,也可以更简单的把询问离线,把询问和边都按权值从大到小排序,然后双指针依次加入对于当前询问合法的边,用并查集维护每个点的答 ...
Linux系统查看硬件信息神器，比设备管理器好用100倍！
大家都知道,当我们的 Linux 系统计算机出现问题时,需要对其排除故障,首先需要做的是找出计算机的硬件信息.下面介绍一个简单易用的应用程序--HardInfo,你可以利用它来显示你电脑的每个硬件方面 ...
cookie 和session的简单比较
1.cookie数据存放在客户的浏览器上,session数据放在服务器上. 2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session ...
面试官：如何在Integer类型的ArrayList中同时添加String、Character、Boolean等类型的数据？ | Java反射高级应用
原文链接:原文来自公众号:C you again,欢迎关注! 1.问题描述 "如何在Integer类型的ArrayList中同时添加String.Character.Boolean等 ...
ken桑带你读源码之scrapy scrapy\core\scheduler.py
从英文来看是调度程序我们看看是怎么调度首先爬虫队列有两个一个是保存在内存中没有历史记录重新开始 42行 self.mqs = self.pqclass(self._newmq) ...
ken桑带你读源码之scrapy scrapy\extensions
logstats.py 爬虫启动时打印抓取网页数 item数 memdebug.py 爬虫结束统计还被引用的内存也就是说gc 回收不了的内存 memusage.py 监控爬虫内存占用 ...
Django学习路36_函数参数反向解析修改404 页面
在 templates 中创建对应文件名的 html 文件 (.html) 注: 开发者服务器发生变更是因为 python 代码发生变化如果 html 文件发生变化,服务器不会进行重启需要自己手动 ...
Python 实现分层聚类算法
''' 1.将所有样本都看作各自一类 2.定义类间距离计算公式 3.选择距离最小的一堆元素合并成一个新的类 4.重新计算各类之间的距离并重复上面的步骤 5.直到所有的原始元素划分成指定数量的类程序要 ...
Python File isatty() 方法
概述 isatty() 方法检测文件是否连接到一个终端设备,如果是返回 True,否则返回 False.高佣联盟 www.cgewang.com 语法 isatty() 方法语法如下: fileObj ...