CSS3学习第七天

最新推荐文章于 2024-04-11 15:13:38 发布

你还要我怎样？

最新推荐文章于 2024-04-11 15:13:38 发布

阅读量1.2k

点赞数

分类专栏： CSS学习文章标签： css3 学习动画 1024程序员节

本文链接：https://blog.csdn.net/qq_46563235/article/details/127466828

版权

CSS学习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1、2d-平移translate（）

translate将元素向指定的方向移动，类似于position中的relative。

水平移动：向右移动translate（tx，0）和向左移动translate（-tx，0）；

垂直移动：向上移动translate（0，-ty）和向下移动translate（0，ty）；

对角移动：右下角移动translate（tx，ty）

右上角移动translate（tx，-ty）

左上角移动translate（-tx，-ty）

左下角移动translate（-tx，-ty）。

translateX（）：水平方向移动一个对象。对象只向x轴进行移动，如果值为正值，对象向右移动

如果值为负值，对象向左移动

translateY（）：纵轴方向移动一个对象，对象只向Y轴进行移动，如果值为正值，对象向下移动

如果值为负值，对象向上移动

这两个函数和前面介绍的translate（）函数不同的地方是每个方向只接受一个值。

所以：

transform：translate（-100px，0）之际上等于transform：translateX（-100px）

transform：translate（0，-100px）之际上等于transform：translateY（-100px）

设置left属性会频繁的造成浏览器回流重排，而transform和opacity属性不会，因为它是作为合成图发送到GPU上，由显卡执行的渲染，这样做的优化如下：

可以通过亚像素精度得到一个运行在特殊优化过的单位图形任务上的平滑动画，并且运行非常快
动画不再绑定到CPU重排，而是通过GPU合成图像，即使运行一个非常复杂到的JavaScript任务，动画仍然会很快运行。

