022篇移动端网页开发---CCS3新特性之动画

最新推荐文章于 2024-06-12 22:46:08 发布

凡凡小码农～

最新推荐文章于 2024-06-12 22:46:08 发布

阅读量447

点赞数 2

文章标签：动画 css html

本文链接：https://blog.csdn.net/m0_48387335/article/details/120145855

版权

一、2D转换

1.1 2D转换之移动translate

1.2 2D转换之旋转rotate

1.3 2D转换中心点transform-origin

2.1.1 用keyframes定义动画（类似定义类选择器）

一、2D转换

转换（transform）是c3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果

1.1 2D转换之移动translate

1.语法：

transform:translate(x,y);或者分开写
transform:translateX(n);
transform:translateY(n);
定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果

代码演示：

<style>
    div{
        width:200px;
        height:200px;
        background-color:pink;
        /*x就是x轴移动的位置，y就是y轴移动的位置 中间用逗号分隔*/
        /*transform:translate(x,y);*/
        /*1.*/
        transform:translate(100px,100px);
        /*2.单独用x轴和y轴的话不能同时实现x轴和y轴移动，后者会覆盖前者*/        
        transform:translateX(100px);
        transform:translateY(100px);
        /*3.这样可以同时实现x轴和y轴的移动*/
          transform:translateX(100px) translateY(100px);
    }
</style>
<body>
    <div>
    </div>
</body>

（1）注意：两个盒子的话一个盒子位置移动不影响其他盒子

<style>
    div{
        width:200px;
        height:200px;
        background-color:pink;
    }
    /*此时不会影响下边的盒子*/
    div:first-child{
        transform:translate(30px,30px);
    }
    div:last-child{
        background-color:purple;
    }
</style>
<body>
    <div>
    </div>
    <div>
    </div>
</body>

（2）translate里面的参数可以为百分值，此时移动的距离是盒子自身宽度或高度的百分比 ，代码演示比如：

<style>
    div{
        width:200px;
        height:200px;
        background-color:pink;
        /*此时盒子移动的距离为盒子自身宽度的一半*/
        transform:translateX(50%);
    }
    
</style>
<body>
<div>
</div>
</body>

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果

1.2 2D转换之旋转rotate

顺时针旋转或逆时针旋转

语法：transform:rotate(度数)：度数单位为deg

rotate里面跟度数，单位是deg 比如：rotate（45deg）
角度为正时，顺时针旋转，为负时，逆时针旋转
默认旋转的中心点是元素的中心点

<style>
    div {
        width:200px;
        height:200px;
        background-color:pink;
        transform:rotate(45deg);
}
</style>
<body>
<div>
</div>
</body>

1.3 2D转换中心点transform-origin

语法：transform-origin:x y;

注意后面参数x和y用空格隔开
x y默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或方位名词（top bottom left right center）

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /*过渡效果*/
            transition: all 1s;
            /* 1.可以跟方位名词 */
            transform-origin: left bottom;
            /* 2.默认的是50% 50% 等价于center center */
        }
        
        div:hover {
            transform: rotate(360deg);
        }
    </style>
<div></div>

1.4 2D转换之缩放scale

语法：

transform:scale(x,y)；

x相当于宽度，y相当于高度

注意其中的x和y用逗号分隔
transform:scale(1,1):宽和高都放大一倍，相当于等比缩放
transform:scale(2,2):宽和高放大2倍
transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
transform:scale(0.5,0.5)缩小二分之一
scale缩放最大的优势:可以设置转换中心点进行缩放，默认以中心点进行缩放，而且不影响其他盒子
如果通过改变宽高进行缩放不能以中心点进行