css3新特性-动画

最新推荐文章于 2022-03-17 21:42:47 发布

C-A-L-D

最新推荐文章于 2022-03-17 21:42:47 发布

阅读量134

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_42952262/article/details/100052694

版权

一.2D转换：

transform: translate(100px,250px); 	/*  水平偏移100px，垂直偏移250px; */
transform: rotate(45deg);			/*顺时针旋转45度*/
transform: skew(30deg,20deg);			/*绕x,y轴分别旋转30度，20度*/
transform: scale(2,4);				/*长宽分别扩大2,4倍*/

二.3D转换：

常用的3D转换的方法有：
1. translate3d(x,y,z) 定义3D转化
2. scale3d(x,y,z) 定义3D缩放转换
3. rotate3d(x,y,z,angle) 定义3D旋转如：transform: rotate3d(1,1,0,30deg) 绕x,y轴旋转30度

三.过渡：

要实现过渡，必须规定两项内容：
1. 规定您希望把效果添加到哪个CSS 属性上
2. 规定效果的时长（如果时长未规定，则不会有过渡效果，因为默认值是0）

transition-property CSS 属性的名称
transition-duration 过渡效果花费的时间
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果何时开始

transition：需要过渡的属性过渡时间，需要过渡的属性过渡时间......; 综合前面的属性

测试2：

四.动画：

使用动画需要有两个步骤：
1. 使用@keyframes创建动画
2. 使用animation绑定动画到对应元素

测试：


<!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>
        div {
    width: 100px;
    height: 100px;
    background: red;
    transition:transform 2s, width 2s, height 2s;
    
}

div:hover {
    width: 200px;
    height: 200px;
    transform: rotate(180deg);
    animation: donhua 2s;        /*动画名称 动画耗时*/
   
  


}

@keyframes donhua
{
    0% {background-color: red ;}
    25% {background-color:green;}
    50% {background-color: gold;}
    100% {background-color: dodgerblue;}

}
.p
{
    margin: 200px auto
}




    
    
    </style>
</head>
<body>

    <div class="p"></div>
    
</body>
</html>

五.多列：

1. column-count 规定元素应该被分隔的列数
2. column-gap 规定列之间的间隔
3. column-rule 设置列之间的宽度、样式和颜色规则

待续。。。。。。。

C-A-L-D

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3新特性-动画

一.2D转换：transform: translate(100px,250px); /* 水平偏移100px，垂直偏移250px; */transform: rotate(45deg); /*顺时针旋转45度*/transform: skew(30deg,20deg); /*绕x,y轴分别旋转30度，20度*/transform: scale(2,4); /*长宽分...
复制链接

扫一扫