• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    CSS3使用过度动画和缓动效果案例讲解

    transition过渡:

    四个小属性

    属性 意义
    transition-property 哪些属性要过渡
    transition-duration 动画时间
    transition-timing-function 动画变化曲线(缓动效果)
    transition-delay 延迟时间

    !DOCTYPE html>
    html lang="en">
    head>
        meta charset="UTF-8">
        meta http-equiv="X-UA-Compatible" content="IE=edge">
        meta name="viewport" content="width=device-width, initial-scale=1.0">
        title>动画过渡/title>
        style>
            .box {
                width: 200px;
                height: 200px;
                background-color: black;
                transition: width 5s linear 0s;
            }
            .box:hover {
                width: 500px;
            }
        /style>
    /head>
    body>
        div class="box">
    
        /div>
    /body>
    /html>

    就是需要过渡的的加属性值transition,第一个值为变化的属性

    哪些属性可以参与过渡

    all:

    !DOCTYPE html>
    html lang="en">
    head>
        meta charset="UTF-8">
        meta http-equiv="X-UA-Compatible" content="IE=edge">
        meta name="viewport" content="width=device-width, initial-scale=1.0">
        title>动画过渡/title>
        style>
            .box {
                width: 200px;
                height: 200px;
                background-color: black;
                transition: width 5s linear 0s;
            }
            .box:hover {
                width: 500px;
            }
    
            .box1{
                width: 200px;
                height: 200px;
                background-color: blue;
                transition: all 5s linear 0s;
            }
            .box1:hover {
                width: 400px;
                height: 200px;
                background-color: greenyellow;
                border-radius: 50%;
            }
        /style>
    /head>
    body>
        div class="box">/div>
        div class="box1">/div>
    /body>
    /html>

    过渡的缓动效果:

    缓动参数

    常用的缓动参数

    子属性

    transition-timing-function:ease;

    !DOCTYPE html>
    html lang="en">
    head>
        meta charset="UTF-8">
        meta http-equiv="X-UA-Compatible" content="IE=edge">
        meta name="viewport" content="width=device-width, initial-scale=1.0">
        title>动画过渡/title>
        style>
            * {
                margin: 0;
                padding: 0;
            }
            .box1 {
                border:1px solid black;
            }
            .box1 p{
                width: 50px;
                height: 50px;
                background-color: blue;
                position: relative;
                left: 0;
                margin-bottom: 10px;
                transition: left 5s linear 0s;
            }
            .box1 p:nth-child(2) {
                transition-timing-function: ease;
            }
            .box1 p:nth-child(3) {
                transition-timing-function: ease-in;
            }
            .box1 p:nth-child(4) {
                transition-timing-function: ease-out;
            }
            .box1 p:nth-child(5) {
                transition-timing-function: ease-in-out;
            }
            .box1:hover p {
                left: 100px;
    
            }
        /style>
    /head>
    body>
        div class="box1">
            p>/p>
            p>/p>
            p>/p>
            p>/p>
            p>/p>
        /div>
    /body>
    /html>
    

    贝塞尔曲线:

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

    您可能感兴趣的文章:
    • Vue3 style CSS 变量注入的实现
    • js与css的阻塞问题详析
    • 带你了解CSS基础知识,样式
    • JS、CSS和HTML实现注册页面
    • vue3实现CSS无限无缝滚动效果
    • React引入antd-mobile+postcss搭建移动端
    • 浅谈CSS不规则边框的生成方案
    • 详解CSS故障艺术
    上一篇:html form表单基础入门案例讲解
    下一篇:IE里button设置border:none属性无效解决方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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