css3-animation图层放大效果

echo008

于 2016-05-16 10:29:51 发布

阅读量896

点赞数

本文链接：https://blog.csdn.net/echo008/article/details/51423085

版权

css3-animation和transform的学习

鼠标经过图层时，图层放大效果。增加文本或图层动画效果，提高用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3-animation</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
        width: 750px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
    }
    li {
        width: 150px;
        height: 240px;
        background: #fff;
        box-shadow: 0 0 10px rgba(100, 100, 100, .5);
        float: left;
    }
    li img{
    	display: block;
    	width:100%;
    	height:100%;
    }
    li:hover {
        animation: rect 0.2s ease;
        animation-fill-mode: forwards; /*保持最后一帧的状态*/
    }
    @keyframes rect {
        from {
            transform: scale(1, 1);
        }
        to {
            transform: scale(1.2, 1.2);
        }
    }
    </style>
</head>
<body>
    <ul>
        <li><img src="./images/anim1.jpg"></li>
        <li><img src="./images/anim2.jpg"></li>
        <li><img src="./images/anim3.jpg"></li>
        <li><img src="./images/anim2.jpg"></li>
        <li><img src="./images/anim1.jpg"></li>
    </ul>
</body>
</html>