CSS

语言：

CSSSCSS

确定

.element-1 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 0.1s;

animation-delay: 0.1s;

}

.element-1:nth-of-type(odd) {

-webkit-transform: translateY(2px);

-ms-transform: translateY(2px);

transform: translateY(2px);

}

.element-1:nth-of-type(even) {

-webkit-transform: translateY(1px);

-ms-transform: translateY(1px);

transform: translateY(1px);

}

.element-2 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 0.2s;

animation-delay: 0.2s;

}

.element-2:nth-of-type(odd) {

-webkit-transform: translateY(4px);

-ms-transform: translateY(4px);

transform: translateY(4px);

}

.element-2:nth-of-type(even) {

-webkit-transform: translateY(2px);

-ms-transform: translateY(2px);

transform: translateY(2px);

}

.element-3 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 0.3s;

animation-delay: 0.3s;

}

.element-3:nth-of-type(odd) {

-webkit-transform: translateY(6px);

-ms-transform: translateY(6px);

transform: translateY(6px);

}

.element-3:nth-of-type(even) {

-webkit-transform: translateY(3px);

-ms-transform: translateY(3px);

transform: translateY(3px);

}

.element-4 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 0.4s;

animation-delay: 0.4s;

}

.element-4:nth-of-type(odd) {

-webkit-transform: translateY(8px);

-ms-transform: translateY(8px);

transform: translateY(8px);

}

.element-4:nth-of-type(even) {

-webkit-transform: translateY(4px);

-ms-transform: translateY(4px);

transform: translateY(4px);

}

.element-5 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s;

}

.element-5:nth-of-type(odd) {

-webkit-transform: translateY(10px);

-ms-transform: translateY(10px);

transform: translateY(10px);

}

.element-5:nth-of-type(even) {

-webkit-transform: translateY(5px);

-ms-transform: translateY(5px);

transform: translateY(5px);

}

.element-6 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 0.6s;

animation-delay: 0.6s;

}

.element-6:nth-of-type(odd) {

-webkit-transform: translateY(12px);

-ms-transform: translateY(12px);

transform: translateY(12px);

}

.element-6:nth-of-type(even) {

-webkit-transform: translateY(6px);

-ms-transform: translateY(6px);

transform: translateY(6px);

}

.element-7 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 0.7s;

animation-delay: 0.7s;

}

.element-7:nth-of-type(odd) {

-webkit-transform: translateY(14px);

-ms-transform: translateY(14px);

transform: translateY(14px);

}

.element-7:nth-of-type(even) {

-webkit-transform: translateY(7px);

-ms-transform: translateY(7px);

transform: translateY(7px);

}

.element-8 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 0.8s;

animation-delay: 0.8s;

}

.element-8:nth-of-type(odd) {

-webkit-transform: translateY(16px);

-ms-transform: translateY(16px);

transform: translateY(16px);

}

.element-8:nth-of-type(even) {

-webkit-transform: translateY(8px);

-ms-transform: translateY(8px);

transform: translateY(8px);

}

.element-9 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 0.9s;

animation-delay: 0.9s;

}

.element-9:nth-of-type(odd) {

-webkit-transform: translateY(18px);

-ms-transform: translateY(18px);

transform: translateY(18px);

}

.element-9:nth-of-type(even) {

-webkit-transform: translateY(9px);

-ms-transform: translateY(9px);

transform: translateY(9px);

}

.element-10 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

.element-10:nth-of-type(odd) {

-webkit-transform: translateY(20px);

-ms-transform: translateY(20px);

transform: translateY(20px);

}

.element-10:nth-of-type(even) {

-webkit-transform: translateY(10px);

-ms-transform: translateY(10px);

transform: translateY(10px);

}

.element-11 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 1.1s;

animation-delay: 1.1s;

}

.element-11:nth-of-type(odd) {

-webkit-transform: translateY(22px);

-ms-transform: translateY(22px);

transform: translateY(22px);

}

