用用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写的一个模仿加载的时动画效果的更多相关文章
-
仿微信中加载网页时带线行进度条的WebView的实现
finddreams:http://blog.csdn.net/finddreams/article/details/44172639 为了仿微信中加载网页时带进度条的WebView的实现,首先我们来 ...
-
手写web框架之加载Controller,初始化框架
1,加载Controller 我们需要创建 一个ControllerHelper类,让它来处理下面的逻辑: 通过ClassHelper我们可以获取所有定义了Controller注解的 ...
-
JS事件 加载事件(onload)注意:1. 加载页面时,触发onload事件,事件写在<;body>;标签内。 2. 此节的加载页面,可理解为打开一个新页面时。
加载事件(onload) 事件会在页面加载完成后,立即发生,同时执行被调用的程序. 注意:1. 加载页面时,触发onload事件,事件写在<body>标签内. 2. 此节的加载页面,可理解 ...
-
mvc中多参数URL会很长,首次加载不传参数让url很短,路由规则实现方法[bubuko.com]
如要实现列表中地址全路径“bubuko-11-2.html”,在首次进入时,使用短路径“bubuko.html”,只有再次href后才显示全路径“bubuko-11-2.html”,下面使用路由规则来 ...
-
获取WebView加载HTML时网页中的内容
main.xml如下: [html] view plaincopy <RelativeLayout xmlns:android="http://schemas.android.com/ ...
-
记一次解决cmd中执行java提示";找不到或无法加载主类";的问题
今天遇到一个问题:在cmd命令行中,用javac编译java文件可以成功,但是用java执行却提示“找不到或无法加载主类”.现将该问题的原因以及解决办法记录一下. 先理解一下系统变量path和clas ...
-
maven工程中防止mapper.xml文件被漏掉、未加载的方法
maven工程中防止mapper.xml文件被漏掉.未加载的方法 就是在pom.xml文件中添加以下内容 <!-- 如果不添加此节点mybatis的mapper.xml文件都会被漏掉. --&g ...
-
AS中加载gradle时出现Gradle sync failed: Could not find com.android.tools.build:gradle.的错误
时间:2019/12/7 这次接着整理加载gradle时出现的错误 出现的错误: Gradle sync failed: Could not find com.android.tools.build: ...
-
049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
-
[2015hdu多校联赛补题]hdu5348 MZL&#39;s endless loop
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5348 题意:给你一个无向图,要你将无向图的边变成有向边,使得得到的图,出度和入度差的绝对值小于等于1, ...
-
实验:传输层:TCP协议
一.概述 TCP和UDP处在同一层——运输层,但是它们有很多的不同.TCP是TCP/IP系列协议中最复杂的部分,它具有以下特点: (1) TCP提供 可靠的 数据传输服务,TCP是 面向连接的 .应用 ...
-
Java读写文件的几种方式
自工作以后好久没有整理Java的基础知识了.趁有时间,整理一下Java文件操作的几种方式.无论哪种编程语言,文件读写操作时避免不了的一件事情,Java也不例外.Java读写文件一般是通过字节.字符和行 ...
-
Ubuntu安装steam游戏平台的解决方案
steam是一个游戏平台,上面提供了很多收费和免费的游戏,在安装的过程中遇到了一些问题,所以把自己遇到的问题及解决方案分享出来供大家参考. 第一步:安装steam平台 sudo apt-get ins ...
-
<;转>;堆和栈的区别
http://blog.csdn.net/hairetz/article/details/4141043 一.预备知识—程序的内存分配 一个由C/C++编译的程序占用的内存分为以下几个部分 ...
-
Handler和Message以及Looper之间的三角关系
说到Handler想必大家都经常用到,在非UI线程更新UI那可是利器,用起来也非常容易上手 从使用上来说,我们只需要关注sendMessage和handleMessage即可 所以我们先从Handle ...
-
DXGI快速截屏录屏技术
DXGI快速截屏录屏技术 概述 很多地方都需要用到截屏/录屏技术,比如桌面直播,桌面录制等等.在微软Windows平台,有很多截屏的接口,不过大多数性能并不理想,Windows8以后微软引入了一套 ...
-
php函数long2ip与ip2long()
long2ip - Converts an long integer address into a string in (IPv4) Internet standard dotted format s ...
-
多模块调用Service失败
最近在搭一个基础架构,整合项目. 在做多模块中调用的时候,在@Autowired的时候找不到service的bean. 解决方案: 需要在启动类加入扫描 @SpringBootApplication( ...
-
IDEA安装Lombok插件失败的解决方案
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. Lombok简介 Lombok是Java语言的实用工具,确切的说,应 ...