CSS 实现跳动的方块动画
创始人
2024-03-14 00:12:37
0

前言

👏transform-style+transform实现多个小方块,速速来Get吧~
🥇文末分享源代码。记得点赞+关注+收藏!

1.实现效果

在这里插入图片描述

2.实现步骤

  • 定义css变量:正方形长/宽为w;
:root {--w: 30px;}
  • 父容器为一个圆角正方形,添加box-shadow阴影,设置transform-style: preserve-3d,让转换的子元素保留3D转换

在这里插入图片描述

 .container {height: 150px;width: 150px;padding: 30px;box-shadow: 0 12px 20px 6px rgb(104 112 118 / 0.2);border-radius: 15px;transform-style: preserve-3d;}
  • 父元素设置box-sizing: border-box
  • 在此容器内,添加9个正方形并设置transform-style: preserve-3d,长/宽为w,按照这样的布局,改写父容器的大小,正方形平均分布,父元素设置flex横向布局,超出换行

在这里插入图片描述

 
...// 共9个
 .container {- height: 150px;- width: 150px;- padding: 30px;- border-radius: 15px;+ height: calc(var(--w) * 5);+ width: calc(var(--w) * 5);+ padding: var(--w);+ border-radius: calc(var(--w) / 2);+ display: flex;+ flex-wrap: wrap;box-shadow: 0 12px 20px 6px rgb(104 112 118 / 0.2);transform-style: preserve-3d;}
.square {height: var(--w);width: var(--w);border: 1px solid red;background-color: rgb(207, 52, 40);position: relative;transform-style: preserve-3d;}
  • 正方形添加背景色,实现效果如下

在这里插入图片描述

.square {+ background-color: rgb(207, 52, 40);}
  • 将父容器添加rotateX旋转45deg,rotateZ旋转45deg

在这里插入图片描述

.container {+ transform: rotateX(45deg) rotateZ(45deg);
}
  • 为square添加前后伪元素,宽/高为w,这里可以先注释其他正方形,保留一个进行调试
.square:after,
.square:before {content: "";position: absolute;height: var(--w);width: var(--w);left: 0;top: 0;}
  • 调试square的前伪元素,设置transform进行Y轴方向的旋转

在这里插入图片描述

.square:before {background-color: rgb(56, 35, 35);transform: rotateY(-90deg);
}
  • 修改该元素的transform-origin,更改一个元素变形的原点,rotate()函数的转换原点是旋转中心(即center center),调整到合适位置

在这里插入图片描述

.square:before {+ transform-origin: right center;}
  • 调试square的后伪元素,设置transform进行X轴方向的旋转

在这里插入图片描述

.square:after {background-color: rgb(80, 39, 36);transform: rotateX(0deg);}
  • 修改该元素的transform-origin,调整到合适位置

在这里插入图片描述

.square:after {+transform-origin: right bottom;
}
  • 九个正方体实现的效果如下

在这里插入图片描述

  • 将square在z轴方向进行偏移,偏移量为w

在这里插入图片描述

.square {+ transform: translateZ(var(--w));
}
  • square添加hover效果

在这里插入图片描述

.square:hover {cursor: pointer;filter: brightness(2.1);}
  • square添加box-shadow底部阴影,调整为合适位置

在这里插入图片描述

.square {+ box-shadow: calc(var(--w) * 3) calc(var(--w) * 3) 15px rgba(0, 0, 0, 0.2);}
  • 为每个方块添加上下浮动动画

在这里插入图片描述

.square {+ animation: beating 1s infinite;
}
@keyframes beating {50% {transform: translateZ(calc(var(--w) / 2));}
}
  • 在每个square 上添加css变量,定义动画延时时间,去掉辅助线,就实现好了哇~

在这里插入图片描述

..// 依次
.square {- border: 1px solid red;+ animation-delay: calc(0.05s * var(--d));
}

3.实现代码


4.写在最后🍒

看完本文如果觉得对你有一丢丢帮助,记得点赞+关注+收藏鸭 🍕
更多相关内容,关注🍥苏苏的bug,🍡苏苏的github,🍪苏苏的码云~

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...