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

HTML5:七天学会基础动画网页11

news 2026/5/28 17:57:02

CSS3动画

CSS3过渡的基本用法:

CSS3过渡是元素从一种样式逐渐改变为另一种样式的效果。

过渡属性-transition

值与说明

transition-property

必需，指定CSS属性的name，transition效果即哪个属性发生过渡。

transition-duration

必需，transition效果需要指定多少秒s或毫秒ms才能完成。

transition-timing-function

指定transition效果的转速曲线，即规定过渡效果在不同阶级的速度。

transition-delay

定义transition效果开始的时候延时。

语法:

transition: property     duration

                timing-function    delay；

例:我们鼠标放置div上时，变化在两秒内完成

a98a2519448f458e9ff09df239b182d8.png

 

 <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box{

            width: 200px;

            height: 100px;

            background-color: rgb(9, 255, 0);

            margin: 50px auto;

        }

        .box:hover{

            width: 400px;

            height: 200px;

            background-color: rgb(0, 255, 195);

            transition: all 2s;

        }

    </style>

</head>

<body>

    <div class="box"> </div>

</body>

8a73f73558fd4dd0b6ac3e5470fa398c.png

 

除了宽高当然背景颜色也是可以渐变的，一个一个写width,height bgc太麻烦，我们如果想全部变化就直接写all。

f7d4d1ba5b0642918c166aa09ee696a5.png

 过渡这个属性是谁想发生变化就加在谁上面，我们也可以分开设置:  transition: width 2s,height 3s,background-color 3s; (注意用逗号隔开)，每个属性单独控制以达到意想不到的效果。

————————————————————

过渡效果在不同阶段的效果timing-function

值与说明

linear(线性的)

规定以相同速度开始是结束的过渡效果(匀速)

ease

规定慢速开始，然后变快，最后慢速结束的过渡效果(慢快慢)

ease-in

规定以慢速开始的过渡效果(慢快)

ease-out

规定以慢速结束的过渡效果(快慢)

ease-in-out

规定以慢速开始和结束的过渡效果(慢快慢)，效果比ease还要慢一点。

————————————————————

我们可以写运动的方块来看看他们的具体运动情况，上代码:

9a663e4cab804ca3aff656a1fc84d2a7.png

 <title>css3动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 70%;
           border: 2px solid black;
            margin: 20px auto;
            position: relative;
            height: 500px;
        }
        .a,.b,.c,.d,.e{
            width: 70px;
            height: 70px;
            background-color: rgb(0, 255, 195);
            text-align: center;
            line-height: 70px;
            color: white;
            font-size: 13px;
            margin-top: 20px;
            position: absolute;
            top: 0;
            left: 0;
        }
          .a{
            transition: all 5s linear;
         }
         .b{
            margin-top: 110px;
            transition: all 5s ease;
         }
         .c{
            margin-top: 200px;
            transition: all 5s ease-in;
         }
         .d{
            margin-top: 290px;
            transition: all 5s ease-out;
         }
         .e{
            margin-top: 380px;
            transition: all 5s ease-in-out;
         }
        .box:hover .a,(注意hover后有空格)
        .box:hover .b,            
        .box:hover .c, 
        .box:hover .d,
        .box:hover .e{
            background-color: rgb(0, 72, 255);
            left: 95%;(令其移动到右边95%的位置)
        }
    </style>
</head>
<body>
    <div class="box">
    <div class="a">linner</div>
    <div class="b">ease</div>
    <div class="c">ease-in</div>
    <div class="d">ease-out</div>
    <div class="e">ease-in-out</div>
    </div>
</body>

e7a769bb52344879bc2cd2a521de55a5.png

 也可以加上颜色渐变，更清晰观察运动变化

83f2b797dcc84657bda373fe2ae5a9d1.png

 

相关文章：

HTML5:七天学会基础动画网页11

CSS3动画 CSS3过渡的基本用法: CSS3过渡是元素从一种样式逐渐改变为另一种样式的效果。 过渡属性-transition 值与说明 transition-property 必需&#xff0c;指定CSS属性的name&#xff0c;transition效果即哪个属性发生过渡。 transition-duration 必需&#xff0c;t…...

编程日记 2024/3/16 6:54:00

