当前位置：首页 > news >正文

css动画案例练习之会展开的魔方和交错的小块

news 2025/12/25 16:31:18

这里写目录标题

一级目录
- 二级目录
- - 三级目录
下面开始案例的练习，建议第一个动手操作好了再进行下一个
一、交错的小块
- 效果展示
- 1.大致思路
- - 1.基本结构
  - 2.实现动态移动
- 2.最终版代码
二、会展开的魔方
- 1.大致思路
- - 1.基本结构;
  - 2.静态魔方的构建
  - 3.让静态的魔方动起来
- 2.最终版代码

一级目录

二级目录

三级目录

下面开始案例的练习，建议第一个动手操作好了再进行下一个

在这里插入图片描述

一、交错的小块

效果展示

交错的小块

1.大致思路

1.基本结构

构建父级正方形盒子后分别在左上角和右下角放两个占父级盒子25%的小盒子，用子绝父相的定位方式将子盒子固定在父盒子中

2.实现动态移动

因为两个盒子移动的方式不同，所以分别设置动画属性
注意 x轴正方向水平向右，y轴正方向为垂直向下，移动时要加单位，四条边移动四次，一次移动25%

盒子1：以左上角为原点，移到右上角坐标为(200，0)，移到右下角坐标为(200,200)，移到左下角坐标为(0，200)，最后回到原点

@keyframes move1 {0%{transform: translate(0,0);}25%{transform: translate(200px,0);}50%{transform: translate(200px,200px);}75%{transform: translate(0,200px);}100%{transform: translate(0,0);}
}

盒子2
以右下角为原点，移到左下角坐标为(-200，0)，移到左上角坐标为(-200,-200)，移到右上角坐标为(0，-200)，最后回到原点

@keyframes move2 {0%{transform: translate(0,0);}25%{transform: translate(-200px,0);}50%{transform: translate(-200px,-200px);}75%{transform: translate(0,-200px);}100%{transform: translate(0,0);}
}

2.最终版代码

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style1.css">
</head>
<body><div class="box"><div class="box_l"></div><div class="box_r"></div></div>
</body>
</html>

css

* {padding:0;margin:0;
}
.box {width: 400px;height: 400px;margin:100px auto;position: relative;
}
.box .box_l {position: absolute;top:0;left:0;background-color: pink;width: 200px;height: 200px;animation:move1 5s infinite;
}
.box .box_r {position: absolute;bottom:0;right:0;background-color: bisque;width: 200px;height: 200px;animation:move2 5s infinite;
}
@keyframes move1 {0%{transform: translate(0,0);}25%{transform: translate(200px,0);}50%{transform: translate(200px,200px);}75%{transform: translate(0,200px);}100%{transform: translate(0,0);}
}
@keyframes move2 {0%{transform: translate(0,0);}25%{transform: translate(-200px,0);}50%{transform: translate(-200px,-200px);}75%{transform: translate(0,-200px);}100%{transform: translate(0,0);}
}

二、会展开的魔方

1.大致思路

会展开的魔方

1.基本结构;

放一个大盒子container用于装魔方，记得最后加3d效果，大盒子中放六个盒子为魔方的六个面，加绝对定位将六个面固定在一起

2.静态魔方的构建

注意：
所有的面都是朝z轴方向移动面的一半距离（75px）,即与人眼的距离拉近75px,并且当鼠标经过时距离拉近200px，特别注意当设置各个面时虽然普遍情况下我们应该先写移动的距离再旋转，但是对于魔方来说，先移动再旋转不会构成封闭的立方体
前面1：

.container div:nth-child(1) {transform: translateZ(75px);
}.container:hover div:nth-child(1) {transform: translateZ(200px);
}

右面2：

.container div:nth-child(2) {transform: rotateY(90deg) translateZ(75px);
}.container:hover div:nth-child(2) {transform: rotateY(90deg) translateZ(200px);
}

后面3：

.container div:nth-child(2) {transform: rotateY(180deg) translateZ(75px);
}.container:hover div:nth-child(2) {transform: rotateY(180deg) translateZ(200px);
}

