一. 知识点回顾

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

三.效果演示

字符跳动动画效果(Html+Css)相关推荐

android金币动效_Android 仿余额宝数字跳动动画效果完整代码
一:想都不用想的,有图有真相,看着爽了,在看下面源码二:实例源码分析 ①:首先定义接口 package com.demo.tools.view; /** * 数字动画自定义 * * @author ...
android 文字跳动动画,Android 仿余额宝数字跳动动画效果完整代码
Android 仿余额宝数字跳动动画效果完整代码发布时间:2020-08-24 06:55:30 来源:脚本之家阅读:120 作者:曾淘一:想都不用想的,有图有真相,看着爽了,在看下面源码二: ...
html渐变显示动画效果,使用CSS transition和animation改变渐变状态
到目前为止,CSS的渐变属性linear-gradient和radial-gradient已经是很成熟的CSS特性了,而且repeating-linear-gradient和conic-gradien ...
CSS3动画效果-animate.css
为什么80%的码农都做不了架构师?>>> animate.css 是提供炫酷,有趣,跨浏览器css3动画的网站,你可以在高级项目中使用这些效果,为高级浏览器用户提供更好的交互体 ...
html实现的动画效果代码,CSS实现雨滴动画效果的实例代码
玻璃窗今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
android 音符动画效果,纯css实现音符跳动效果
效果如图: image.png 代码: 纯css实现音符跳动效果 .voice { display: flex; align-items: flex-end; justify-content: cen ...
[C语言]实现字符串从头尾分别输出字符的动画效果
环境是Visual Studio2017 //实现字符串从头尾分别输出,直到字符串结束.思路是建立两个数组,以替代方式实现 #include<stdio.h> #include<Wi ...
【登录页星空和捂脸动画特效】vue 实现掘金登录页捂脸动画效果，css 实现登录页星空动画流星效果【通俗易懂】
前言: 这里是展示一下做的登录页的一个好看的样式,同时也写了个下掘金登录页很有意思的捂脸小动画怎么实现的,感觉放在一起还挺好看的. 虽然不知道有没有问题,但是还是声明一下:我就是写来学习学习这种设计, ...

字符跳动动画效果(Html+Css)

一. 知识点回顾

1.动画

2.文字阴影

二.代码演示

注意事项：

三.效果演示

字符跳动动画效果(Html+Css)相关推荐

最新文章

热门文章