代码练手：

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: rebeccapurple;
            margin: 0 auto ;
            transition: all 2s;
            /* 最开始让它定位在平移50px位置处 */
            /* transform: translate(50px); */
            /* px值会叠加，也就是如果你设置transform: translate(100px,100px)
                那么div在50px处则在x轴上向右移动50px
                        y轴上向下移动100px
            */
        }
        div:hover{
            /* 100px  往右平移100px */
            /* -100px  往左平移100px */
            /*  translateX(100px)   往右平移100px*/
            /*  translateX(-100px)   往左平移100px*/
            /*  translateY(100px)  往下平移100px */
            /*  translateY(-100px)  往上平移100px */


            /* 对角写法 */
            /* 第一种写法 */
            /* transform:  translateX(100px) translateY(-100px); */
            /* 第二种写法 */
            transform: translate(100px,100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2、2d-缩放scale（）

让元素根据中心原点对对象进行缩放，默认的值1.因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。

缩放scale（）函数和translate（）函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。

例如：

scale（1,1）元素不会有任何变化，而scale（2,2）让元素沿X轴和Y轴放大两倍。

scaleX（）：相当于scale（sx，1）。表示元素只在X轴（水平方向）缩放元素，其默认值是1。

scaleY（）：相当于scale（1，sy）。表示元素只在Y轴（垂直方向）缩放元素，其默认值是1

scale（）里边填负值-1.5，是倒向放大的效果

-0.5 是倒放缩小的效果

支持x轴，y轴单独放大scaleX（），scaleY（）

代码练手：

<!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>Document</title>
    <style>
        div{
            width: 300px;
            border: 5px solid rebeccapurple ;
            margin: 0% auto;
            /* 放大溢出隐藏 */
            /* overflow: hidden; */
        }
        img{
            width: 100%;
            transition: all 2s;
            /* 改变中心点的位置，从左上角开始放大 */
            /* 值：center（默认值），left top，left bottom，left center ，right top，right center，right bottom*/
            transform-origin: left top;
        }
        div:hover img{
            transform: scale(1.5);
          
        }
    </style>
</head>
<body>
    <div>
        <img src="1.jpg" alt="">
    </div>
</body>
</html>

3、2d-旋转rotate（）

rotate（绕着中心转）===rotateZ

transform-origin：用来改变旋转中心的点

4、2d-旋转-折扇效果案例

效果：

鼠标未放上去之前鼠标放上去之后

代码：

<!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>Document</title>
    <style>
        *{
            margin: 0%;
            padding: 0%;
        }
        ul{
            list-style: none;
        }

        ul{
            margin: 10px auto;
            width: 600px;
            height: 400px;
            border: 5px solid gray;
            position: relative;
          
        }
        li{
            width: 60px;
            height: 200px;
            position: absolute;
            left: 50%;
            margin-left: -30px;
            bottom: 20px;
            text-align: center;
            /* 调整中心点 */
            transform-origin: bottom center;
            /* 圆角 */
            border-radius: 10px;

            transition: all 2s;
            box-shadow: 5px 5px 5px black;
        }
        ul li:not(:nth-child(7)){
            opacity: 0;
        }
        ul:hover li{
            opacity: 1;
        }
        ul li:nth-child(1),ul li:nth-child(13){
            background: purple;
        }
        ul li:nth-child(2),ul li:nth-child(12){
            background: red;
        }
        ul li:nth-child(3),ul li:nth-child(11){
            background: skyblue;
        }
        ul li:nth-child(4),ul li:nth-child(10){
            background: green;
        }
        ul li:nth-child(5),ul li:nth-child(9){
            background: orange;
        }
        ul li:nth-child(6),ul li:nth-child(8){
            background: palevioletred;
        }
        ul li:nth-child(7){
            background: yellow;
        }

       
        ul:hover li:nth-child(1){
            transform: rotate(90deg);
        }
        ul:hover li:nth-child(13){
            transform: rotate(-90deg);
        }
        ul:hover li:nth-child(2){
            transform: rotate(75deg);
        }
        ul:hover li:nth-child(12){
            transform: rotate(-75deg);
        }
        ul:hover li:nth-child(3){
            transform: rotate(60deg);
        }
        ul:hover li:nth-child(11){
            transform: rotate(-60deg);
        }
        ul:hover li:nth-child(4){
            transform: rotate(45deg);
        }
        ul:hover li:nth-child(10){
            transform: rotate(-45deg);
        }
        ul:hover li:nth-child(5){
            transform: rotate(30deg);
        }
        ul:hover li:nth-child(9){
            transform: rotate(-30deg);
        }
        ul:hover li:nth-child(6){
            transform: rotate(15deg);
        }
        ul:hover li:nth-child(8){
            transform: rotate(-15deg);
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
    </ul>
</body>
</html>

5、2d-多属性值

两个transform不要一起写，后面的会覆盖前面的

注意平移和缩放写的顺序

效果：

代码：

<!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>Document</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            border: 2px solid gray;
        }
        .box div{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid black;
        }
        .box div:nth-child(1){
            transform: translate(400px);
        }

        /* 注意顺序    平移和缩放 */
        .box div:nth-child(2){
            transform: translate(400px) scale(0.5);
        }
        .box div:nth-child(3){
            transform: scale(0.5) translate(400px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

注意平移和旋转

效果：

代码：

<!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>Document</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            border: 2px solid gray;
        }
        .box div{
            width: 100px;
            height: 100px;
            background: red;
            border: 1px solid black;
        }
        .box div:nth-child(1){
            transform: translate(400px);
        }

        /* 注意顺序     */
        .box div:nth-child(2){
            transform: translate(400px) rotate(45deg);
        }
        .box div:nth-child(3){
            transform: rotate(45deg) translate(400px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

6、2d-倾斜

效果：

代码：

<!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>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: red;
            line-height: 200px;
            text-align: center;
            border: 1px solid gray;
            font-size: 50px;
            margin: 0 auto;
            transform: skewX(30deg);
            /* skewX      正值，拽右下角，往右拉动，形成30deg
            skewY           正值，拽着右下角，往下拉动，形成30deg
            skew(x,y)       正值，拽住右下角，往右下角，形成30deg
             */
        }
        .box2{
            width: 200px;
            height: 200px;
            background: red;
            line-height: 200px;
            text-align: center;
            border: 1px solid gray;
            font-size: 50px;
            margin: 0 auto;
            transform: skewY(30deg);
        }
        .box3{
            width: 200px;
            height: 200px;
            background: red;
            line-height: 200px;
            text-align: center;
            border: 1px solid gray;
            font-size: 50px;
            margin: 0 auto;
            transform: skew(30deg,30deg);
        }
    </style>
</head>
<body>
    <div class="box1">hello</div>
    <div class="box2">hello</div>
    <div class="box3">hello</div>
</body>
</html>