loading动画

.box{

width: 300px;

height: 135px;

border: 2px solid #000;

margin: 200px auto 0;

}

.box p{

text-align: center;

width: 100%;

}

.box div{

width: 30px;

height: 70px;

float: left;

background-color: gold;

margin: 15px;

border-radius: 10px;

}

.box div:nth-child(1){

background-color: red;

animation: loading 0.5s ease 0s infinite alternate;

}

.box div:nth-child(2){

background-color: green;

animation: loading 0.5s ease 0.1s infinite alternate;

}

.box div:nth-child(3){

background-color: pink;

animation: loading 0.5s ease 0.2s infinite alternate;

}

.box div:nth-child(4){

background-color: greenyellow;

animation: loading 0.5s ease 0.3s infinite alternate;

}

.box div:nth-child(5){

background-color: cyan;

animation: loading 0.5s ease 0.4s infinite alternate;

}

@keyframes loading{

from{

transform: scaleY(1);

}

to{

transform: scaleY(0.5);

}

}

loading...

css如何插入动态图,css动态图(作业)相关推荐

  1. css文件插入背景音乐,关注css背景音乐代码

    1.如何隐藏播放器而不影响音乐播放 在css 文件的空白处添加以下代码: #mod_bgmusic{display:none} 不显示播放器,但不影响音乐的播放. 2.让baidu空间背景音乐支持多首 ...

  2. java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格;

    本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...

  3. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  4. html 背景图片比例,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 随着逐浪CMS新版的一些效果逐渐放出,有不少的朋友想全屏的背景图片如何设计. 在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图, ...

  5. 基于JavaScript+css写一个简单的h5动态下雨效果

    基于JavaScript+css写一个简单的h5动态下雨效果 文章目录 什么是前端 展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端 前端它是一个工作,它的 ...

  6. asp.net动态设置CSS等

    首先是后台给前台设置Style属性,设置控件坐标 前台控件: Html代码 <asp:Label ID = "lblDSRText" Text = "当事人&quo ...

  7. html动态轮播效果怎么做,详解JavaScript实现动态的轮播图效果

    利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之 ...

  8. css实现的,桃子桃花动态背景html页面源码

    大家好,今天给大家介绍一款,css实现的,桃子桃花动态背景html页面源码 (图1).送给大家哦,获取方式在本文末尾. 图1 桃子会慢慢摇晃,鼠标经过会加速摇晃(图2) 背景有花瓣雨特效(图3) 图3 ...

  9. 【HTML+CSS+JS】模仿星巴克主页,练习CSS排版,JS实现轮播图以及悬停动画(公开完整源码)

    目录:完整源码仅供学习 一.效果演示 二.完整源代码 2.1 HTML代码 2.2 JS代码 2.3 CSS代码 2.3.1 index.css 2.3.2 base.css 三.完整项目下载 一.效 ...

  10. 【夯实基础--CSS】=> 高级技巧(雪碧图/滑动门/CSS三角形/字体图标(iconfont)等)

    CSS高级技巧 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...

最新文章

  1. android 自定义图片容器,Android应用开发中自定义ViewGroup视图容器的教程
  2. SCCM 2007系列5 播发操作系统下
  3. 【LDA学习系列】神奇的Gama函数Python代码
  4. MySQL查询缓存总结
  5. Mybatis_映射文件配置
  6. java线程安全问题原因及解决办法
  7. .net core linux 编译,.NET Core 源码编译的问题解析
  8. linux 终端与shell输出大小不匹配
  9. tornado web mysql_Tornado WEB服务器框架 Epoll-- 【Mysql数据库】
  10. [CODEVS1911] 孤岛营救问题(分层图最短路)
  11. 使用 jsfl 发布flash IDE 插件
  12. 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数。 数值为0或者字符串不是一个合法的数值则返回0...
  13. 深度解码企业文化体系
  14. Mac端视频字幕压制:HandBrake/Premute/松果压制
  15. 小米盒子尚“健在”傍CNTV挑逗广电总局
  16. 计算机自动重启快捷键,什么是笔记本电脑重启快捷键
  17. English in December
  18. 算法——从9个硬币中找出其中的1枚假硬币
  19. 深耕模具细分领域20载 德惠创新研发领跑行业
  20. 重装mysql_重装MySQL步骤详解

热门文章

  1. dubbo服务的运行方式
  2. jQuery Mobile动态刷新页面样式
  3. 四管前级怎么去掉高低音音调_一些歌曲音调太高怎么才能唱上去??
  4. python海龟绘图画圣诞帽男人_python海龟绘图实例教程
  5. springboot判断有没有库_Springboot 使用JPA @Query 注解 查询语句条件 有可能为空,Oracle数据库...
  6. [转载] 向集合中添加自定义类型--建议在自定义类型的时候要重写equals方法
  7. [转载] java之重写toString
  8. java scanner_Java Scanner radix()方法与示例
  9. 厦门one_理想ONE真是“500万内最好的车”?
  10. java 根据类名示例化类_Java LocalDateTime类| 带示例的getNano()方法