• 售前

  • 售后

热门帖子
入门百科

CSS3利用过分动画和缓动结果案例解说

[复制链接]
123456806 显示全部楼层 发表于 2021-8-16 12:05:59 |阅读模式 打印 上一主题 下一主题
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利用过分动画和缓动效果内容请搜索草根技术分享以前的文章或继续浏览下面的相关文章希望各人以后多多支持草根技术分享!

本帖子中包含更多资源

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

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作