考虑开发容器的 6 个理由

虽然在容器环境内进行开发的行为可以追溯到 2010 年代中期&#xff0c;但开发容器本身在过去一年中已经开始流行。微软在 2022 年推出了开发容器规范&#xff0c;推动了这一概念的发展&#xff0c;而 Docker 在去年夏天也紧随其后&#xff0c;推出了开发环境功能的测试版。 开…...

编程日记 2024/3/16 6:50:58

Python基础入门 --- 1-2.字面量

文章目录 Python基础入门第一章&#xff1a;1.1 第一个python程序 第二章 &#xff1a;2.1 字面量2.2 常用的值类型2.3 字符串2.3.1 三种定义方式2.3.2 引号嵌套2.3.3 字符串拼接2.3.4 字符串格式化2.3.5 格式化的精度控制数字精度控制&#xff1a; 2.3.6 字符串格式化方式22.3…...

编程日记 2024/3/16 6:46:54

华为云计算hcie认证考什么？华为hciie认证好考吗

1.理论知识&#xff1a;HCIE认证首先要求考生具备扎实的云计算理论基础&#xff0c;包括云计算的基本概念、架构、关键技术、安全管理等方面的知识。考生需要深入理解云计算的核心原理&#xff0c;以及华为云计算产品的特点和优势。 2.实践技能&#xff1a;除了理论知识外&…...

编程日记 2024/3/16 6:44:52

redis spring cache

数据库的数据是存储在硬盘上的&#xff0c;频繁访问性能较低。如果将一些需要频繁查询的热数据放到内存的缓存中&#xff0c;可以大大减轻数据库的访问压力。 SpringCache SpringCache提供基本的Cache抽象&#xff0c;并没有具体的缓存能力&#xff0c;需要配合具体的缓存实现…...

编程日记 2024/3/16 6:42:51

图解I/O中的零拷贝技术

什么是零拷贝&#xff1f; 零拷贝是一种计算机系统中的 I/O 优化技术&#xff0c;它的核心思想是在数据传输过程中尽可能地减少或完全避免 CPU 将数据从一个存储区域复制到另一个存储区域的操作&#xff0c;从而减少了上下文切换和 CPU 拷贝时间&#xff0c;提高了系统的性能和…...

编程日记 2024/3/16 6:40:49

【设计模式】Java 设计模式之桥接模式（Bridge）

桥接模式&#xff08;Bridge Pattern&#xff09;是结构型设计模式的一种&#xff0c;它主要解决的是抽象部分与实现部分的解耦问题&#xff0c;使得两者可以独立变化。这种类型的设计模式属于结构型模式&#xff0c;因为该模式涉及如何组合接口和它们的实现。将抽象部分与实现…...

编程日记 2024/3/16 6:35:45

记录dockers中Ubuntu安装python3.11

参考&#xff1a; docker-ubuntu 安装python3.8,pip3_dockerfile ubuntu22 python3.8-CSDN博客...

编程日记 2024/3/16 6:33:43

【算法专题--双指针算法】leetcode--283. 移动零、leetcode--1089. 复写零

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1. 移动零&#xff0…...

编程日记 2024/3/16 6:28:39

【JavaEE -- 多线程3 - 多线程案例】

多线程案例 1.单例模式1.1 饿汉模式的实现方法1.2 懒汉模式的实现方法 2. 阻塞队列2.1 引入生产消费者模型的意义&#xff1a;2.2 阻塞队列put方法和take方法2.3 实现阻塞队列--重点 3.定时器3.1 定时器的使用3.2 实现定时器 4 线程池4.1 线程池的使用4.2 实现一个简单的线程池…...

编程日记 2024/3/16 6:27:38

k8s的pod服务升级，通过部署helm升级

要通过Helm升级Kubernetes&#xff08;k8s&#xff09;中的Pod服务&#xff0c;你可以按照以下步骤进行操作&#xff1a; 安装Helm&#xff1a; 如果你还没有安装Helm&#xff0c;可以通过官方文档提供的方式进行安装。添加Helm仓库&#xff1a; 确保你已经添加了包含你要升级…...

编程日记 2024/3/16 6:26:38

复现文件上传漏洞

