简单的CSS图片动画(鼠标悬浮效果)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhoujingying22/article/details/51223286

效果如下:

这里写图片描述
素材:一张宽 400px , 高 250px 的图片,一个宽 200px , 高 125px块级容器
原理:设置块级容器的background-image + animation设置帧动画 + 鼠标hover实现

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    .a{

        width:200px;
        height:125px;                            /* 图片的宽高 > 放图片的div容器宽高,不然放大后图片不清晰*/
        background-image:url(../img/animation.jpg);
        background-size: 200px 125px; 
        background-position:center;              /*保持背景位置为center*/
    }

    @keyframes ani{

        0%{
            background-size: 200px 125px;        /*若不设置 0%:没有平滑的动画效果 */
        }                                        /*若设置多个百分梯度:动画会分梯度生硬过度*/

        100%{
            background-size: 400px 250px;
        }
    }

    .a:hover{

        animation:ani 1s;                        /*与@keyframes绑定 并规定在1s内完成动画*/
        animation-fill-mode : forwards;          /*鼠标不离开容器,仍保持动画的最后效果*/
    }

</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页