左面4;

.container div:nth-child(2) {transform: rotateY(270deg) translateZ(75px);
}.container:hover div:nth-child(2) {transform: rotateY(270deg) translateZ(200px);
}

上面5：

.container div:nth-child(5) {transform: rotateX(90deg) translateZ(75px);
}.container:hover div:nth-child(5) {transform: rotateX(90deg) translateZ(200px);
}

下面6:

.container div:nth-child(5) {transform: rotateX(-90deg) translateZ(75px);
}.container:hover div:nth-child(5) {transform: rotateX(-90deg) translateZ(200px);
}

3.让静态的魔方动起来

由于魔方的六个面都在大盒子container里，所以只需让大盒子旋转即可实现效果，我们使用动画的属性让魔方动起来，从初始0度到360度让他转一圈，如果x,y轴都写的话就是沿着xOy平面的角平分线旋转

@keyframes rotate {0% {transform: rotateX(0) rotateY(0);}100% {transform: rotateX(360deg) rotateY(360deg);}
}.container {width: 150px;height: 150px;transform-style: preserve-3d;position: relative;animation: rotate 5s infinite linear;margin: 250px 250px;
}

2.最终版代码

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="container"><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div></div>
</body>
</html>

css

* {margin: 0;padding: 0;
}body {width: 150px;height: 150px;perspective: 1000px;/*实现近大远小的效果*/background: #000;
}@keyframes rotate {0% {transform: rotateX(0) rotateY(0);}100% {transform: rotateX(360deg) rotateY(360deg);}
}.container {width: 150px;height: 150px;transform-style: preserve-3d;position: relative;animation: rotate 5s infinite linear;margin: 250px 250px;
}.container:hover {transform: rotateY(180deg) rotateX(180deg);
}/*也可以不写这个hover,它的目的只是更美观*/.container div {width: 100%;height: 150px;position: absolute;background-color: #ccc;
}.container div:nth-child(1) {transform: translateZ(75px);
}.container:hover div:nth-child(1) {transform: translateZ(200px);
}.container div:nth-child(2) {transform: rotateY(90deg) translateZ(75px);
}.container:hover div:nth-child(2) {transform: rotateY(90deg) translateZ(200px);
}.container div:nth-child(3) {transform: rotateY(180deg) translateZ(75px);
}.container:hover div:nth-child(3) {transform: rotateY(180deg) translateZ(200px);
}.container div:nth-child(4) {transform: rotateY(270deg) translateZ(75px);
}.container:hover div:nth-child(4) {transform: rotateY(270deg) translateZ(200px);
}.container div:nth-child(5) {transform: rotateX(90deg) translateZ(75px);
}.container:hover div:nth-child(5) {transform: rotateX(90deg) translateZ(200px);
}.container div:nth-child(6) {transform: rotateX(-90deg) translateZ(75px);
}.container:hover div:nth-child(6) {transform: rotateX(-90deg) translateZ(200px);
}

css动画案例练习之会展开的魔方和交错的小块

这里写目录标题一级目录二级目录三级目录下面开始案例的练习，建议第一个动手操作好了再进行下一个一、交错的小块效果展示1.大致思路1.基本结构2.实现动态移动 2.最终版代码二、会展开的魔方1.大致思路1.基本结构;2.静态魔方的构建3.让静态的魔方动起来 2.最终版…...

编程日记 2024/6/5 22:00:38

前端逆向之下载canvas引用的图片

前端逆向之下载canvas引用的图片一、来源二、解决三、如果在Network这里也找不到呢？ 一、来源当我们用dom检查器的时候无法选中想要扒下来的图片，只能选中canvas，这种时候该怎么办呢？ 二、解决这个时候应该换个脑子&#xf…...

编程日记 2024/6/5 21:57:35

深度学习手撕代码题

目录： PyTorch实现注意力机制、多头注意力与自注意力Numpy广播机制实现矩阵间L2距离的计算Conv2D卷积的Python和C++实现Numpy实现bbox_iou的计算Numpy实现FocallossPython实现nms、softnmsPython实现BN批量归一化PyTorch卷积与BatchNorm的融合分割网络损失函数Dice Loss代码实…...

