CSS3动画属性

最新推荐文章于 2024-07-25 17:55:10 发布

銭佳

最新推荐文章于 2024-07-25 17:55:10 发布

阅读量90

点赞数

文章标签： css3 3d

本文链接：https://blog.csdn.net/weixin_41895038/article/details/104605104

版权

CSS3动画属性

CSS3动画分为2d和3d动画

2d变形属性
2d的变形是在平面位置内进行移动、缩放、旋转、倾斜的变化
变形属性：transform

1、位移
属性：transform:translate(参数1，参数2)

<style>
        div{
            width: 300px;
            height: 300px;
            background: orange;
        }
        h2{
            width: 100px;
            height: 100px;
            background: orchid;
            /* 向右移动200px，向下移动100px */
            transform:translate(200px,100px);
        }
    </style>
    <body>
    <div>
        <h2></h2>
    </div>
</body>

运行截图：
在这里插入图片描述

2、缩放
属性： transform:scale((参数1，参数2)

3、旋转
属性：transform:rotate()

<style>
        div{
            width: 300px;
            height: 300px;
            background: orange;
        }
        h2{
            width: 100px;
            height: 100px;
            background: orchid;                  
        }
        h2:hover{
            /* 鼠标划过h2，旋转75度持续1秒 */
            transition: 1s;
            /* 绕中心点旋转75度 */
            transform: rotate(75deg);
        }
    </style>

4、倾斜
属性：transform:skew()

小提示：如果transform有两个功能函数：先写位移再写旋转/缩放/倾斜

3d变形属性
（3D变形与2D变形类似）
1、 3D的位移：
transform:translate3D(x,y,z);

2、3D的旋转：
transform:rotate();
rotate3D(x,y,z,a) [ 0不旋转。1旋转 ]
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3、3D缩放： transform:scale3d(x,y,z);

以下是3d空间的旋转示例（运行结果可自行查看）

.box{
            width:400px;
            height:300px;
            background:orange ;
            background-size:100% 100%;
            margin:100px auto;
            /* 形成3D空间 */
            transform-style:preserve-3d;
            transform:rotateY(50deg);
        }
        h2{
            width:200px;
            height:200px;
            background:blue ;
            transition:1s;
        }
        .box:hover h2{
            transform: rotateX(80deg);
        }
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>

关键帧动画
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}

.box{
            width:800px;
            height:500px;
            background:orange;
            margin:50px auto;
            position:relative;
        }
        h2{
            width:100px;
            height:100px;
            background:blue;
            position:absolute;
            left:0;top:0;
            /* 用animation 调用关键帧 */
            animation:h2Move 3s infinite;
        }

        .box:hover h2{
            /* 鼠标滑过动画暂定 */
            animation-play-state:paused;
        }

        /* 制定关键帧 */
        @keyframes h2Move{
            0%{
                left:0;top:0;
            }
            25%{
                left:700px;top:0;
            }
            50%{
                left:700px;top:400px;
            }
            75%{
                left:0;top:400px;
            }
            100%{
                left:0;top:0;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <h2></h2>
    </div>
</body>

銭佳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画属性

CSS3动画属性CSS3动画分为2d和3d动画2d变形属性2d的变形是在平面位置内进行移动、缩放、旋转、倾斜的变化变形属性：transform1、位移属性：transform:translate(参数1，参数2)<style> div{ width: 300px; height: 300px; ...
复制链接

扫一扫