zoukankan html css js c++ java

02-CSS基础与进阶-day13_2018-09-21-20-05-21

css3动画
@keyframes 动画名 {
0%
{

}
100%
{

}
}

元素执行动画
animation: 动画名运动时间运动曲线

01运动的汽车.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        img {
            animation: move 5s infinite;
        }
        /*定义动画*/
       @keyframes move {
           0% {
                 transform: translate3d(0,0,0);
           }
           50% {
                 transform: translate3d(800px,0,0);
           }
           51% {
                 /*多组变形 空格隔开即可*/
                 transform: translate3d(800px,0,0) rotateY(180deg);
           }
           100% {
                 transform: translate3d(0,0,0) rotateY(180deg);
           }
       }
    </style>
</head>
<body>
    <img src="car.jpg" alt="" width="100" />
</body>
</html>

查看全文

相关阅读:
List集合
 ArrayList_toArray
Collection集合基础知识
 Array类的使用
 16.10
16.9
16.8
16.7
16.6
16.5

原文地址：https://www.cnblogs.com/HiJackykun/p/11079780.html