编程日记 2024/6/5 21:56:34

vue3 + ts 动态添加路由，刷新页面白屏问题解决方案

1、store 中添加路由的方法 2、main.ts中使用该方法然后就可以任意刷新页面了，有问题可以随时滴我...........

编程日记 2024/6/5 21:55:33

【Kubernetes】k8s的调度约束（亲和与反亲和）

一、调度约束 list-watch 组件 Kubernetes 是通过 List-Watch 的机制进行每个组件的协作，保持数据同步的，每个组件之间的设计实现了解耦。用户是通过 kubectl 根据配置文件，向 APIServer 发送命令，在 Node 节点上面建立 Pod 和…...

编程日记 2024/6/5 21:54:32

Java数据结构- Map和Set

目录 1. Map和Set2. Map的使用3. Set的使用 1. Map和Set Java中，Map和Set是两个接口，TreeSet、HashSet这两个类实现了Set接口，TreeMap、HashMap这两个类实现了Map接口。带Tree的这两个类（TreeSet、TreeMap）底层的数…...

编程日记 2024/6/5 21:53:31

JVM参数配置

JVM参数的三种表示方法在jvm中，jvm虚拟机参数有以下三种表示方法： 标准参数（-）所有的JVM实现都必须实现这些参数的功能，而且向后兼容非标准参数（-X），默认jvm实现这些参数的功能&…...

编程日记 2024/6/5 21:50:27

Vue 实现的精彩动画效果

在 Vue 开发中，我们可以利用<transition>组件来打造各种令人惊艳的动画效果。下面来详细看看这些有趣的动画效果及其实现代码。一、缩放类效果 zoom-in（整体放大进入） <template><div><button click"isShow ! …...

编程日记 2024/6/5 21:48:24

JVM类加载机制详解(JDK源码级别)

提示：从JDK源码级别彻底剖析JVM类加载机制、双亲委派机制、全盘负责委托机制、打破双亲委派机制的程序、Tomcat打破双亲委派机制、tomcat自定义类加载器详解、tomcat的几个主要类加载器、手写tomcat类加载器文章目录前言一、loadClass的类加载大概有如下步骤二、j…...

编程日记 2024/6/5 21:46:23

美国年轻人热衷床上“摆烂”，沃尔玛发掘床上用品新商机！

美国年轻人近年来热衷于床上“摆烂”生活方式，这反映了他们对舒适放松的追求和现代生活的压力。沃尔玛作为零售业巨头，敏锐地捕捉到这一市场变化，发现了床上用品的新商机。美国年轻人忙碌中渴望宁静空间。床成为他们放松、逃离现实压力的理想…...

编程日记 2024/6/5 21:43:20

3168. 候诊室中的最少椅子数

给你一个字符串 s，模拟每秒钟的事件 i： 如果 s[i] E，表示有一位顾客进入候诊室并占用一把椅子。如果 s[i] L，表示有一位顾客离开候诊室，从而释放一把椅子。返回保证每位进入候诊室的顾客都能有椅子坐的最少椅子…...

编程日记 2024/6/5 21:42:19

C# PaddleOCR 单字识别效果

C# PaddleOCR 单字识别效果效果说明根据《百度办公文档识别C离线SDKV1.2用户接入文档.pdf》，使用C封装DLL，C#调用。背景为使客户、第三方开发者等能够更快速、方便的接入使用百度办公文档识别 SDK、促进百度 OCR产品赋能更多客户，特设…...

编程日记 2024/6/5 21:37:15

目录顶点和线的方式划线的方式实现：顶点和线的方式 import numpy as np from PyQt5 import QtWidgets from PyQt5.QtCore import Qt from PyQt5.QtWidgets import QApplication, QMainWindow, QPushButton from OpenGL.GL import * from OpenGL.GLU import * import sys…...

编程日记 2024/6/5 21:36:11

