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

成都工业学院Web技术基础（WEB）实验五：CSS3动画制作

news 2026/4/2 6:39:39

写在前面

1、基于2022级计算机大类实验指导书

2、代码仅提供参考，前端变化比较大，按照要求，只能做到像，不能做到一模一样

3、图片和文字仅为示例，需要自行替换

4、如果代码不满足你的要求，请寻求其他的途径

运行环境

window11家庭版

WebStorm 2023.2.2

实验要求、源代码和运行结果

1、编写代码实现图5-1所示变换效果，要求：

① 原始效果效果如图5-1a所示，在一个div中包裹3个子div，每个子div包裹一个图像，所有图像居中排列，父div得宽度为1000px、高度为180px、有边框阴影（阴影尺寸5px、模糊距离15px、颜色#F4E4D4）。每个子div得宽度为300px、高度为180px、过渡时间为3秒。

② 鼠标移动到子div1元素时，div元素X轴方向移动665px、Y轴方向移动200px，效果如5-2b所示。

③ 鼠标移动到子div2元素时，扭曲210°、在所有属性上过渡3秒，效果如5-2b所示。

④ 鼠标移动到子div3元素时，在Y轴上旋转50°、在所有属性上过渡3秒，效果如5-2b所示。

图5-1a 未变换前的图形展示示意图

图5-1b 子div1变换后的图形展示示意图

图5-1c 子div2变换后的图形展示示意图

图5-1d 子div3变换后的图形展示示意图

提示：

1.box-shadow语法格式：

box-shadow:水平阴影垂直阴影模糊距离（虚实）阴影尺寸（影子大小）阴影颜色内/外阴影；

2.CSS transform属性的方法：

translate():从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

rotate（n deg）：旋转N度。

skew(x deg,y deg)是将元素沿X轴和Y轴方向同时倾斜给定的角度.

3.过度属性语法格式

transition: 属性名称过渡时间速度曲线延迟时间;

Experiment5_1.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="Experiment5_1.css"><title></title>
</head>
<body>
<div class="parent-div"><div class="child-div"><img src="../1.jpg"></div><div class="child-div"><img src="../2.jpg"></div><div class="child-div"><img src="../3.jpg"></div>
</div>
</body>
</html>

Experiment5_1.css

.parent-div {width: 1000px;height: 180px;border: 1px solid #F4E4D4;box-shadow: 0 0 15px 5px #F4E4D4;display: flex;justify-content: space-around;align-items: center;
}.child-div {width: 300px;height: 180px;transition: all 3s;overflow: hidden;
}.child-div:hover:nth-child(1) {transform: translate(665px, 200px);
}.child-div:hover:nth-child(2) {transform: rotate(210deg);
}.child-div:hover:nth-child(3) {transform: rotateY(50deg);
}

原始效果

鼠标移动到子div1元素时

鼠标移动到子div2元素时

鼠标移动到子div3元素时

2、编写代码实现图5-2所示心跳效果，要求：

① 打开网页文档，心形闪烁，实现心跳效果。

② 图片宽度为200px，高度为自动。

③ 采用animation实现动画效果，动画完成时间为0.5s。

④ tansform:scale()实现图形伸缩，比例为1.1倍。

图5-2 心跳效果

提示：

1）animation语法格式：

animation:动画名称花费时间运动曲线何时开始播放次数是否反方向;

2）animation设置为三种状态：0% 50% 100%，并设置为无限次循环。

Experiment5_2.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="Experiment5_2.css"><title></title>
</head>
<body><img src="../6.jpg" class="heart"><img src="../6.jpg" height="200px" width="200px">
</body>
</html>

Experiment5_2.css

@keyframes heartbeat {0%, 100% {transform: scale(1);}50% {transform: scale(1.1);}
}body {display: flex;align-items: center;justify-content: center;height: 100vh;margin: 0;
}.heart {width: 200px;height: auto;animation: heartbeat 0.5s ease-in-out infinite;
}

成都工业学院Web技术基础（WEB）实验五：CSS3动画制作

写在前面 1、基于2022级计算机大类实验指导书 2、代码仅提供参考，前端变化比较大，按照要求，只能做到像，不能做到一模一样 3、图片和文字仅为示例，需要自行替换 4、如果代码不满足你的要求，请寻求其他的…...

编程日记 2023/12/14 1:56:19

【Docker】学习笔记（三）三剑客之 docker-compose文件书写项目多服务容器运行

简介引言（需求） 为了完成一个完整项目势必用到N多个容器配合完成项目中的业务开发，一旦引入N多个容器，N个容器之间就会形成某种依赖，也就意味着某个容器的运行需要其他容器优先启动之后才能正常运行； 容…...

编程日记 2023/12/14 1:53:16

node.js基础

node.js基础 🍓什么是node.js🍓node.js模块🍒🍒 内置模块🍅🍅🍅fs模块🍅🍅🍅path模块🍅🍅🍅http模块 🍒&#…...

