zoukankan html css js c++ java

02-CSS基础与进阶-day12_2018-09-19-21-37-34

08CSS3动画.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div {
             width: 120px;
             height: 120px;
             background-color: pink;
                      /* 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向*/
          animation: run 4s ease 0s infinite alternate;
       }
       /*定义动画*/
       @keyframes run {
              from {
              transform: translateX(0);
              } 
              to {
               transform: translateX(500px);
              }
       }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

09多组动画.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       div {
             width: 120px;
             height: 120px;
             background-color: pink;
                      /* 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向*/
          animation: run 4s ease 0s infinite;
       }
       /*定义动画*/
       @keyframes run {
              0% {
              transform: translate3d(0,0,0);
              } 

              25% {
              transform: translate3d(600px,0,0);
              }

              50% {
                    transform: translate3d(600px,400px,0);
              }

              75% {
                    transform: translate3d(0,400px,0);
              }
              100% {
               transform: translate3d(0,0,0);
              }
       }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

查看全文

相关阅读:
Oracle：解锁scott用户及设置密码
 js生成条形码
 返回头部效果
 密码强度
 事件委托小效果
 圆形导航效果
 进度条效果
 标题跟随效果
 随机抽人小效果
 点击创建效果

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