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

来源：互联网发布：软件概要设计说明书编辑：程序博客网时间：2024/05/17 08:31

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