编程日记 2023/12/14 1:51:14

fastapi实现websocket在线聊天

最近要实现一个在线聊天功能，基于fastapi的websocket实现了这个功能。下面介绍一下遇到的技术问题 1.问题难点在线上环境部署时，一般是多进程的方式进行部署启动fastapi服务，而每个启动的进程都有自己的独立存储空间。导致存储的连接对象分…...

编程日记 2023/12/14 1:47:11

LLM推理部署（六）：TogetherAI推出世界上LLM最快推理引擎，性能超过vLLM和TGI三倍

LLM能有多快？答案在于LLM推理的最新突破。 TogetherAI声称，他们在CUDA上构建了世界上最快的LLM推理引擎，该引擎运行在NVIDIA Tensor Core GPU上。Together推理引擎可以支持100多个开源大模型，比如Llama-2，并在Llama-2–…...

编程日记 2023/12/14 1:44:09

Unity | 渡鸦避难所-2 | 搭建场景并添加碰撞器

1 规范项目结构上期中在导入一系列的商店资源包后，Assets 目录已经变的混乱不堪开发过程中，随着资源不断更新，遵循一定的项目结构和设计规范是非常必要的。这可以增加项目的可读性、维护性、扩展性以及提高团队协作效率这里先做下简单的…...

编程日记 2023/12/14 1:43:08

展望2024年供应链安全

2023年是开展供应链安全，尤其是开源治理如火如荼的一年，开源治理是供应链安全最重要的一个方面，所以我们从开源治理谈起。我们先回顾一下2023的开源治理情况。我们从信通院《2023年中国企业开源治理全景观察》发布的信息。信通院调研了来自七…...

编程日记 2023/12/14 1:38:03

React 列表页实现

一、介绍列表页是常用的功能，从后端获取列表数据，刷新到页面上。开发列表页需要考虑以下技术要点:1.如何翻页；2.如何进行内容搜索；3.何时进行页面刷新。二、使用教程 1.user-service 根据用户id获取用户列表，返回…...

编程日记 2023/12/14 1:31:57

【程序人生】还记得当初自己为什么选择计算机？

✏️ 初识计算机： 还记得人生中第一次接触计算机编程是在高中，第一门编程语言是Python（很可惜由于条件限制的原因，当时没能坚持学下去......现在想来有点后悔，没能坚持，唉......）。但是&#xf…...

编程日记 2023/12/14 1:27:54

9-tornado-Template优化方法、个人信息案例、tornado中ORM的使用(peewee的使用、peewee_async)、WTForms的使用

在很多情况下，前端模板中在很多页面有都重复的内容可以使用，比如页头、页尾、甚至中间的内容都有可能重复。这时，为了提高开发效率，我们就可以考虑在共同的部分提取出来， 主要方法有如下： 1. 模板继承 2. U…...

编程日记 2023/12/14 1:26:52

IDEA中.java .class .jar的含义与联系

当使用IntelliJ IDEA这样的集成开发环境进行Java编程时，通常涉及.java源代码文件、.class编译后的字节码文件以及.jar可执行的Java存档文件。 1. .java 文件： 1.这些文件包含了Java源代码，以文本形式编写。它们通常位于项目中的源代码目录中…...

编程日记 2023/12/14 1:25:51

北斗三号短报文森林消防应急通信及天通野外图传综合方案

森林火灾突发性强、破坏性大、危险性高，是全球发生最频繁、处置最困难、危害最严重的自然灾害之一，是生态文明建设成果和森林资源安全的最大威胁，甚至可能引发生态灾难和社会危机。我国总体上是一个缺林少绿、生态脆弱的国家，是一…...

编程日记 2023/12/14 1:23:50

js Array.every()的使用

