css方块跳动且颜色变化,CSS3 波动的方块

最新推荐文章于 2022-10-25 17:44:58 发布
最新推荐文章于 2022-10-25 17:44:58 发布
阅读量254 收藏
点赞数
文章标签： css方块跳动且颜色变化

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;

}

}

SonIC Lab
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3彩色矩阵方块波浪动画特效
06-11
一款CSS3 animation属性制作的彩色矩阵方块波浪动画特效，方块的大小变化形成波浪动画效果。
css方块跳动且颜色变化,CSS3 方块变换动画
weixin_39907713的博客
08-04 264
CSS语言：CSSSCSS确定body {background: #1a4366; }.square {width: 15px;height: 10px;position: absolute;top: 50%;left: 50%;background: #73b3ff;-webkit-animation: grow 3s infinite cubic-bezier(0.53, 0.68, 0.53...
每日小知识（css篇）-- 心动的感觉（css画会跳动的红心）
weixin_45663697的博客
12-22 635
实现效果  心型缩小后回到原来大小 实现步骤  有两种实现方法 方法一： 准备四个div，一个div作为容器，一个弄成正方形，另外两个画圆，通过transform: translate();来移动他们的位置，拼接成下面这个样子 接下来给容器div设置transform: rotate(45deg)，让他旋转45°，再去掉背景颜色设，然后把其他div的背景颜色都设置为red，这样就完成了一个心型。 代码 <style> * { padding: 0;
CSS3小方块跳动
diaojing1670的博客
08-02 296
方块跳动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跳动</title> <style> .box:before { ...
css变换
huijie_0716的博客
03-17 501
移动 移动 translate(x,y) 水平移动 translateX() 垂直移动 translateY() 水平移动500像素 transform: translateX(500px); 垂直移动500像素 transform: translateY(500px); 对角线移动 transform: translate(500px,400px); 旋转 ...
纯CSS3方块跳动加载动画特效特效代码
03-20
【纯CSS3方块跳动加载动画特效特效代码】是一种利用现代浏览器支持的CSS3特性实现的网页加载动画。在网页设计中，加载动画能够提升用户体验，为等待内容加载的过程增添趣味性和视觉吸引力。这种特效尤其适用于那些...
创意方块跳动CSS3加载动画.zip
07-11
【创意方块跳动CSS3加载动画】是一个利用现代网页技术——CSS3——设计的动态加载效果。在网页设计中，加载动画是必不可少的一部分，它能够吸引用户注意力，同时为页面内容的加载提供视觉反馈，使得用户体验更加流畅...
CSS3方块 圆形跳动loading加载动画.zip
07-11
代码片段： var thisIndex = $(this).index(); var divLeft = thisIndex*100 "px"; console.log(thisIndex);...$(".wrap-con div div").css({ "display" : "block" }); $(this).attr("a","on") };
CSS3 3D方块弹跳动画特效
06-24
在本文中，我们将深入探讨如何使用CSS3来创建一个引人入胜的3D方块弹跳动画特效。这个特效展示了两个方块按照特定顺序依次弹跳，形成一个连续、循环的动态效果，增强了用户体验并增添了视觉吸引力。 首先，我们需要...
创意方块跳动CSS3加载动画
06-24
【创意方块跳动CSS3加载动画】是一种利用现代网页技术——CSS3，设计出的动态效果，常用于网页加载过程中的视觉展示。这个动画特效通过方块的动态跳动，给用户带来一种活泼且有趣的等待体验，既能够吸引用户的注意力...
CSS-transform 平面/空间（移动、旋转、缩放、过渡）略解以及示例
最新发布
NewHouser的博客
10-25 5980
transform: translate(水平移动距离，垂直移动距离);//距离的取值可以是数字或百分比向右向下为正数，向左向上为负数括号内只填一个值，默认为水平方向移动的距离
41.css3设置变形(平移和旋转)
越努力越幸运的博客
05-04 750
文章目录css3设置变形css3设置平移（translateX、translateY、translateZ） css3设置变形 变形是指通过css来改变元素的形状或位置 变形不会影响到页面布局 使用transform来设置变形效果 css3设置平移（translateX、translateY、translateZ） 使用transfrom设置变形， 值translateX让元素沿着x轴平移 值translateY让元素沿着Y轴平移 值translateZ让元素沿着Z轴平移 详见代码，如下： <
css平移
weixin_54138158的博客
05-04 5862
目录 一、变形就是指通过CSS来改变元素的形状或位置 二、平移如何使元素在页面的正中大小不确定，仅被内容撑开) 三、z轴平移（并没有改变元素的大小） 一、变形就是指通过CSS来改变元素的形状或位置 变形不会影响到页面的布局 transform 用来设置元素的变形效果 平移： translateX() 沿着x轴方向平移 translateY() 沿着y轴方向平移 translateZ() 沿着z轴方向平移 平移元素，百分比是相对于自身计算的 transform: tran...
transform: translateY(-100%)偏移实现上滑隐藏导航栏
热门推荐
魏少
07-03 2万+
transform:translateY(100%) 语法： Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。 语法： transform ： none ; 也就是： tran...
transform: translateY(-50%) 实现元素垂直居中效果
时清云的博客
09-10 3137
html> html lang="en"> head> meta charset="UTF-8"> title>transformtitle> style> .demo1{ position: relative; width: 200px; height: 200px;
css上下浮动动画效果
weixin_42333548的博客
12-17 1万+
比如有一个非gif的导向箭头，需要微微浮动提示用户具体操作导向，用css去写，实现方法如下： 1、首先创建一个dom元素，controller是包裹导向箭头的容器，img是导向箭头图片 <div class="controller"> <img src="xxxx" alt=""> </div> 2、css中创建动画，动画的快慢速度可以通过元素...
CSS3中的变形
zzbxyz
11-07 593
CSS3变形是一些效果的集合 如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。 语法:transform:[transform-function];  (括号内为变形函数，可以是一个也可以是多个) 变形函数 2D位移： translate()：平移函数，基于X、Y坐标重新定位元素的位置 示例1:
css 跳跃动画,如何使用纯CSS实现方块跳跃的动画（附源码）
weixin_29476659的博客
08-03 713
本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果预览源代码下载https://github.com/comehope/front-end-daily-challenges代码解读定义 dom，容器中包含 2 个子元素，分别代表 1 个女生和一群男生(4个)，每个 span 元素代表 1 个人(1 个方块)...
关键帧动画
weixin_46848830的博客
03-11 956
今天在写东西，发现许多东西都忘记用法，犯了很多小错误 关键帧动画 @keyframes jump { 3.5% { transform: translateY(-6px) rotateY(-9deg); } 9.5% { transform: translateY(5px) rotateY(7deg); } 15.5% { transform: translateY(-3px) rotateY(-5deg); } 21.5% { -webkit-transform: transla
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值