一. 知识点回顾

1.动画

属性描述
@keyframes规定动画模式
animation设置所有动画属性的简写属性
animation-delay规定动画开始的延迟
animation-direction规定动画是向前播放、向后播放还是交替播放
animation-duration规定动画完成一个周期应花费的时间
animation-fill-mode规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）
animation-iteration-count规定动画应播放的次数
animation-name规定 @keyframes 动画的名称
animation-play-state规定动画是运行还是暂停
animation-timing-function规定动画的速度曲线。
 animation: 动画名称 动画时间 动画曲线 何时开始 播放次数 是否反方向; 
 alternate:表示动画先正常运行再反方向运行，并持续交替
 infinite:表示无限循环

2.文字阴影

值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色
text-shadow: h-shadow v-shadow blur color;
text-shadow: 水平阴影位置(必须) 垂直阴影位置(必须) 模糊距离(可选) 阴影颜色(可选);

二.代码演示

  <body>
      <h1>
          <span>h</span>
          <span>e</span>
          <span>l</span>
          <span>l</span>
          <span>o</span>
          <span>!</span>
      </h1>
  </body>

    <style>
        body {
            height: 800px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: pink;
        }
        h1 span {
            top: 20px; /*字符上下浮动*/
            position: relative;
            animation: loading 0.3s ease 0s infinite alternate; /*引用动画*/
            /* animation: 动画名称 动画时间 动画曲线 何时开始 播放次数 是否反方向; 
            alternate:表示动画先正常运行再反方向运行，并持续交替
            infinite:表示无限循环*/
            font-size: 100px;
            color: white;
            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 10px 10px rgba(0, 0, 0, 0.5);
     /*text-shadow: 水平阴影位置(必须) 垂直阴影位置(必须) 模糊距离(可选) 阴影颜色(可选);
       text-shadow: h-shadow v-shadow blur color; */
        }
        h1 span:nth-child(2) { 
            animation-delay: 0.1s; 
        }
        h1 span:nth-child(3) { 
            animation-delay: 0.2s; 
        }
        h1 span:nth-child(4) { 
            animation-delay: 0.3s; 
        }
        h1 span:nth-child(5) { 
            animation-delay: 0.4s; 
        }
        h1 span:nth-child(6) { 
            animation-delay: 0.5s; 
        }
        @keyframes loading {  /* 定义动画*/
            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, 0.3);     
  /*上升的时候阴影要在文字下面一些，所以垂直阴影的位置坐标和模糊距离要大一些*/
            }
        }
    </style>

注意事项：

1.一般写垂直阴影位置连续的多组文字阴影，使文字具有立体感，即在静止和跃动的时候文字和投影之间都不会有空隙

2.文字阴影的颜色是和文字同色的深色系，使其具有立体感

3.最后一组文字阴影的颜色是透明的黑色主要是为了展示字符跳动过程中的投影效果，由于近大远小，字符上升时的投影颜色要浅一些，下来的时候颜色要深一些

三.效果演示

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

# 动画 # css # html
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Springboot+MySQL 实现从数据库获取数据展示到前端

1.运行效果效果图如下：2.创建数据库表数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。3.新建SpringBoot项目1、选择Spring Initial...

avatar 腾讯云开发者社区
cover

腾讯云建官网：一个完整的自助建站的过程，不用代码，2小时就可以制作自己的网站

avatar 腾讯云开发者社区

数据库 实验二 数据库的简单查询和连接查询实验

– l）用Transact-SQL语句表示下列操作．在学生选课库中实现其数据查询操作．– ①求数学系学生的学号和姓名。select sno,sname from student where sdept='MA';– ②求选修了课程的学生学号。select distinct sno from sc;– ③求选修C1课程的学生学号和成绩，并要求对查询结果按成绩降序排列，如果成绩相同则按学号升序排列。s

avatar 腾讯云开发者社区