一、搭建upload-labs环境 将下载好的upload-labs的压缩包&#xff0c;将此压缩包解压到WWW中&#xff0c;并将名称修改为upload&#xff0c;同时也要在upload文件中建立一个upload的文件。 然后在浏览器网址栏输入&#xff1a;127.0.0.1/upload进入靶场。 第一关 选择上传文件…...

编程日记 2024/3/16 6:25:36

Java 内存异常

内存溢出 内存溢出指的是在程序执行过程中&#xff0c;申请的内存超过了系统实际可用的内存资源。 内存溢出的常见情况&#xff1a; 创建大量对象并持有引用&#xff1a;在程序中创建大量对象并持有对这些对象的引用&#xff0c;而没有及时释放这些引用&#xff0c;导致堆内存…...

编程日记 2024/3/16 6:23:34

Windows11去掉 右键菜单的 AMD Software:Adrenalin Edition 选项

Windows11去掉 右键菜单的 AMD Software:Adrenalin Edition 选项 运行regedit打开注册表编辑器 先定位到 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Classes\PackagedCom\Package 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Classes\PackagedCom\Package找到 AdvancedMicroDevicesInc-2.…...

编程日记 2024/3/16 6:20:32

uniapp实现我的订单页面无感 - 删除数据

在进入我们的订单页面时进行获取列表&#xff0c;上拉加载&#xff0c;下拉刷新等请求&#xff0c;我们在删除数据时&#xff0c;请求删除接口后&#xff0c;不要重新去请求数据&#xff0c;不要重新去请求数据&#xff0c;不要重新去请求数据 重新请求会刷新页面中的数据 方…...

编程日记 2024/3/16 6:18:30

MySQL—redo log、undo log以及MVCC

MySQL—redo log、undo log以及MVCC 首先回忆一下MySQL事务的四大特性&#xff1a;ACID&#xff0c;即原子性、一致性、隔离性和持久性。其中原子性、一致性、持久性实际上是由InnoDB中的两份日志保证的&#xff0c;一份是redo log日志&#xff0c;一份是undo log日志&#xff…...

编程日记 2024/3/16 6:17:29

13 list的实现

注意 实现仿cplus官网的list类&#xff0c;对部分主要功能实现 实现 文件 #pragma once #include <assert.h>namespace mylist {template <typename T>struct __list_node{__list_node(const T& x T()): _prev(nullptr), _next(nullptr), _data(x){}__lis…...

编程日记 2024/3/16 6:16:28

如何用client-go获取k8s因硬盘容量、cpu、内存、gpu资源不够引起的错误信息？

在Kubernetes中&#xff0c;你可以使用client-go库来获取Pod的状态和事件&#xff0c;这些信息可能包含了由于资源不足引起的错误信息。 以下是一个基本的示例&#xff0c;展示如何使用client-go来获取Pod的状态和事件&#xff1a; package mainimport ("flag"&quo…...

编程日记 2024/3/16 6:15:27

IDEA编译安卓源码TVBox（2）

一、项目结构&#xff1a;主要app和player app结构 二、增加遥控器按键选台 修改LivePlayActivity.java 1、声明变量 public String channelId "";public Timer timer new Timer();public Toast mToast;2、定义方法 private void mToastShow(String s){mToast …...

编程日记 2024/3/16 6:14:26

【C#】.net core 6.0 使用第三方日志插件Log4net，配置文件详细说明

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《C#》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握。…...

编程日记 2024/3/16 6:13:25

Qwen3-Coder-30B-A3B-Instruct-FP8：终极代码模型对比分析指南

Qwen3-Coder-30B-A3B-Instruct-FP8&#xff1a;终极代码模型对比分析指南 【免费下载链接】Qwen3-Coder-30B-A3B-Instruct-FP8 项目地址: https://ai.gitcode.com/hf_mirrors/Qwen/Qwen3-Coder-30B-A3B-Instruct-FP8 在当今AI代码生成领域&#xff0c;Qwen3-Coder-30B-…...

编程新知 2026/5/26 4:42:23

从Gamma函数到泊松分布：一个概率论中的含参量积分实用案例解析

