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

这里写目录标题

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848225.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript第十讲:DOM编程(1):节点概念,如何获取元素节点,节点属性,样式练习题

前言 上一节是本文的知识点讲解&#xff0c;有需要的码客们先看一下&#xff0c;本文是练习题 题目要求 编写一个HTML文档&#xff0c;展示DOM编程的基础知识&#xff0c;包括节点概念的理解、如何获取元素节点、节点属性的操作以及样式调整。要求文档中包含一个带有特定ID的…

【MySQL】表的基本操作

&#x1f30e;表的基本操作 文章目录&#xff1a; 表的基本操作 创建查看表       创建表       查看表结构 表的修改       表的重命名       表的添加与修改       删除表结构 总结 前言&#xff1a; 在数据库中&#xff0c;数据表是存储和组…

vue脚手架 笔记01

01 页面组件 所谓的组件就是把页面每一块内容单独分离出去封装起来 组件包括自己本身的html css 和 js 可以被反复引入使用 (复用) 方便后期维护(方便快速的增加或者删除指定页面的指定模块) 组件化开发: 组件是独立的可复用的代码组织单元 组件系统是vue核心特性之一 组件分类…

鸿蒙状态管理-@Builder自定义构建函数

Builder 将重复使用的UI元素抽象成一个方法 在build方法里调用 使其成为 自定义构建函数 Entry Component struct BuilderCase {build() {Column(){Row(){Text("西游记").fontSize(20)}.justifyContent(FlexAlign.Center).backgroundColor("#f3f4f5").hei…

vue课后习题及答案

第一章 初识vue.js 一.填空题 1.Vue是一套用于构建___用户界面_____的渐进式框架. 2.Vue中的指令以______v-__开头. 3.Node.js 是一个基于____V8___引擎的JavaScript运行环境。 4.在yam 中&#xff0c;__yarn add__命令用于添加指定名称的包。 5.在 npm 中&#xff0c;___…

性能测试-测试方法总结(压力/负载)超详细

前言 并发/负载/压力理解 负载测试&#xff1a;通过不断加压使系统达到瓶颈&#xff0c;为调优提供参考数据 压力测试&#xff1a; 稳定性压力测试&#xff1a;在不同的给定的条件下&#xff08;比如内存的使用&#xff0c;一定时间段内有多少请求等&#xff09;&#xff0c…

IEAD常用快捷键

如题 网页图片不清晰&#xff0c;可下载后查看

【SHUD】PIHMgis编译过程(下)sundials及PIHM编译过程

文章目录 说明sundials编译sundialssundials源代码下载MINGW下sundials编译过程CMAKE下sundials编译过程(推荐)PIHM编译过程安装QT 5导入项目配置VSVS使用静态库文件qt deployment toolgdal.dll编译PIHMgis成功编译

代码随想录算法训练营Day60 | 84.柱状图中最大的矩形

代码随想录算法训练营Day60 | 84.柱状图中最大的矩形 LeetCode 84.柱状图中最大的矩形 题目链接&#xff1a;LeetCode 84.柱状图中最大的矩形 class Solution { public:int largestRectangleArea(vector<int>& heights) {int result 0;stack<int> st;height…

NXP i.MX8系列平台开发讲解 - 3.14 Linux 之Power Supply子系统(一)

专栏文章目录传送门&#xff1a;返回专栏目录 Hi, 我是你们的老朋友&#xff0c;主要专注于嵌入式软件开发&#xff0c;有兴趣不要忘记点击关注【码思途远】 目录 1. Power Supply子系统介绍 2. Power Supply子系统框架 3. Power Supply代码分析 本章节主要介绍Linux 下的P…

具体因字数问题

问题描述 给定整数 n n n&#xff0c;在 O ( 1 ) O(1) O(1) 时间求出 n n n 有多少个因子。 问题背景 \qquad 目前网上求因子个数的方法的时间复杂度都是 O ( n ) O(\sqrt{n}) O(n ​) 级别的&#xff0c;但我认为一定有一种方法可以在 O ( 1 ) O(1) O(1) 的时间求出 n…

插入排序——表插入排序

目录 1、简述 2、复杂程度 3、稳定性 4、实例 1、简述 表插入排序&#xff08;Table Insertion Sort&#xff09;是一种基于插入排序的排序算法&#xff0c;它通过维护一个已排序的索引表来加速插入操作。在标准插入排序中&#xff0c;每次插入一个新元素时&#xff0c;需…

vs2019 c++20 规范的头文件 <future> 源码注释和几个结论

&#xff08;1 探讨一&#xff09;在多线程中&#xff0c;需要线程返回值的可以用该头文件中的类。该头文件中模板类和模板函数定义很多&#xff0c;用一幅图给出模板类之间的关系&#xff0c;方便从整体上把握和记忆&#xff1a; &#xff08;2&#xff09;

6.5 作业

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数。 #include <iostream>using namespace std; class Stu { privat…

WebScoket scope类型

每个 WebSocket 会话都有一个属性map。该map作为标头附加到入站客户端消息&#xff0c;并且可以从控制器方法访问它&#xff0c;如以下示例所示&#xff1a; Controller public class MyController {MessageMapping("/action")public void handle(SimpMessageHeader…

GNN与Transformer创新结合!模型性能起飞!

前言 近年来&#xff0c;图神经网络&#xff08;GNN&#xff09;和Transformer模型分别凭借其独到的优势&#xff0c;在处理复杂数据结构和识别序列间的相互依赖性方面取得了突破性进展&#xff0c;这些优势使得GNN和Transformer的结合成为图表示学习领域的一个有前景的研究方…

注解 - @RequestMapping

日期: 2024年6月5日 注解简介 在今天的每日一注解中&#xff0c;我们将探讨RequestMapping注解。RequestMapping是Spring框架中的一个注解&#xff0c;用于映射HTTP请求到处理器方法或控制器类。 注解定义 RequestMapping注解可以用于类和方法上&#xff0c;以指定URL路径和H…

IP黑名单与IP白名单是什么?

在IP代理使用中&#xff0c;我们经常听到黑名单与白名单两个名词&#xff0c;它们不仅提供了强大的防御机制&#xff0c;还可以灵活应对不同的安全威胁。本文将详细探讨IP黑名单和白名单在网络安全中的双重屏障作用。 一、IP黑名单和白名单定义 IP黑名单与IP白名单是网络安全中…

Android 15?我想躺着

大家好,最近行业形势越来越差,希望大家安好吧。 之前写过一些 Android 版本的适配: 安卓11来了,快!扶我起来安卓13来了,快!扶起我来!Android 14 又来了?别扶!抬起我来吧!今年继续,这对于自己来说也算是一个小的任务或者说传统吧。 同样,本篇文章也会从以下几个点…

区块链游戏(链游)安全防御:抵御攻击的策略与实践

一、引言 区块链游戏&#xff0c;或称为链游&#xff0c;近年来随着区块链技术的普及而迅速崛起。然而&#xff0c;如同其他任何在线平台一样&#xff0c;链游也面临着各种安全威胁。本文将探讨链游可能遭遇的攻击类型以及如何通过有效的策略和技术手段进行防御。 二、链游可…