首页 前沿速递 服务器教程 网页设计教程 网络编辑教程
移动端
AI智能体脚本 智能办公脚本 自动化游戏脚本 浏览器自动化脚本 服务器脚本
当前位置：首页 > 网页设计教程 > HTML教程 > CSS3过渡transition效果实例介绍

CSS3过渡transition效果实例介绍

作者：互联网

2026-03-30

HTML教程

本文实例为大家分享了CSS3过渡transition效果，供大家参考，具体内容如下

效果图：

实现代码：

transition.html

XML/HTML Code复制内容到剪贴板
  1. >
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Transitiontitle>
  6. <style>
  7. #block{
  8. width:400px;
  9. height:300px;
  10. background-color:#69C;
  11. margin:0auto;
  13. transition:background-color1s,width0.5sease-out;
  14. -webkit-transition:background-color1s,width0.5sease-out;
  15. }
  16. #block:hover{
  17. background-color:red;
  18. width:600px;
  19. }
  20. style>
  21. head>
  22. <body>
  23. <divid="block">
  25. div>
  26. body>
  27. html>

transitionDemo.html

XML/HTML Code复制内容到剪贴板
  1. >
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>TransitionDemotitle>
  6. <style>
  7. #wrapper{
  8. width:1024px;
  9. margin:0auto;
  10. }
  11. .progress-bar-bg{
  12. width:960px;
  13. /*background-color:aliceblue;*/
  14. background-color:lightyellow;
  15. }
  16. .progress-bar{
  17. height:40px;
  18. width:40px;
  19. background-color:#69C;
  21. border:1pxsolidlightyellow;
  22. border-radius:5px;
  23. }
  24. .progress-bar:hover{
  25. width:960px;
  26. }
  28. #bar1{
  29. -webkit-transition:width5slinear;
  30. /*-webkit-transition:width5ssteps(6,end);*/
  31. /*-webkit-transition:width5sstep-start;*/
  32. }
  33. #bar2{
  34. -webkit-transition:width5sease;
  35. }
  36. #bar3{
  37. -webkit-transition:width5sease-in;
  38. }
  39. #bar4{
  40. -webkit-transition:width5sease-out;
  41. }
  42. #bar5{
  43. -webkit-transition:width5sease-in-out;
  44. }
  45. style>
  46. head>
  47. <body>
  48. <divid="wrapper">
  49. <p>linearp>
  50. <divclass="progress-bar-bg">
  51. <divclass="progress-bar"id="bar1">div>
  52. div>
  54. <p>easep>
  55. <divclass="progress-bar"id="bar2">div>
  57. <p>ease-inp>
  58. <divclass="progress-bar"id="bar3">div>
  60. <p>ease-outp>
  61. <divclass="progress-bar"id="bar4">div>
  63. <p>ease-in-outp>
  64. <divclass="progress-bar"id="bar5">div>
  65. div>
  66. body>
  67. html>

结果分析：鼠标移动上去后，会发生过渡动画。

以上就是本文的全部内容，希望对大家的学习有所帮助。

上一篇：女神漫画登录页面免费入口下载安装-女神漫画登录页面漫画入口网址最新版本 下一篇：CSS3让登陆面板3D旋转起来

相关推荐

v0.dev 支持 RSC 了！AI 生成全栈组件离我们还有多远？ 如果你最近还在把 Vercel 的 v0.dev 当作一个单纯的“Tailwind 代码生成器”或者“UI 画板”，那你可能要重新审视这个工具了。

2026-03-28

立即查看
VTJ.PRO 在线应用开发平台概览 VTJ.PRO 平台概览 目的与范围 VTJ.PRO 是一个 AI 驱动的低代码应用开发平台，在浏览器中提供功能完整的在线集成开发环境 (IDE)。它将可视化设计、AI 辅助代码生成和多平台输出（We

2026-03-28

立即查看
VUE-组件命名与注册机制 Vue2 组件四个"名字"，我曾经傻傻分不清楚 先说我当时有多懵 我第一次看到一个 Vue 组件的使用方式时，脑袋是懵的： 四个地方，都像是在说同一件事，又感觉哪里不对。 它们到底是什么关系？ ? 直

2026-03-28

立即查看
Vue生命周期与keep-alive实战理解 Vue 生命周期与 keep-alive：我用真实项目终于搞清楚了 先说一个语言上的误导 "生命周期" 这个词，听起来像是整个项目从打开到关闭的一段大流程。 但实际上，它属于每一个组件。 正确的理解是

2026-03-28

立即查看

专题

#Grok
Grok脚本资源网站，提供G

+ 收藏

#Sora2
Sora2脚本资源网站，提供S

+ 收藏

#通义万相
通义万相脚本资源网站，提供通

+ 收藏

#海螺AI
海螺AI脚本资源网站，提供海

+ 收藏

#可灵AI
可灵AI脚本资源网站，提供可

+ 收藏

#Kling3.0
Kling3.0脚本资源网站，提

+ 收藏

最新数据

CSS3中使用RGBa来调节透明度的教程 在 CSS3 中，增加了一个 o
CSS默认可继承样式详解
CSS教程之div垂直居中的多种方法
CSS超出文本指定宽度用省略号代替和文本不换行
浅析CSS等高布局的6种方式
浅析rem和em和px vh vw和% 移动端长度单位
浅析CSS实现水平垂直同时居中的5种思路
解析CSS编写中的属性优先级问题
IE兼容性问题的快速解决方法_ajax请求不发送到后台
CSS实现文字环绕图片效果

相关文章

CSS中flex和inline-flex的区别详解

03/30

利用纯css做一个下拉菜单功能的示例代码

03/30

CSS子元素选择父元素的实现

03/30

CSS子元素跟父元素的高度一致的实现方法

03/30

CSS实现子元素div水平垂直居中的示例

03/30

CSS3 RGBA色彩模式使用实例讲解

03/30

CSS3实现超酷的黑猫警长首页

03/30

CSS实现文字环绕图片效果

03/30

IE兼容性问题的快速解决方法_ajax请求不发送到后台

03/30

解析CSS编写中的属性优先级问题

03/30

AI精选

更多

我想搭建一个AI编程平台：让

有了AI大家的日常是轻松了还
精选

Claude在得物App数仓的深度集成与效能演进
精选

OpenClaw 多智能体部署：弹性扩展、零运维
精选

我让 Claude 和 Codex 同时审计 26 个模块，它们只在 10 个上达成共识
精选

深入RAG：从理论到实践的 ETL 核心流程
精选

用AI 48小时速通梅花易数之后，我想通了「学习」的最终解
精选

SpringBootAI 接入观测云 MCP 最佳实践
精选

Agent来了0x05：Self-Ask 回路验证
精选

Prompt，Agent，Skill，Mcp分别于langchain有什么关系

脚本推荐

SeeDance 2.0 Video Creator专区

OpenClaw AI专区

cowork专区

claude code skills专区