Gamma函数与泊松分布&#xff1a;概率论中的数学之美 在数据科学和机器学习的实践中&#xff0c;概率分布构成了建模的基石。当我们深入探究这些分布背后的数学原理时&#xff0c;Gamma函数以其优雅的性质和广泛的应用脱颖而出。它不仅连接了离散与连续概率世界&#xff0c;更在…...

编程新知 2026/5/26 2:23:30

告别道路预测老套路：用ParkPredict+模型思路，解决停车场里的‘鬼探头’难题

破解泊车场景预测困局&#xff1a;ParkPredict模型的技术革新与实践停车场里的每一次转向、倒车和避让&#xff0c;都是对自动驾驶系统预测能力的极限挑战。与开放道路的规则明确不同&#xff0c;这里没有清晰的车道线指引&#xff0c;没有统一的行驶方向&#xff0c;只有随时可…...

编程新知 2026/5/26 2:11:27

MAX78000移植Zephyr RTOS实战：从BSP创建到AI边缘设备开发

1. 项目概述与动机作为一名长期在嵌入式边缘AI和机器人领域摸爬滚打的开发者&#xff0c;我最近把目光投向了一块相当有潜力的板子&#xff1a;Maxim Integrated&#xff08;现为ADI一部分&#xff09;的MAX78000FTHR开发套件。这块板子的核心——MAX78000微控制器&#xff0c;…...

编程新知 2026/5/26 0:40:29

独立站内容分层：一层给 SEO，一层给 GEO

你的内容在喂两个完全不同的"阅读者" 你的博客文章&#xff0c;从来都不只有一个读者。 传统认知里&#xff0c;独立站内容的读者只有两类&#xff1a;真人访客和搜索引擎爬虫。SEO 优化的一切工作&#xff0c;本质上都是在讨好后者&#xff0c;顺带服务前者。 但…...

编程新知 2026/5/25 23:41:43

多智能体谈判系统：Agent 如何通过博弈达成最优交易价格？

多智能体谈判系统&#xff1a;Agent 如何通过博弈达成最优交易价格&#xff1f;关键词 多智能体系统、自动谈判、博弈论、纳什均衡、帕累托最优、双边/多边谈判、强化学习谈判、动态定价 摘要 想象一个没有人类中介的世界&#xff1a;电商平台上的智能客服自动和批发商砍价、供…...

编程新知 2026/5/25 22:52:44

BiliRoamingX：彻底解决B站体验限制的完整增强方案

BiliRoamingX&#xff1a;彻底解决B站体验限制的完整增强方案 【免费下载链接】BiliRoamingX-integrations BiliRoamingX integrations and patches powered by ReVanced. 项目地址: https://gitcode.com/gh_mirrors/bi/BiliRoamingX-integrations 你是否曾为B站的内容区…...

编程新知 2026/5/25 21:31:51

从NLP到RAG：AI标书生成系统的技术架构与落地路径深度剖析

引言2026年2月&#xff0c;国家发改委等八部门联合印发《关于加快招标投标领域人工智能推广应用的实施意见》&#xff0c;明确到2026年底招标文件检测、智能辅助评标、围串标识别等重点场景在部分省市实现全覆盖。同一时期&#xff0c;《招标投标法》修订草案经国务院常务会议原…...

编程新知 2026/5/25 19:34:11

PostgreSQL Join 执行策略（Nested Loop、Hash Join、Merge Join）与 NOT EXISTS 优化

以集成数据压缩 SQL 优化为例&#xff0c;用大白话讲清楚 Nested Loop、Hash Join、Merge Join 三种执行策略。一、背景&#xff1a;一条慢 SQL 引发的思考 在对上游下发数据做压缩时&#xff0c;有这样一条 UPDATE SQL&#xff1a; -- ❌ 原始写法 UPDATE magellan_nk_order_i…...

编程新知 2026/5/27 14:28:58

如何用Untrunc拯救损坏视频？2025年终极MP4修复工具完全指南

如何用Untrunc拯救损坏视频&#xff1f;2025年终极MP4修复工具完全指南 【免费下载链接】untrunc Restore a damaged (truncated) mp4, m4v, mov, 3gp video. Provided you have a similar not broken video. 项目地址: https://gitcode.com/gh_mirrors/unt/untrunc 当你…...

编程新知 2026/5/25 16:37:31