css3过渡transition学习总结

最新推荐文章于 2022-01-26 11:39:42 发布

prettyRain

最新推荐文章于 2022-01-26 11:39:42 发布

阅读量319

点赞数

分类专栏： web前端开发

本文链接：https://blog.csdn.net/qq_33878431/article/details/84391013

版权

web前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css3过渡transition学习总结

过渡

1.过渡简写 transition：param1 param2

param1 要过渡的属性 all 表示所有属性
param2 过渡的时间秒为单位如：1s
过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态
帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。

 1 .box{
 2             width: 200px;
 3             height: 200px;
 4             border:1px solid #000;
 5             margin: 100px auto;
 6             background-color: red;
 7             /*transition: width 2s,background-color 2s;*/
 8             /*如果多个过渡的特效相同，可以简写，过渡必须加给盒子本身*/
 9             /*transition:过渡属性,过渡时间,速度曲线(linear匀速),延迟时间*/
10             transition: all 2s linear 1s;
11         }

2.过渡属性拆解

transition-property设置过渡属性（all代表所有属性）
transition-duration设置过渡时间用来控制速度linear(匀速)
ease(减速) / ease-in(加速) / ease-out(减速) / ease-in-out(先加速后减速)
transition-timing-function设置过渡速度
transition-delay设置过渡延时超过时间后执行动画.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3过渡</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: '微软雅黑';
            background-color: #F7F7F7;
        }
        .wrapper {
            width: 1024px;
            margin: 0 auto;
        }
        .wrapper > section {
            min-height: 300px;
            margin-bottom: 30px;
            box-shadow: 1px 1px 4px #DDD;
            background-color: #FFF;
        }
        .wrapper > header {
            text-align: center;
            line-height: 1;
            padding: 20px;
            margin-bottom: 10px;
            font-size: 30px;
        }

        .wrapper section > header {
            line-height: 1;
            padding: 10px;
            font-size: 22px;
            color: #333;
            background-color: #EEE;
        }

         .wrapper .wrap-box {
            padding: 20px;
            position: relative;
        }
        .transition {
            height: 200px;
            width: 200px;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: pink;
            transition-property: all;/*过渡属性*/
            transition-duration: 2s;/*持续时间*/
            transition-delay:0s;/*过渡延迟*/
        }
       section:nth-child(2) .transition {
           transition-timing-function:linear;/*线性运动*/
       }
        section:nth-child(3) .transition {
            transition-timing-function:ease; /*减速运动*/
        }
        section:nth-child(4)  .transition {
            transition-timing-function:ease-in; /*加速运动*/
        }
        section:nth-child(5)  .transition {
            transition-timing-function:ease-out;/*减速运动*/
        }
        section:nth-child(6)  .transition {
            transition-timing-function:ease-in-out;/*先加速后减速*/
        }
        /*获得焦点*/
        .transition:hover {
            left:300px;
            background-color:red;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <header>CSS3-过渡详解</header>
    <section class="move">
        <header>移动</header>
        <div class="wrap-box">
            <div class="transition"></div>
        </div>
    </section>
    <section class="ease">
        <header>ease</header>
        <div class="wrap-box">
            <div class="transition"></div>
        </div>
    </section>
    <section class="ease-in">
        <header>ease-in</header>
        <div class="wrap-box"> <div class="transition"></div></div>
    </section>
    <section class="ease-out">
        <header>ease-out</header>
        <div class="wrap-box"> <div class="transition"></div></div>
    </section>
    <section class="ease-in-out">
        <header>ease-in-out</header>
        <div class="wrap-box"> <div class="transition"></div></div>
    </section>
</div>
</body>
</html>

下面是一个案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡应用2</title>
    <style>
        body {
            background-color:#0da5d6;
        }
        .box {
            width:80%;
            height:60px;
            margin:100px auto;
            text-align:center;
        }
        .box span {
            margin:30px;
            font-size:50px;
            font-width:7;
            color:white;
            transition-property:margin;
            transition-duration:2s;
            transition-timing-function:ease;
            transition-delay:0s;
        }
        .box:hover span{
            margin:15px;
        }
    </style>
</head>
<body>
<div class="box">
    <span>4</span><span>亿</span><span>网</span><span>友</span><span>共</span><span>同</span><span>信</span><span>赖</span>
</div>
</body>
</html>

prettyRain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3过渡transition学习总结

css3过渡transition学习总结过渡1.过渡简写 transition：param1 param2param1 要过渡的属性 all 表示所有属性param2 过渡的时间秒为单位如：1s过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态帧动...
复制链接

扫一扫

专栏目录