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

响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-5 CSS3 动画

news 2026/5/22 6:26:08

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 动画</title>
<style>
.img {width: 150px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);}
}
img:hover {animation: rotate 0.5s linear infinite;
}
</style>
</head><body>
<img src="images/fengche.png" alt="">
</body>
</html>

上述代码中：
第10行代码定义animation属性实现动画效果；
第10~17行代码定义rotate动画让图片从0%到100%顺时针旋转360度；
第18~20行代码通过animation动画实现当鼠标指针悬停在图片上时让图片不停的旋转。

运行效果

CSS3 动画


CSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和JavaScript实现的效果。
animation属性用于描述动画的CSS声明，包括指定具体动画以及动画化时长等行为。

相关文章：

响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-5 CSS3 动画

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>CSS3 动画</title> <style> .img {width: 150px; } keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg);} } img…...

编程日记 2024/1/18 9:05:13

一款实用的.NET Core加密解密工具类库

前言 在我们日常开发工作中&#xff0c;为了数据安全问题对数据加密、解密是必不可少的。加密方式有很多种如常见的AES&#xff0c;RSA&#xff0c;MD5&#xff0c;SAH1&#xff0c;SAH256&#xff0c;DES等&#xff0c;这时候假如我们有一个封装的对应加密解密工具类可以直接…...

编程日记 2024/1/18 9:04:12

C/C++内存布局

1. C 结构体的内存布局 以一个例子来看struct的内存结构 #define NP_FUNC_WRAPPER __attribute__((optimize(0)))struct StructBody {int first_int_placeholder;int second_int_placeholder;double third_double_placeholder; };class ClassBody {public:int first_int_place…...

编程日记 2024/1/18 9:03:10

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&#xf…...

编程日记 2024/1/18 9:01:08

修改SSH默认端口，使SSH连接更安全

以CentOS7.9为例&#xff1a; 1、修改配置文件 vi /etc/ssh/sshd_config 2、远程电脑可连接&#xff0c;暂时将SELinux关闭 # 查询状态 getenforce # 关闭 setenforce 0 # 开启 setenforce 1 3、SELinux设置&#xff08;如果启用&#xff09;&#xff0c;semanage管理工具安…...

编程日记 2024/1/18 8:59:07

React16源码: React中调度之requestWork的源码实现

requestWork 1 &#xff09;概述 在 scheduleWork 中&#xff0c;找到了创建更新的fiber对应的root节点然后对它进行了一些操作之后&#xff0c;调用了 requestWork&#xff0c;开始请求工作在 requestWork 里面它会做哪些东西呢&#xff1f; 首先我们要把这个root节点加入到调…...

编程日记 2024/1/18 8:57:05

【白话机器学习的数学】读书笔记(3)学习分类(感知机、逻辑回归)

三、学习分类 1.分类的目的 找到一条线把白点和黑点分开。这条直线是使权重向量成为法线向量的直线。(解释见下图) 直线的表达式为&#xff1a; ω ⋅ x ∑ i 1 n ω i ⋅ x i 0 \omegax \sum_{i1}^n\omega_i x_i 0 ω⋅xi1∑n​ωi​⋅xi​0 ω \omega ω是权重向量权…...

编程日记 2024/1/18 8:56:04

书生·浦语大模型实战营-学习笔记3

目录 (3)基于 InternLM 和 LangChain 搭建你的知识库1. 大模型开发范式&#xff08;RAG、Fine-tune&#xff09;RAG微调 &#xff08;传统自然语言处理的方法&#xff09; 2. LangChain简介&#xff08;RAG开发框架&#xff09;3. 构建向量数据库4. 搭建知识库助手5. Web Demo部…...

编程日记 2024/1/18 8:55:03

MySQL下对[库]的操作

目录 创建数据库 创建一个数据库案例&#xff1a; 字符集和校验规则&#xff1a; 默认字符集&#xff1a; 默认校验规则&#xff1a; 查看数据库支持的字符集&#xff1a; 查看数据库支持的字符集校验规则&#xff1a; 校验规则对数据库的影响&#xff1a; 操作数据…...

编程日记 2024/1/18 8:48:57

Django(七)

1.靓号管理 1.1 表结构 根据表结构的需求&#xff0c;在models.py中创建类&#xff08;由类生成数据库中的表&#xff09;。 class PrettyNum(models.Model):""" 靓号表 """mobile models.CharField(verbose_name"手机号", max_len…...

编程日记 2024/1/18 8:42:51

AT24C02读写操作 一