.element-11:nth-of-type(even) {

-webkit-transform: translateY(11px);

-ms-transform: translateY(11px);

transform: translateY(11px);

}

.element-12 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 1.2s;

animation-delay: 1.2s;

}

.element-12:nth-of-type(odd) {

-webkit-transform: translateY(24px);

-ms-transform: translateY(24px);

transform: translateY(24px);

}

.element-12:nth-of-type(even) {

-webkit-transform: translateY(12px);

-ms-transform: translateY(12px);

transform: translateY(12px);

}

.element-13 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 1.3s;

animation-delay: 1.3s;

}

.element-13:nth-of-type(odd) {

-webkit-transform: translateY(26px);

-ms-transform: translateY(26px);

transform: translateY(26px);

}

.element-13:nth-of-type(even) {

-webkit-transform: translateY(13px);

-ms-transform: translateY(13px);

transform: translateY(13px);

}

.element-14 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 1.4s;

animation-delay: 1.4s;

}

.element-14:nth-of-type(odd) {

-webkit-transform: translateY(28px);

-ms-transform: translateY(28px);

transform: translateY(28px);

}

.element-14:nth-of-type(even) {

-webkit-transform: translateY(14px);

-ms-transform: translateY(14px);

transform: translateY(14px);

}

.element-15 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 1.5s;

animation-delay: 1.5s;

}

.element-15:nth-of-type(odd) {

-webkit-transform: translateY(30px);

-ms-transform: translateY(30px);

transform: translateY(30px);

}

.element-15:nth-of-type(even) {

-webkit-transform: translateY(15px);

-ms-transform: translateY(15px);

transform: translateY(15px);

}

.element-16 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 1.6s;

animation-delay: 1.6s;

}

.element-16:nth-of-type(odd) {

-webkit-transform: translateY(32px);

-ms-transform: translateY(32px);

transform: translateY(32px);

}

.element-16:nth-of-type(even) {

-webkit-transform: translateY(16px);

-ms-transform: translateY(16px);

transform: translateY(16px);

}

.element-17 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 1.7s;

animation-delay: 1.7s;

}

.element-17:nth-of-type(odd) {

-webkit-transform: translateY(34px);

-ms-transform: translateY(34px);

transform: translateY(34px);

}

.element-17:nth-of-type(even) {

-webkit-transform: translateY(17px);

-ms-transform: translateY(17px);

transform: translateY(17px);

}

.element-18 {

-webkit-animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

animation: fade_in 1s 0s forwards, fade_out 1s 3s forwards;

-webkit-animation-delay: 1.8s;

animation-delay: 1.8s;

}

.element-18:nth-of-type(odd) {

-webkit-transform: translateY(36px);

-ms-transform: translateY(36px);

transform: translateY(36px);

}

.element-18:nth-of-type(even) {

-webkit-transform: translateY(18px);

-ms-transform: translateY(18px);

transform: translateY(18px);

}

[class*="element"] {

background: #4096ee;

opacity: 0;

width: 50px;

height: 50px;

margin: 5px;

float: left;

}

