前言

利用@keyframe规则和animation常用属性做一个页面Loading时的小动画。

1  @keyframe规则简介

  • @keyframes定义关键帧,即动画每一帧执行什么。
    
    要使用关键帧, 先创建一个带名称的@keyframes规则,以便后续使用 animation-name 这个属性来调用指定的@keyframes. 每个@keyframes 规则包含多个关键帧,也就是一段样式块语句,每个关键帧有一个百分比值作为名称,代表在动画进行中,在哪个阶段触发这个帧所包含的样式。
    
    关键帧的编写顺序没有要求,最后只会根据百分比按由小到大的顺序触发。
  • 语法
    @keyframes <identifier> {
    [ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
    } <identifier>
    帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。
    from
    等效于 %.
    to
    等效于 %.
  • 注意⚠️:@keyframes 不能在内联样式中使用

2  animation常用属性简介

  • animation定义动画每一帧如何执行。
    该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes规则实现。
  • animation的属性
    1 animation-delay
    设置延时,即从元素加载完成之后到动画序列开始执行的这段时间,单位一般为秒(s)或毫秒(ms),若为负值表示跳过前几秒执行。
    2 animation-direction
    设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
    • normal:默认值,动画按正常播放;

    • reverse:动画反向播放;

    • alternate:动画在奇数次正向播放,在偶数次反向播放;

    • alternate-reverse:动画在奇数次反向播放,在偶数次正向播放;

    • initial:设置该属性为它的默认值;

    • inherit:从父元素继承该属性。

    3 animation-duration
    设置动画一个周期的时长。
    4 animation-iteration-count
    设置动画重复次数, 可以指定infinite无限次重复动画
    5 animation-name
    指定由@keyframes描述的关键帧名称。
    6 animation-play-state
    允许暂停和恢复动画。
    • paused:指定动画暂停;

    • running:指定动画运行;

    7 animation-timing-function
    设置动画速度, 即通过建立加速度曲线,设置动画在关键帧之间是如何变化。
    8 animation-fill-mode
    指定动画执行前后如何为目标元素应用样式。

3 实例:一个页面Loading时的小动画

  • 点击此处查看动画效果
  • 代码如下
    /*一个loading动画*/
    /*@keyframes规则*/
    @keyframes pageLoading{ /*用“0%-100%”或者“from-to”都可以*/
    from{
    width: 0px;height: 0px; opacity: ; /*渐变改变宽度和高度,并且设置opacity,使颜色越来越淡*/
    }
    to{
    width: 100px;height: 100px;opacity: ;
    }
    }
    /*画一个页面居中的圆形*/
    .loading{
    width: 400px;
    height: 400px;
    position: relative;
    }
    .loading:before,
    .loading:after {
    position: absolute; /*一定要绝对定位,不然不会出现*/
    content: '';
    width: 0px;
    height: 0px;
    border-radius: %;
    top: ;bottom: ;left: ;right: ;margin:auto; /*元素页面居中,一定要将上下左右的值设置为0*/
    background: rgb(, , );
    animation: pageLoading 1s linear infinite; /*动画渐变变大,linear infinite让动画不断渐变不要停*/
    }
    /*现在我们需要让后一个圆比前一个圆后渐变*/
    .loading:after{
    animation-delay: .5s;
    }

利用@keyframe及animation做一个页面Loading时的小动画的更多相关文章

  1. 利用JS跨域做一个简单的页面訪问统计系统

    事实上在大部分互联网web产品中,我们一般会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便能够在这些统计系统中看到自己站点页面详细的訪问情况.可是有些时候,因为一些特殊情况,我 ...

  2. 使用php后台给自己做一个页面路由,配合ajax实现局部刷新。

    今天就要放假了,把近来囤积的小玩意儿总结整理一下. 在请求一个html页面来嵌入到当前页会有一个问题,就是跟随请求过来的html他的样式表和脚本会失效.是因为文档加载的先后顺序等问题造成的.因此,加载 ...

  3. 利用JS跨域做一个简单的页面访问统计系统

    其实在大部分互联网web产品中,我们通常会用百度统计或者谷歌统计分析系统,通过在程序中引入特定的JS脚本,然后便可以在这些统计系统中看到自己网站页面具体的访问情况.但是有些时候,由于一些特殊情况,我们 ...

  4. 利用高德地图javascriptAPI做一个自己的地图

    最近由于项目中需要制作一个地图,用来选择活动地点,我就花了两天利用高德地图的javascriptAPI自制了一个地图的demo.在这了记录一下我学习的过程. 一.进入高德地图官网,再找到高德地图的开放 ...

  5. 利用html5的localStorage做一个备忘录

    实现一个便签功能,可以记录内容和写的时间,当网页从新载入,可以读取以前的记录. html文档 <!DOCTYPE html> <html> <head lang=&quo ...

  6. js利用点击事件做一个简单的计算器

    先放一个样式图: 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  7. 初识canvas,使用canvas做一个百分比加载进度的动画

    canvas作为H5中重要的新增特性,使开发者可以用它来创作各种令人惊叹的作品.先来看一下浏览器对canvas的支持情况. <canvas> 标签定义图形,比如图表和其他图像,我们使用脚本 ...

  8. python之做一个简易的翻译器(一)

    平时经常在网上翻译一些单词,突发奇想,可不可以直接调某些免费翻译网站的接口呢?然后做一个图形界面的翻译小工具?下面开始实践 1.先找一下有哪些免费翻译的接口 百度了一下关键字“免费翻译接口”,然后找到 ...

  9. 通过用jQuery写一个页面,我学到了什么

    概述 前几天面试,hr发来一个测试文件,让我做做看.我一看,其实就是根据PSD需求写一个页面,再加上一些互动效果即可. 刚好我之前学了切图,jquery等知识还没练手过,于是高兴的答应了. 最后花了3 ...

随机推荐

  1. 子线程中刷新了UI

    This application is modifying the autolayout engine from a background thread, which can lead to engi ...

  2. Ubuntu14.04下初步使用MongoDB

    不多说,直接上干货! Ubuntu14.04下Mongodb(在线安装方式|apt-get)安装部署步骤(图文详解)(博主推荐) shell命令模式 输入mongo进入shell命令模式,默认连接的数 ...

  3. Log4Net快速配置

    1. Log4NET的概念: a) 级别:trace.debug.info.warn.error.fatal.常用debug(调试信息,程序员临时跟踪执行,在正式运行的项目中应该不显示):warn(警 ...

  4. ThinkPHP5 (路径优化,路由)

    路径:www.tp5.comm/index.php/index/index/index 站点路径/入口文件/模块/控制器/方法 一.绑定模块 public下的php文件,如index.php,内部写 ...

  5. JDBC的总结

    JDBC归纳: DriverManger:驱动管理器类 要操作数据库,必须先与数据库创建连接,得到连接对象 public static Connection getConnection(String ...

  6. js input 只能输入数字

    HTML网页上这么写 <input type="text" style="ime-mode:disabled;" onpaste="return ...

  7. Python更换pip源,更换conda源

    更换pip源: 1.在windows文件管理器中,输入 %APPDATA% 2.在该目录下新建pip文件夹,然后到pip文件夹里面去新建个pip.ini文件 3.在新建的pip.ini文件中输入以下内 ...

  8. Vue学习之路第九篇:双向数据绑定 v-model指令

    1.学习准备: ①:双向数据绑定可以简单理解为:后端定义的数据改变,前端页面展示的时候会自动改变,数据通过前端页面修改的时候,后端定义的数据内容也会随之改变. ②:指令中只有v-model可以实现双向 ...

  9. freeswitch 编码协商

    编辑 /usr/local/freeswitch/conf/sip_profiles/internal.xml 添加注释     <param name="inbound-zrtp-p ...

  10. Flask入门系列(转载)

    一.入门系列: Flask入门系列(一)–Hello World 项目开发中,经常要写一些小系统来辅助,比如监控系统,配置系统等等.用传统的Java写,太笨重了,连PHP都嫌麻烦.一直在寻找一个轻量级 ...