//AT24C02初始化 void AT24C02_Init(void) { IIC_Init(); } //AT24C02的字节写入 写一个字节 void AT24C02_WordWrite(uint8_Address,uint8_t Data) { //1。主机发送开始信号 IIC_StartSignal(); //2.主机发送器件地址 写操作 IIC_SentBytes(0xA0); //3.主机等侍从机应…...

编程日记 2024/1/18 8:41:50

.NET 8 中引入新的 IHostedLifecycleService 接口 实现定时任务

在这篇文章中&#xff0c;我们将了解 .NET 8 中为托管服务引入的一些新生命周期事件。请注意&#xff0c;这篇文章与 .NET 8 相关&#xff0c;在撰写本文时&#xff0c;.NET 8 目前处于预览状态。在 11 月 .NET 8 最终版本发布之前&#xff0c;类型和实现可能会发生变化。要继续…...

编程日记 2024/1/18 8:38:47

Redis--Geo指令的语法和使用场景举例（附近的人功能）

文章目录 前言Geo介绍Geo指令使用使用场景&#xff1a;附近的人参考文献 前言 Redis除了常见的五种数据类型之外&#xff0c;其实还有一些少见的数据结构&#xff0c;如Geo&#xff0c;HyperLogLog等。虽然它们少见&#xff0c;但是作用却不容小觑。本文将介绍Geo指令的语法和…...

编程日记 2024/1/18 8:36:46

127.0.0.1和0.0.0.0的区别

在网络开发中&#xff0c;经常会涉及到两个特殊的IP地址&#xff1a;127.0.0.1和0.0.0.0。这两者之间有一些关键的区别&#xff0c;本文将深入介绍它们的作用和用途。 127.0.0.1 127.0.0.1 是本地回环地址&#xff0c;通常称为 “localhost”。作用是让网络应用程序能够与本地…...

编程日记 2024/1/18 8:34:44

SpringBoot ES 聚合后多字段加减乘除

SpringBoot ES 聚合后多字段加减乘除 在SpringData Elasticsearch中&#xff0c;聚合统计的原理主要依赖于Elasticsearch本身的聚合框架。Elasticsearch提供了强大的聚合功能&#xff0c;使得你可以对文档进行各种计算和统计&#xff0c;从而得到有关数据集的有用信息。 Elast…...

编程日记 2024/1/18 8:32:42

React16源码: React中requestCurrentTime和expirationTime的源码实现补充

requestCurrentTime 1 &#xff09;概述 关于 currentTime&#xff0c;在计算 expirationTime 和其他的一些地方都会用到 从它的名义上来讲&#xff0c;应等于performance.now() 或者 Date.now() 就是指定的当前时间在react整体设计当中&#xff0c;它是有一些特定的用处和一些…...

编程日记 2024/1/18 8:31:41

【论文阅读】Deep Graph Contrastive Representation Learning

目录 0、基本信息1、研究动机2、创新点3、方法论3.1、整体框架及算法流程3.2、Corruption函数的具体实现3.2.1、删除边&#xff08;RE&#xff09;3.2.2、特征掩盖&#xff08;MF&#xff09; 3.3、[编码器](https://blog.csdn.net/qq_44426403/article/details/135443921)的设…...

编程日记 2024/1/18 8:28:37

设计模式-简单工厂

设计模式-简单工厂 简单工厂模式是一个集中管理对象创建&#xff0c;并根据条件生成所需类型对象的设计模式&#xff0c;有助于提高代码的复用性和维护性&#xff0c;但可能会导致工厂类过于复杂且违反开闭原则。 抽象提取理论&#xff1a; 封装对象创建过程解耦客户端与产品…...

编程日记 2024/1/18 8:26:35

Django ORM 中的单表查询 API（1）

在 Django 中&#xff0c;对象关系映射&#xff08;ORM&#xff09;提供了一种功能强大、表现力丰富的数据库交互方式。ORM 允许开发人员使用高级 Python 代码执行数据库查询&#xff0c;从而更轻松地处理数据库实体。 下面&#xff0c;我们将探讨 Django ORM 中单表查询 API …...

编程日记 2024/1/18 8:25:34

电子雨html代码

废话不多说下面是代码&#xff1a; <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><title>Code</title><style>body{margin: 0;overflow: hidden;}</style></head><body><c…...

编程日记 2024/1/18 8:21:31

你的仿真传感器数据准吗？Gazebo中激光雷达与深度相机的噪声模型配置与Rviz可视化调参实战