2023.12.13今天我学习了如何使用Array.every()的使用，这个方法是用于检测数组中所有存在的元素。比如我们需要判断这个数组里面的全部元素是否都包含张三，可以这样写： let demo [{id: 1, name: 张三}, {id: 2, name: 张三五}, {id: 3, name…...

编程日记 2023/12/14 1:20:47

前端编码中快速填充内容--乱数假文

写前端页面的时候，如果要快速插入图片，可以使用 https://picsum.photos/ 详见笔者这篇博文： 工具网站：随机生成图片的网站-CSDN博客可是，如果要快速填充文字内容该怎么做呢？ 以前，我们都是…...

编程日记 2023/12/14 1:18:45

数据结构二维数组计算题，以行为主？以列为主？

1.假设以行序为主序存储二维数组Aarray[1..100,1..100]，设每个数据元素占2个存储单元，基地址为10，则LOC[5,5]（ ）。 A．808 B．818 C．1010 D&…...

编程日记 2023/12/14 1:16:44

springboot(ssm电影院订票信息管理系统影院购票系统Java系统

springboot(ssm电影院订票信息管理系统影院购票系统Java系统开发语言：Java 框架：ssm/springboot vue JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.7（或8.0&#xff0…...

编程日记 2023/12/14 1:15:42

AI 问答-供应链管理-相关概念：SCM、SRM、MDM、DMS、ERP、OBS、CRM、WMS...

一、供应链管理是什么供应链管理：理解供应链管理_snowli的博客-CSDN博客二、SCM 供应链管理 SCM全称为“Supply Chain Management”，即供应链管理。 SCM是企业管理范畴中一个非常重要的概念，指的是企业与供应商、生产商、分销商等各方之…...

编程日记 2023/12/14 1:10:38

初学vue3与ts：vue3选项式api获取当前路由地址

vue2的获取方法 this.$route.pathvue3选项式api获取方法 import { useRouter } from vue-router; const router useRouter(); console.log(router) console.log(router.currentRoute.value.path)...

编程日记 2023/12/14 1:09:37

2023最新大模型实验室解决方案

人工智能是引领未来的新兴战略性技术，是驱动新一轮科技革命和产业变革的重要力量。近年来，人工智能相关技术持续演进，产业化和商业化进程不断提速，正在加快与千行百业深度融合。大模型实验室架构图大模型实验室建设内容一、课…...

编程日记 2023/12/14 1:06:35

leetcode707.设计链表

题目描述你可以选择使用单链表或者双链表，设计并实现自己的链表。单链表中的节点应该具备两个属性：val 和 next 。val 是当前节点的值，next 是指向下一个节点的指针/引用。如果是双向链表，则还需要属性 prev 以指示链表中的…...

编程日记 2023/12/14 1:05:34

你还在用for循环清洗CSV？Polars 2.0的scan_csv()+expression DSL已支持自动列式推断与零拷贝转换——立即升级避免被淘汰

第一章：Polars 2.0大规模数据清洗的核心范式变革Polars 2.0 不再将数据清洗视为一系列离散的、命令式的转换操作，而是以“惰性执行图列式语义优先”为基石，重构整个清洗生命周期。其核心变革体现在计算模型、内存管理与API设计三重维度的协同…...

编程新知 2026/4/2 6:32:31

GEE引擎封挂实战：从M2参数到RunGate网关的完整配置指南

GEE引擎封挂实战：从M2参数到RunGate网关的完整配置指南在游戏运营过程中，外挂问题一直是困扰开发者和运营者的顽疾。对于使用GEE引擎的游戏服务器来说，如何有效防范和打击外挂行为，维护游戏公平性，是每个技术团队必须…...

编程新知 2026/4/2 6:24:29

别再只用手动调参了！用ArcGIS的Geostatistical Analyst工具包自动优化克里金插值参数

解锁ArcGIS隐藏技能：用Geostatistical Analyst实现克里金插值参数智能优化当你在深夜盯着屏幕上半变异函数模型的参数犹豫不决时，是否想过让软件替你做出更科学的选择？克里金插值作为地统计学的黄金标准，其精度高度依赖于半变异函…...

编程新知 2026/4/2 5:09:44

SEO和PPC广告之间的关系是什么_如何通过定期分析优化网站的SEO表现

SEO和PPC广告之间的关系是什么_如何通过定期分析优化网站的SEO表现在当今的数字营销环境中，网站的SEO（搜索引擎优化）和PPC（负责付费广告）广告是两种重要的推广工具。了解它们之间的关系，并通过定期分析优…...

编程新知 2026/4/2 4:07:08

告别PX4，试试APM！用ArduPilot+Gazebo搭建你的第一个无人机仿真环境（附QGC地面站连接）

从PX4到APM：ArduPilot无人机仿真环境全攻略如果你已经熟悉PX4生态，却对ArduPilot（APM）固件在仿真领域的表现充满好奇，这篇文章将为你打开一扇新的大门。不同于市面上大量聚焦PX4的教程，我们将深入探讨APM在…...

编程新知 2026/4/2 3:57:05

Oracle19c EM Express配置与访问全攻略：从零到可视化管理的实践指南

1. 环境准备与基础检查第一次接触Oracle 19c EM Express时，很多人会直接跳进配置环节，结果往往被各种报错打得措手不及。我刚开始接触时也犯过这个错误，后来才发现做好前期检查能省去80%的麻烦。下面这些准备工作，建议你逐项打勾…...

编程新知 2026/4/2 3:57:05

AI模型评估指标：InstantID在各项基准测试中的表现

AI模型评估指标：InstantID在各项基准测试中的表现【免费下载链接】InstantID 项目地址: https://ai.gitcode.com/hf_mirrors/InstantX/InstantID InstantID作为一款领先的AI模型，在多项基准测试中展现出卓越性能。本文将深入解析其在各项评估指…...

编程新知 2026/4/2 3:54:59