人工智能任务5-高级算法工程师需要学习哪些课程与掌握哪些能力

大家好，我是微学AI，今天给大家介绍一下人工智能的任务5-高级算法工程师需要学习哪些课程，需要掌握哪些能力。高级算法工程师需要掌握的算法模型有：人脸检测模型MTCNN，人脸识别方法Siamese network、center loss、softm…...

编程日记 2024/6/5 21:35:10

服务器上创建搭建gitlab

一、下载与安装在主目录操作~ 1.使用wget下载 wget --no-check-certificate https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/gitlab-ce-14.0.1-ce.0.el7.x86_64.rpm 可以在开源软件镜像站选择合适的版本，版本不同页面菜单会稍有差异，此次选…...

编程日记 2024/6/5 21:34:09

LangChain学习之prompt格式化与解析器使用

1. 学习背景在LangChain for LLM应用程序开发中课程中，学习了LangChain框架扩展应用程序开发中语言模型的用例和功能的基本技能，遂做整理为后面的应用做准备。视频地址：基于LangChain的大语言模型应用开发构建和评估高 2. 先准备尝试调用O…...

编程日记 2024/6/5 21:32:07

基于EasyX的贪吃蛇小游戏 - C语言

游戏基本功能演示： 1.主菜单界面 2.自定难度界面在这里可以自行设定游戏的难度，包括蛇的移动速度，初始节数，以及默认模式，参考线（网格）。这些设定的数据都会在右上角的游戏属性栏中实时显示。…...

编程日记 2024/6/5 21:31:06

使用Docker辅助图像识别程序开发：在Docker中显示GUI、访问GPU、USB相机以及网络

目录概览引言安装和配置安装docker安装nvidia-docker在docker中显示GUI在Docker中访问usb相机在Docker镜像中开放端口开启更多的GPU功能支持创建本地镜像中心一些可选参数上传镜像回收空间清理所有的无用镜像清理指定的镜像GPU Docker with Anaconda第一种方式:构建DockerFile…...

编程日记 2024/6/5 21:30:05

Java中常见错误-泛型擦除及桥接方法问题及解决方案

Java中泛型擦除及桥接方法泛型擦除无界擦除上界擦除下界擦除桥接方法演示案例wrong1wrong2wrong3right 原理总结泛型擦除泛型擦除是Java泛型机制的一个特性，它意味着**在编译期间，所有的泛型信息都会被移除，而在运行时，所…...

编程日记 2024/6/5 21:29:04

Linux 程序守护脚本

引言程序是由代码形成的，代码是由人写的。只要是人，都会有疏忽的时候，导致写出的程序有bug，当然最严重的bug就是程序闪退。本文旨在提供一个程序守护脚本，当监测到程序闪退后，立马将程序再起启动&#…...

编程日记 2024/6/5 21:27:01

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...

编程新知 2025/10/16 13:22:06

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。例…...

编程新知 2025/11/5 20:18:24

《通信之道——从微积分到 5G》读书总结

第1章绪论 1.1 这是一本什么样的书通信技术，说到底就是数学。那些最基础、最本质的部分。 1.2 什么是通信通信发送方接收方承载信息的信号解调出其中承载的信息信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...

编程新知 2025/12/25 11:06:14

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程新知 2025/12/18 20:15:17

VTK如何让部分单位不可见

最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...

编程新知 2025/12/12 4:55:21

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题安装 flash-attn 会一直卡在 build 那一步或者运行报错解决办法是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析：CodeRider、GitHub Copilot及其他随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/11/16 0:55:46

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目，所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/12/17 16:37:05

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字不要使用 Kotlin 的任何硬关键字作为方法的名称或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/12/21 2:48:42

这里写目录标题

一级目录

二级目录

三级目录

下面开始案例的练习，建议第一个动手操作好了再进行下一个

一、交错的小块

效果展示

1.大致思路

1.基本结构

2.实现动态移动

2.最终版代码

二、会展开的魔方

1.大致思路

1.基本结构;

2.静态魔方的构建

3.让静态的魔方动起来

2.最终版代码

相关文章：