css11动态效果

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>transform的使用title>
    style>
        li{
            list-style: none;
            float: left;
            width: 80px;
            line-height: 40px;
            background: rgba(242, 123, 5, 0.61);
            border-radius: 6px;
            font-size: 16px;
            margin-left: 3px;
        }
        li a{
            text-decoration: none;
            color: #fff;
            display: block;
            text-align: center;
            height: 40px;
            
        }
        li a:hover{
            background: rgba(242, 88, 6, 0.87);
            border-radius: 6px;
            /*设置a元素在鼠标移入时向右下角移动4px，8px*/
            /* transform: translate(4px,8px); 平移*/
            /*鼠标放入  显示1.5倍的效果
            transform: scale(1.5);*/
            /* transform: skewX(15deg);只针对X轴
             transform: skewY(15deg);只针对Y轴*/
             transform: skew(15deg,-15deg);
        }

        img:hover{
            /*旋转 默认是 顺时针旋转*/
            transform: rotate(90deg) scale(1.5);
        }
    style>
head>
body>
    ul>
        li>a href="#">服装城a>li>
        li>a href="#">美妆馆a>li>
        li>a href="#">超市a>li>
        li>a href="#">全球购a>li>
        li>a href="#">闪购a>li>
        li>a href="#">团购a>li>
        li>a href="#">拍卖a>li>
        li>a href="#">金融a>li>
    ul>
img src="cat.jpg" alt="小猫咪"  height="100px" width="100px">
body>
html>

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>transition属性title>
    style type="text/css">
/*
transition属性的值：
transition-property：过渡效果的css属性的名称（color,background,font-size....）!
                      可以只设置一个属性， 一般方便起见使用all！针对于所有的属性
transition-duration:过渡效果需要多少秒
transition-timing-function：速度曲线！
     ease：慢速开始，之后变快！
     linear：匀速！
     ease-in:慢速开始!
     ease-out:慢速结束：
     ease-in-out:慢速开始!慢速结束!
transition-delay:过度效果开始前的等待时间！ 默认是0s！
*/
  div{
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      background-color: orange;
      /*过度效果*/
      transition:all  1s  linear;
  }
 div:hover{
     background-color: red;
     font-size: 25px;
     transform: rotate(360deg);
 }
    style>
head>
body>
div>
    能旋转不？
div>
body>
html>

DOCTYPE html>
html>
head lang="en">
    meta charset="UTF-8">
    title>animation的使用title>
    style  type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: red;
            /*调用动画*/
            animation:animates 3s linear infinite;
        }
       /*创建关键帧*/
        @keyframes  animates{
            0%{
                width: 0px;
                transform: translate(50px,0) ;
            }
            25%{
                width: 25px;
                height: 150px;
                transform: translate(150px,0) rotate(90deg);
                background-color: pink;
            }
            50%{
                width: 50px;
                height: 300px;
                background-color: aqua;
                transform: translate(300px,0) rotate(180deg);
            }
            75%{
                width: 75px;
                height: 150px;
                background-color: orange;
                transform: translate(150px,0) rotate(270deg);
            }
            100%{
                width: 100px;
                transform: translate(50px,0) rotate(360deg);
            }
        }
    style>
head>
body>
div>div>
body>
html>