高保真机器人仿真&#xff1a;Gazebo传感器噪声模型与Rviz可视化调参全指南 在机器人算法开发中&#xff0c;仿真环境的真实性直接决定了算法测试的有效性。许多SLAM和导航算法在仿真环境中表现优异&#xff0c;一旦部署到真实机器人上却出现各种问题&#xff0c;这往往源于仿真…...

编程新知 2026/5/22 6:10:35

智慧防疫终端实战：从数字哨兵系统设计到落地运维全解析

1. 项目背景与核心痛点&#xff1a;为什么“数字哨兵”成了刚需&#xff1f;去年下半年&#xff0c;我参与了一个在无锡落地的智慧防疫项目&#xff0c;核心就是部署一批“数字哨兵”智能核验终端。去现场之前&#xff0c;我和很多人想的一样&#xff1a;不就是个扫健康码的机器…...

编程新知 2026/5/22 6:01:41

7.跨品牌手机刷机原理深度解析｜BL 解锁机制 + 分区读写 + 故障修复全方案

摘要 本文系统性地阐述主流品牌智能手机（华为、小米、OPPO、vivo、一加、苹果）刷机与维修的核心原理与操作流程。针对不同品牌底层架构差异，提供从Bootloader解锁、Recovery刷写到系统固件注入的完整技术方案。所有操作步骤均基于实际硬件环境验证，包含完整可运行的Python…...

编程新知 2026/5/22 3:37:07

Github创建项目（创建仓库、新建项目、新建仓库）步骤

文章目录 新建项目然后根据指示创建第一个提交并推送即可 新建项目 然后根据指示创建第一个提交并推送即可 echo "# xxxxxxxx" >> README.md git init git add README.md git commit -m "first commit" git branch -M main git remote add origin ht…...

编程新知 2026/5/22 1:00:35

【大模型12步学习路线 · 第12步 · ①原理篇】多模态 LLM + Multimodal RAG 全景:从 Qwen3-VL 到 ColPali / ColQwen2.5,让 LLM看懂Spec

【大模型12步学习路线 第12步 ①原理篇】多模态 LLM + Multimodal RAG 全景:从 Qwen3-VL 到 ColPali / ColQwen2.5,让 LLM"看懂"Spec 时序图 系列定位:「大模型正确学习顺序」12 步系列 第 12 步 多模态 的 ①原理篇 —— 最后一步,Veri-Copilot v1.0 大结局。 前…...

编程新知 2026/5/21 23:16:39

【卷卷观察】Google I/O 炸场背后：AI 行业正在经历一场“越南战争“

Google I/O 2026 开完了&#xff0c;朋友圈和推特上全是"智能体时代来了"的刷屏。但说实话&#xff0c;我越看越觉得不对劲。不是因为 Google 发布的东西不好——Gemini Spark 确实酷&#xff0c;93 个 Agent 并行写操作系统也确实震撼。而是因为这种"震撼"…...

编程新知 2026/5/21 22:43:35

如何快速掌握DeepL翻译插件：浏览器跨语言阅读的终极解决方案

如何快速掌握DeepL翻译插件&#xff1a;浏览器跨语言阅读的终极解决方案 【免费下载链接】deepl-chrome-extension A DeepL Translator Chrome extension 项目地址: https://gitcode.com/gh_mirrors/de/deepl-chrome-extension DeepL翻译插件是一款基于DeepL API的高质量…...

编程新知 2026/5/21 22:20:25

图片跨域之谜：img 标签真的“畅通无阻”吗

&#x1f5bc;️ 图片跨域之谜&#xff1a;img 标签真的“畅通无阻”吗&#xff1f; &#x1f914; 核心疑问 在前端开发中&#xff0c;我们常听到“同源策略”限制了跨域请求。但是&#xff0c;当你直接在 HTML 中写 <img src"https://other-domain.com/logo.png&qu…...

编程新知 2026/5/21 21:48:53

抖音批量下载器终极指南：5步实现无水印视频高效下载

抖音批量下载器终极指南&#xff1a;5步实现无水印视频高效下载 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support…...

编程新知 2026/5/21 20:31:29

BabelDOC终极指南：5个技巧让你的PDF翻译又快又好

BabelDOC终极指南&#xff1a;5个技巧让你的PDF翻译又快又好 【免费下载链接】BabelDOC Yet Another Document Translator 项目地址: https://gitcode.com/GitHub_Trending/ba/BabelDOC 还在为PDF翻译后格式错乱、公式丢失而烦恼吗&#xff1f;作为一款专业的智能PDF翻译…...

编程新知 2026/5/21 19:54:38