css3中的变形（transform）、过渡(transition)、动画(animation)

最新推荐文章于 2024-01-30 23:32:39 发布

泊一

最新推荐文章于 2024-01-30 23:32:39 发布

阅读量2.6k

点赞数 1

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/w_D_lufei/article/details/100511962

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.Transform（变形）

1. 2D转换之translate位移

2D转换：属性：transform,属性值：translate(X,Y),属性值也可以分开书写：
transform:translate(X,Y)
transform:translateX(n)
transform:translateY(n)

注意：
1.1 2D转换中的移动translate是沿着X轴和Y轴进行移动的，对行内元素直接设置是不生效的；
1.2 translate改变元素在页面中的位置，类似定位，但它参考自身，不是父级，不会影响到其他元素的位置，所以我们不用担心元素脱离文档流；所以使用最好用translate来移动，避免margin-top对其他盒子位置的影响
1.3 translate的取值可以是实际的像素值:translate(100px,200px),也可以是百分比:translate(50%,50%),如果设置的是百分比那么移动的位置是盒子自身宽高的相对值，比如50%就是自己的宽高的一半

运用

让盒子水平垂直居中

让盒子水平垂直居中我们必须使用定位实现，
然后配合left： 50%； top: 50%; 和margin-left: 负自己的宽度的一半；margin-top: 负自己的高度的一半；
我们也可以将margin-left: -自己的宽度的一半；margin-top: -自己的高度的一半；设置为transform: translate(-50%,-50%);
注意：如果使用transform让盒子水平垂直居中，盒子可以不用设置固定的宽高，当然一般情况下盒子都是有自己的固定宽高的；

2. 2D转换之rotate – 旋转

2.1 2D转换之旋转rotate
属性：transform 属性值： rotate(度数)；
语法：transform: rotate (度数) ----- 度数的单位是deg ；
transform:rotate(360deg);就是顺时针旋转360度
注意

rotate后面的都是，如果是正数就是顺时针旋转，如果是负数就是逆时针旋转；
2. rotate旋转默认的中心点是元素的中心点

2.2 设置转换中心点
transform-origin:X Y;

两个参数X和Y之间是用空格隔开的;
X和Y默认的转换中心点取值为(50% 50%);
X和Y也可以设置实际的像素值或者方位名词（top、bottom、left、right、center）

3. 2D转换之scale

transform：scale(X,Y);

两个参数X和Y之间是用逗号隔开的;
X和Y的取值如果等于1表示原始大小，小于1表示缩小倍数，大于1表示放大倍数；
X和Y如果只写一个值表示两个参数都是一样；
Scale缩放最大的优势：可以设置转换中心点缩放，默认是中心缩放，还不会影响其他盒子的显示位置；

2D转换的总结

 
1. 常见的2D 转换效果：
        旋转：rotate     
        位移：translate      
        缩放： scale
2. 旋转默认进行顺时针旋转的；
3.如果三个属性要同时存在，我们需要用空格将各个属性隔开，位移属性必须写在第一位；不然旋转会改变坐标轴的位置，导致平移位置出错
3. 行内元素不能设置transform属性，想要设置必须先转换显示模式为块元素或者行内块元素；

二、 Transition(过渡)

过渡属性：transition: 属性动画时间动画形式延时;
属性：可以用all表示所有的属性，也可以单个属性设置；动画时间：单位 s，动画执行的时间；
速度：默认 ease先慢后快，最后慢速结束，匀速 linear，还有ease-in以慢速开始 , ease-out以慢速结束 , ease-in-out以慢速开始和结束；
延时：单位s，即使是0也不能省略单位，延迟动画开始执行的时间；

谁用写在谁身上，配合伪类使用：hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
            color:#333;
        }
        .produce li{
            list-style: none;
            float: left;
            width: 234px;
            height: 280px;
            padding: 34px 0 20px;
            position: relative;
            transition: all .2s linear;
        }
        .produce li:hover .review{
            opacity: 1;
            height: 76px;
        }
        .produce li:hover {
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            transform: translate(0, -2px);
        }
        h3{
            margin: 0 10px;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
        }
        .desc {
        margin: 0 10px 10px;
        height: 18px;
        font-size: 12px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #b0b0b0;
     }
     .price{
        font-size: 14px;
        margin: 0 10px 10px;
        text-align: center;
        color: #ff6700;
     }
     .price del {
    color: #b0b0b0;
    }
    
    .review{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 234px;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    background: #ff6700;
    opacity: 0;
    transition: all .2s linear;
    }
    .review a span {
    display: block;
    margin-bottom: 5px;
    color: #fff;
}
    </style>
</head>
<body>
    <div class="produce">
        <ul>
            <li>
              
                    <div class="produce_img">
                            <a href="#">
                        <img src="images/mi_produce.jpg" alt="">
                            </a>
                    </div>
                    <h3><a href="#">小米电视4A 43英寸青春版</a></h3>
                    <p class="desc">
                            全高清屏 / 人工智能语音
                    </p>
                    <p class="price">
                        <span>1499</span>元
                        <del>1699</del>
                    </p>
                    <div class="review">
                        <a href="#">
                        <span>一如既往的好，小米情怀</span>
                        <span> 来自于 惊喜 的评价 </span>
                    </a>
                    </div>
           
            </li>
        </ul>
    </div>
</body>
</html>

三、Animation(动画)

CSS3动画基本使用

第一步需要先定义动画
@keyframes 动画名称{
0%{
开始动画
}
100%{
结束动画
}
}
第二定义了的动画需要调用才能使用生效
animation-name:动画名称;
animation-duration:持续时间（单位是s）;
动画定义的是也可以用from和to来定义，的等同于0%到100%；
动画常用的属性总结

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。（必须有我们需要调用）。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。（必须有）。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。必须写单位s。
animation-iteration-count	规定动画被播放的次数。默认是 1。循环是infinite；
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。 alternate逆向
animation-play-state	规定动画是否正在运行或暂停。默认是 "running“,暂停是paused。必须配合鼠标经过使用
animation-fill-mode	规定对象动画时间之外的状态。保持现状forwards，回到起始backwards。

动画简写属性
animation: 动画名称持续时间运动曲线何时开始（延时）播放次数是否反向播放动画结束后的状态
例如: animation: move 5s linear 2s infinite alternate;
动画简写属性的时候，** 动画名称和动画持续时间必须要书写**，其他属性需要就书写不需要就省略，如果书写动画延时必须书写单位s，哪怕是0s也要书写；
速度曲线之steps步长
步长：steps(具体的数字)
animation: 动画名称 steps(10) 2s forwards;
步长是设置了时间函数之间的间隔步数，规定元素在多少步完成动画；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>animation之steps</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .content{
            width: 0px;
            overflow: hidden;
            white-space: nowrap;
            font-size: 20px;
            animation: step 2s steps(6) forwards;
        }
        @keyframes step{
            0%{}
            100%{
                width: 120px;
                background-color: pink;
            }
        }
    </style>
</head>
<body>
      <div class="content">
          我在这里等你
      </div>
</body>
</html>
一个字大小为20，分6步出现，width变为120px

泊一

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css3中的变形（transform）、过渡(transition)、动画(animation)

一.Transform（变形）1. 2D转换之translate位移2D转换：属性：transform,属性值：translate(X,Y),属性值也可以分开书写：transform:translate(X,Y)transform:translateX(n)transform:translateY(n)注意：1.1 2D转换中的移动translate是沿着X轴和Y轴进行移动的，对行内...
复制链接

扫一扫

专栏目录