css学习之动画效果

最新推荐文章于 2023-04-18 16:19:22 发布

Henry_Jing

最新推荐文章于 2023-04-18 16:19:22 发布

阅读量316

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/JCY1009015337/article/details/53522802

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

移动效果：

transform:translate(200px,100px);//不同浏览器还需要不同的适应

旋转效果：

transform: rotate(180deg);

缩放效果：

transform:scale(1,2)//横向不变，纵向放大2倍

倾斜效果：

transform：skew(50deg,50deg)

过渡：

通过使用CSS3，可以给元素添加一些效果，CSS3过渡是元素从一种样式转换成另一种样式（动画效果的CSS，动画执行的时间）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: blue;
            transition:width 2s,height 2s,transform 2s;
            transition-delay: 2s;//延时两秒实现效果
        }
        div:hover{
            width: 200px;
            height: 200px;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            animation: anim 5s infinite alternate;
        }
        @keyframes anim{
            0%{background: red;  left:0px;  top: 0px;  }
            25%{background: blue;  left:200px;  top: 0px;  }
            50%{background: #40ff50;  left:200px;  top: 200px;  }
            75%{background: #ff3ff6;  left:0px;  top: 200px;  }
            100%{background: #ff121a;  left:0px;  top: 0px;  }
        }
        @-webkit-keyframes anim {
            0%{background: red;  left:0px;  top: 0px;  }
            25%{background: blue;  left:200px;  top: 0px;  }
            50%{background: #40ff50;  left:200px;  top: 200px;  }
            75%{background: #ff3ff6;  left:0px;  top: 200px;  }
            100%{background: #ff121a;  left:0px;  top: 0px;  }
        }

    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

多列：

.div1{
    column-count: 3;
    column-gap: 50px;
    column-rule: 5px outset red;
}

瀑布流效果

.container{
column-width: 250px;
column-gap: 5px;
}
.container div{
width: 250px;
margin: 5px 0;
border: 1px solid red;
}

</style>

......

</div>

Henry_Jing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css学习之动画效果

移动效果：transform:translate(200px,100px);//不同浏览器还需要不同的适应旋转效果：transform: rotate(180deg);缩放效果：transform:scale(1,2)//横向不变，纵向放大2倍倾斜效果：transform：skew(50deg,50deg)过渡：通过使用CSS3，可以给元素添加一些效
复制链接

扫一扫