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>

posted @ 2017-06-29 14:12 想太多先森阅读(131) 评论(0) 编辑收藏举报

刷新页面返回顶部

@想太多先森

css11动态效果

公告