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

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

news 2026/2/10 18:42:56

这里写目录标题

一级目录
- 二级目录
- - 三级目录
下面开始案例的练习，建议第一个动手操作好了再进行下一个
一、交错的小块
- 效果展示
- 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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度

一、引言：多云环境的技术复杂性本质企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...

编程新知 2026/2/8 16:53:48

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...

编程新知 2026/2/8 20:41:56

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性：电力载波技术在楼宇自控中的核心价值在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...

编程新知 2025/9/27 2:43:26

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2026/1/31 8:08:07

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...

编程新知 2026/2/1 21:58:45

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN）曾被视为…...

编程新知 2026/2/1 7:05:28

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/26 19:12:01

这里写目录标题

一级目录

二级目录

三级目录

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

一、交错的小块

效果展示

1.大致思路

1.基本结构

2.实现动态移动

2.最终版代码

二、会展开的魔方

1.大致思路

1.基本结构;

2.静态魔方的构建

3.让静态的魔方动起来

2.最终版代码

相关文章：