用C3中的animation和transform写的一个模仿加载的时动画效果

时间:2022-04-11 18:10:53

用用C3中的animation和transform写的一个模仿加载的时动画效果!

不多说直接上代码;

html标签部分

<div class="wrap">
<h2>用C3中的animation和transform写的一个模仿加载的时动画效果</h2>
<div class="demo">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

css部分

<style>
.demo{
width:200px;height:30px;
margin:100px auto;

}
.demo div{
float:left;
width:5px;
height:30px;
margin-left:5px;

}
@-webkit-keyframes fluctuation{
20%{
transform:scaleY(0.5);
}
0%,40%,70%,100%{
transform: scaleY(1);
}
}

.demo div:nth-of-type(1){
background:red;
animation: fluctuation 1s 0s ease-out infinite;
}
.demo div:nth-of-type(2){
background:yellow;
animation: fluctuation 1s 0.9s ease infinite;
}
.demo div:nth-of-type(3){
background:blue;
animation: fluctuation 1s 0.6s ease infinite;
}
.demo div:nth-of-type(4){
background:green;
animation: fluctuation 1s 0.4s ease infinite;
}
.demo div:nth-of-type(5){
background:pink;
animation: fluctuation 1s 0s ease infinite;
}
</style>

希望对初学者有点帮助,第一次写博客如有错误或者更好的实现方法欢迎私信。

用C3中的animation和transform写的一个模仿加载的时动画效果的更多相关文章

  1. 仿微信中加载网页时带线行进度条的WebView的实现

    finddreams:http://blog.csdn.net/finddreams/article/details/44172639 为了仿微信中加载网页时带进度条的WebView的实现,首先我们来 ...

  2. 手写web框架之加载Controller,初始化框架

    1,加载Controller     我们需要创建 一个ControllerHelper类,让它来处理下面的逻辑:      通过ClassHelper我们可以获取所有定义了Controller注解的 ...

  3. JS事件 加载事件(onload)注意:1&period; 加载页面时,触发onload事件,事件写在&lt&semi;body&gt&semi;标签内。 2&period; 此节的加载页面,可理解为打开一个新页面时。

    加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...

  4. mvc中多参数URL会很长,首次加载不传参数让url很短,路由规则实现方法&lbrack;bubuko&period;com&rsqb;

    如要实现列表中地址全路径“bubuko-11-2.html”,在首次进入时,使用短路径“bubuko.html”,只有再次href后才显示全路径“bubuko-11-2.html”,下面使用路由规则来 ...

  5. 获取WebView加载HTML时网页中的内容

    main.xml如下: [html] view plaincopy <RelativeLayout xmlns:android="http://schemas.android.com/ ...

  6. 记一次解决cmd中执行java提示&quot&semi;找不到或无法加载主类&quot&semi;的问题

    今天遇到一个问题:在cmd命令行中,用javac编译java文件可以成功,但是用java执行却提示“找不到或无法加载主类”.现将该问题的原因以及解决办法记录一下. 先理解一下系统变量path和clas ...

  7. maven工程中防止mapper&period;xml文件被漏掉、未加载的方法

    maven工程中防止mapper.xml文件被漏掉.未加载的方法 就是在pom.xml文件中添加以下内容 <!-- 如果不添加此节点mybatis的mapper.xml文件都会被漏掉. --&g ...

  8. AS中加载gradle时出现Gradle sync failed&colon; Could not find com&period;android&period;tools&period;build&colon;gradle&period;的错误

    时间:2019/12/7 这次接着整理加载gradle时出现的错误 出现的错误: Gradle sync failed: Could not find com.android.tools.build: ...

  9. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. &lbrack;2015hdu多校联赛补题&rsqb;hdu5348 MZL&&num;39&semi;s endless loop

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5348 题意:给你一个无向图,要你将无向图的边变成有向边,使得得到的图,出度和入度差的绝对值小于等于1, ...

  2. 实验:传输层:TCP协议

    一.概述 TCP和UDP处在同一层——运输层,但是它们有很多的不同.TCP是TCP/IP系列协议中最复杂的部分,它具有以下特点: (1) TCP提供 可靠的 数据传输服务,TCP是 面向连接的 .应用 ...

  3. Java读写文件的几种方式

    自工作以后好久没有整理Java的基础知识了.趁有时间,整理一下Java文件操作的几种方式.无论哪种编程语言,文件读写操作时避免不了的一件事情,Java也不例外.Java读写文件一般是通过字节.字符和行 ...

  4. Ubuntu安装steam游戏平台的解决方案

    steam是一个游戏平台,上面提供了很多收费和免费的游戏,在安装的过程中遇到了一些问题,所以把自己遇到的问题及解决方案分享出来供大家参考. 第一步:安装steam平台 sudo apt-get ins ...

  5. &lt&semi;转&gt&semi;堆和栈的区别

    http://blog.csdn.net/hairetz/article/details/4141043 一.预备知识—程序的内存分配    一个由C/C++编译的程序占用的内存分为以下几个部分    ...

  6. Handler和Message以及Looper之间的三角关系

    说到Handler想必大家都经常用到,在非UI线程更新UI那可是利器,用起来也非常容易上手 从使用上来说,我们只需要关注sendMessage和handleMessage即可 所以我们先从Handle ...

  7. DXGI快速截屏录屏技术

    DXGI快速截屏录屏技术 概述   很多地方都需要用到截屏/录屏技术,比如桌面直播,桌面录制等等.在微软Windows平台,有很多截屏的接口,不过大多数性能并不理想,Windows8以后微软引入了一套 ...

  8. php函数long2ip与ip2long&lpar;&rpar;

    long2ip - Converts an long integer address into a string in (IPv4) Internet standard dotted format s ...

  9. 多模块调用Service失败

    最近在搭一个基础架构,整合项目. 在做多模块中调用的时候,在@Autowired的时候找不到service的bean. 解决方案: 需要在启动类加入扫描 @SpringBootApplication( ...

  10. IDEA安装Lombok插件失败的解决方案

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. Lombok简介 Lombok是Java语言的实用工具,确切的说,应 ...