请选择 进入手机版 | 继续访问电脑版
查看: 180|回复: 0

CSS3使用过度动画和缓动效果案例讲解

[复制链接]

2066

主题

2066

帖子

6594

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6594
发表于 2022-10-9 14:53:57 | 显示全部楼层 |阅读模式
transition过渡:

四个小属性

            属性            意义                                    transition-property            哪些属性要过渡                            transition-duration            动画时间                            transition-timing-function            动画变革曲线(缓动效果)                            transition-delay            延迟时间        
       
  • transition过度属性是CSS3浓墨重彩的特性,过度可以为一个元素在差别样式之间变革自动添加“补间动画”

       
  • 兼容性IE10开始兼容,移动端兼容良好   
  • 曾几何时,网页上的动画特效基本都是由JavaScript定时器实现的,现在逐步改为使用CSS3过度   
  • 优点:动画更细腻,内存开销小   
  • transition属性有4个要素:
        transition:width 1s linear 0s;(什么属性要过度、动画时长、变革速度曲线、延迟时间)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>动画过渡</title>
  8.     <style>
  9.         .box {
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: black;
  13.             transition: width 5s linear 0s;
  14.         }
  15.         .box:hover {
  16.             width: 500px;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="box">

  22.     </div>
  23. </body>
  24. </html>
复制代码
就是需要过渡的的加属性值transition,第一个值为变革的属性
哪些属性可以到场过渡

       
  • 所有数值类型的属性,都可以到场过渡,好比width、height、left、top、border-radius   
  • 配景颜色和文字颜色都可以被过渡   
  • 所有变形(包罗2D和3D)都可以被过渡
all:

       
  • 所有的属性都要到场过渡,可以写all
        transition:all 5s linear 0s;
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>动画过渡</title>
  8.     <style>
  9.         .box {
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: black;
  13.             transition: width 5s linear 0s;
  14.         }
  15.         .box:hover {
  16.             width: 500px;
  17.         }

  18.         .box1{
  19.             width: 200px;
  20.             height: 200px;
  21.             background-color: blue;
  22.             transition: all 5s linear 0s;
  23.         }
  24.         .box1:hover {
  25.             width: 400px;
  26.             height: 200px;
  27.             background-color: greenyellow;
  28.             border-radius: 50%;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="box"></div>
  34.     <div class="box1"></div>
  35. </body>
  36. </html>
复制代码
过渡的缓动效果:

缓动参数

       
  • transition的第三个参数就是缓动参数,也就是变革速度曲线
        transition:width 1s linear 0s;
常用的缓动参数


子属性

transition-timing-function:ease;
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>动画过渡</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .box1 {
  14.             border:1px solid black;
  15.         }
  16.         .box1 p{
  17.             width: 50px;
  18.             height: 50px;
  19.             background-color: blue;
  20.             position: relative;
  21.             left: 0;
  22.             margin-bottom: 10px;
  23.             transition: left 5s linear 0s;
  24.         }
  25.         .box1 p:nth-child(2) {
  26.             transition-timing-function: ease;
  27.         }
  28.         .box1 p:nth-child(3) {
  29.             transition-timing-function: ease-in;
  30.         }
  31.         .box1 p:nth-child(4) {
  32.             transition-timing-function: ease-out;
  33.         }
  34.         .box1 p:nth-child(5) {
  35.             transition-timing-function: ease-in-out;
  36.         }
  37.         .box1:hover p {
  38.             left: 100px;

  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="box1">
  44.         <p></p>
  45.         <p></p>
  46.         <p></p>
  47.         <p></p>
  48.         <p></p>
  49.     </div>
  50. </body>
  51. </html>
复制代码
贝塞尔曲线:

       
  • 网站https://cubic-bezier.com/可以生成贝塞尔曲线,可以自定义动画缓动参数

到此这篇关于CSS3使用过度动画和缓动效果案例讲解的文章就介绍到这了,更多相关CSS3使用过度动画和缓动效果内容请搜索趣UU以前的文章或继续浏览下面的相关文章希望大家以后多多支持趣UU!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
打赏作者
  • 0
  • 0
  • 0
  • 0
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表