@-webkit-keyframes fade_in {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

@keyframes fade_in {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

@-webkit-keyframes fade_out {

from {

opacity: 1;

}

to {

opacity: 0;

}

}

@keyframes fade_out {

from {

opacity: 1;

}

to {

opacity: 0;

}

}

css方块跳动且颜色变化,CSS3 波动的方块相关推荐

  1. CSS3背景颜色变化、平移的动画效果

    CSS3动画:变换颜色和平移 开发工具与关键技术:DW-CSS3动画+关键帧 作者:徐晶旗 撰写时间:2019年1月18日 1.首先我在html中建立一个div标签,加上一个class的类,给它的类命 ...

  2. CSS实现a标签去掉下划线以及点击不再有颜色变化

    去掉下划线 a{text-decoration: none; } 点击字体不再有颜色变化 统一设置全局默认字体颜色为黑色即可 *{color: #000000; }

  3. css怎么设置列表颜色,css怎么设置table颜色

    css设置table颜色的方法:首先找到并打开需要设置的table代码内容:然后通过color属性设置表格中文字的颜色:最后通过background属性设置表格的背景颜色即可. 本文操作环境:wind ...

  4. 背景颜色渐变 css3 ---- 转自：至尊宝的BLOG http://blog.sina.com.cn/zzbnie

    背景颜色渐变 css3 一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-sto ...

  5. 16进制的透明颜色css_在CSS中使用十六进制颜色

    16进制的透明颜色css Standard CSS color keywords are limited to 149 named shades; the hexadecimal (or " ...

  6. 获取图片像素颜色,转换为CSS3 box-shadow显示

    原理: 1.使用FileReader 读取图片 2.使用canvas 的 getImageData 获取图片像素信息 3.将像素信息转换为CSS3 box-shadow 代码: <!DOCTYP ...

  7. php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...

    在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...

  8. 技巧分享：如何利用CSS属性修改图片颜色？

    熟悉前端开发的小伙伴肯定有遇到过这种情况,那就是需要给一个图标或者图片增加一个移动变色等属性,传统做法就是再添加一个颜色的图片文件替换,那么有没有可能直接利用css属性来变更颜色呢? 其实是可以实现的 ...

  9. css的font修改颜色,css的font字体颜色如何设置

    css的font字体颜色设置方法:1.直接在标签上使用"color:颜色"设置字体颜色:2.通过给font标签添加class属性,在css标签中通过该class设置字体颜色. 本教 ...

  10. 小白学编程(CSS)：跳动的文字

    先上效果: CSS:文字跳动特效 思路: 这次我们的目标是实现文字的跳动.第一步:在页面中显示文字.HTML代码如下: <body><h1><span>嗨</ ...

最新文章

  1. 敏捷团队如何通过Leangoo领歌迭代看板进行迭代规划和任务协同
  2. String.Format in javascript
  3. Android中自定义checkbox样式
  4. linux 中*与？结合起来的威力，匹配一个或者多个
  5. mysql校对规则_MYSQL校对规则
  6. 前端学习（1890）vue之电商管理系统电商系统之绘获取用户列表数据
  7. linux桌面隐藏鼠标,如何隐藏鼠标光标
  8. Unwind 栈回溯详解：libunwind
  9. Hurst指数估计方法（时域）——DFA
  10. NR 5G SSB介绍
  11. 2020年显卡天梯图
  12. 91、储存物品的火灾危险性分类
  13. 手机lbs位置服务盘点
  14. TextView中英文排版混乱
  15. 解决验证码显示不了的方案
  16. SpringBoot项目访问jsp页面500问题处理
  17. 真正意义上第一个APP 可以用的 老黄历~~~
  18. ASCII，ISO8859-1，GBK，GB18030，Unicode，UTF-8详解
  19. java wgs84转西安80_如何将西安80坐标转换为国家2000（或WGS84）坐标系？
  20. quartus频率计 时钟设置_频率计实验报告.doc

热门文章

  1. Ambiguous method call.both
  2. 中国土地市场网数据采集爬取landChain抓取Python爬虫
  3. mongodb默认的用户名密码_MongoDB 用户名密码登录
  4. 变化检测综述：Change Detection Based on Artificial Intelligence: State-of-the-Art and Challenges
  5. 分享美容美发预约下单小程序开发制作功能介绍
  6. 一文读懂DeFi衍生品市场六大方向及底层发展逻辑 |链捕手
  7. Python-人脸识别并判断表情 笑脸或非笑脸 使用笑脸数据集genki4k
  8. java 输出大写字母与小写字母
  9. qq街景输入 dir-item.js
  10. 如何在word中一次性删除硬回车或软回车