当前位置: 首页 > java >正文

CSS3过渡

一、什么是CSS3过渡

       CSS3 过渡(transitions)是一种效果,它允许你平滑地改变CSS属性的值,从一个状态过渡到另一个状态。是一种动画转换的过程,如渐现、渐弱、动画快慢等。过渡效果可以在用户与页面进行交互时触发,比如鼠标悬停、点击等。

语法: 

二、CSS3过渡动画(Transition)属性

属性名作用描述可选值示例默认值
transition-property指定哪些CSS属性应用过渡效果all(所有属性)、widthopacityall
transition-duration过渡动画持续时间2s(秒)、500ms(毫秒)0s
transition-timing-function定义动画速度曲线(加速度效果)easelinearease-inease-outease-in-outcubic-bezier()ease
transition-delay动画开始前的延迟时间1s200ms0s
简写属性
transition合并上述属性(顺序:property duration timing-function delay)width 1s ease-in-out 0.5sall 0.3s linear

注意:

 

三、 过渡应用

1、多属性联合过渡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{display:flex;justify-content: center;align-items: center;}.btn {padding: 12px 24px;background-color: #4CAF50;  /* 初始背景色 */color: white;border: none;border-radius: 4px;transition: background-color 0.3s ease, transform 0.3s;  /* 简写属性 *//*transition: all 0.4s ease-in-out;*/}.btn:hover {background-color: #ac6fb3;  /* 悬停时背景色过渡 */transform: scale(1.05) skewX(-5deg);     /* 悬停时轻微放大,倾斜-5度 */box-shadow:  8px 8px 16px black;  /* 阴影加深 */}</style></head>
<body>
<button class="btn">点击按钮</button>
</body>
</html>

2、气泡浮动动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0 auto;padding: 100px;}.bubble {width: 50px;height: 50px;background: #bd3838;border-radius: 50%;transition: background-color 0.3s , transform 1s cubic-bezier(0.25, 0.1, 0.25, 1); /* 贝塞尔曲线 */}.bubble:hover {background-color: #9356dc; /* 悬停时改变背景颜色 */transform: translateY(-20px); /* 悬停时上移 */}</style></head>
<body>
<div class="bubble"></div>
</body>
</html>

3、加载状态提示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.loader {width: 40px;height: 40px;border-radius: 50%;border: 6px solid #f3f3f3; /* 边框颜色 */border-top: 6px solid #3498db; /* 顶部边框颜色 */opacity: 0.8; /* 透明度 */transition: transform 1s linear, opacity 0.5s ease;  /* 多属性独立过渡 */}.loader:hover {transform: rotate(360deg);  /* 悬停时旋转一周 */opacity: 1; /* 悬停时完全不透明 */}</style></head>
<body>
<div class="loader"></div>
</body>
</html>

http://www.xdnf.cn/news/8049.html

相关文章:

  • 性能测试、压力测试、负载测试如何区分
  • 深度学习零基础入门(2)-实战1:激活函数、前向传播和反向传播
  • 【FileZilla】上传下载时文件夹的处理
  • VR光伏车棚虚拟仿真系统:开启绿色能源新视界​
  • openai-whisper-asr-webservice接入dify
  • “智”斗秸秆焚烧,考拉悠然以科技之力筑牢生态安全防线
  • 解决自签名证书HTTPS告警:强制使用SHA-256算法生成证书
  • openCV1-2 图像的直方图相关
  • 微服务架构中的 RabbitMQ:异步通信与服务解耦(二)
  • SQLMesh 宏操作符详解:提升 SQL 查询的灵活性与效率
  • Spring Boot与Eventuate Tram整合:构建可靠的事件驱动型分布式事务
  • 高等数学-积分
  • ElasticSearch操作
  • HarmonyOS 鸿蒙应用开发基础:父组件调用子组件方法的几种实现方案对比
  • HarmonyOS 鸿蒙应用开发基础:@Watch装饰器详解及与@Monitor装饰器对比分析
  • HarmonyOS实战:高德地图自定义定位图标展示
  • Redis 5.0.10 集群部署实战(3 主 3 从,三台服务器)
  • 深度学习模型部署:使用Flask将图像分类(5类)模型部署在服务器上,然后在本地GUI调用。(全网模型部署项目步骤详解:从模型训练到部署再到调用)
  • RAGFlow知识检索原理解析:混合检索架构与工程实践
  • Dify大语言模型应用开发环境搭建:打造个性化本地LLM应用开发工作台
  • 基于开源AI智能名片链动2+1模式S2B2C商城小程序的管理与运营策略研究
  • 格雷希尔快速封堵接头,解决新能源汽车的气密性检测和三电系统的综合测试
  • java 基础知识巩固
  • 深度解析:Spark、Hive 与 Presto 的融合应用之道
  • SpringBoot Day_03
  • Docker 与微服务架构:从单体应用到容器化微服务的迁移实践
  • 谷歌medgemma-27b-text-it医疗大模型论文速读:多语言大型语言模型医学问答基准测试MedExpQA
  • 基于STM32F4的cubemx关于RTC配置说明
  • Docker架构详解
  • Win 系统 conda 如何配置镜像源