css3 一些简单的动画使用方法

最新推荐文章于 2024-07-13 11:46:18 发布

菜鸟梦想之路

最新推荐文章于 2024-07-13 11:46:18 发布

阅读量226

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/lyb249473330/article/details/78056626

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css3 一些简单的动画使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background: #3be637;
            margin: 100px auto;
            /*旋转*/
            /*transform: rotate(100deg);*/
            /*位移*/
           /* transform: translate(150px,150px);*/
            /*缩放*/
          /*  transform: scale(2);*/
            /*斜切*/
            /*transform: skew(30deg,30deg);*/
            transition: all 1s ease;
        }
        /*transform 需要事件来触发*/
        .box:hover{transform: skew(30deg,30deg); }

        .box2{
            width: 100px;
            height: 100px;
            background: blue;
                animation: run 5s infinite linear;
            margin-left: 100px;
            /*定义动画执行到100%的位置停止住*/
              /*animation-fill-mode:  forwards;*/
        }
        @keyframes run {
            0%{
                width: 200px;
            }
            50%{
                width: 500px;
            }

            100%{
                width: 1000px;
            }
        }

    </style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>

</body>
</html>

菜鸟梦想之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 一些简单的动画使用方法

css3 一些简单的动画使用方法 Title .box{ width: 300px; height: 200px; background: #3be637; margin: 100px auto; /*旋转*/
复制链接

扫一扫