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

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

news 2025/9/11 11:30: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、代码仅提供参考&#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

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/9/7 8:53:56

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/9/10 11:07:10

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/8/6 7:06:58

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/7/11 22:34:49

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/8/24 17:18:40

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/9/7 21:17:14

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2025/9/2 18:41:56

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

编程新知 2025/9/4 13:36:29

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2025/9/7 8:49:59

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/8/3 15:16:26