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

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

news 2026/2/7 13:39:30

写在前面

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、代码仅提供参考&#xff0c;前端变化比较大&#xff0c;按照要求&#xff0c;只能做到像&#xff0c;不能做到一模一样 3、图片和文字仅为示例&#xff0c;需要自行替换 4、如果代码不满足你的要求&#xff0c;请寻求其他的…...

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

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

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

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

node.js基础

node.js基础 &#x1f353;什么是node.js&#x1f353;node.js模块&#x1f352;&#x1f352; 内置模块&#x1f345;&#x1f345;&#x1f345;fs模块&#x1f345;&#x1f345;&#x1f345;path模块&#x1f345;&#x1f345;&#x1f345;http模块 &#x1f352;&#…...

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

fastapi实现websocket在线聊天

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

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

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

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

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

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

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

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

展望2024年供应链安全

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

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

React 列表页实现

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

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

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

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

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

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

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

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

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

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

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

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

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

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

js Array.every()的使用

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

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

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

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

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

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

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

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

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

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

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

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

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

编程日记 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最新大模型实验室解决方案

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

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

leetcode707.设计链表

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

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/2/6 12:05:53

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/1/21 18:14:22

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

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

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2026/1/4 3:47:09

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/2/6 9:48:02

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2026/2/6 9:24:15

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2026/2/5 4:21:48