css3新特性之动画使用

有个朋友N久没有动前端,最近因为需求和人手不得不硬着头皮拾起它。 有个需求是图片放大浏览,因为时间紧没有时间学新的如react等,所以还是用jq,一直在找插件,但是都不太满意。所以问我有没推荐。我想了想,要引入新的插件开销还是有的,可以使用CSS3新特性。transform有个方法scale就是实现缩放的,再配合上animation不要太简单。

不过此前还有个问题,图片放大之后不能影响到现有的盒子结构。所以在图片父元素上给个相对定位,图片使用绝对定位即可。

下面是随意写的小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale test</title>
    <style>
        @keyframes transform-test {
            to {
                transform: scale(2);
            }
        }

        .img-box {
            position: relative;
            width:200px;
            margin:200px auto 0;
        }

        .img {
            position: absolute;
        }

        .img:hover {
            /*加上fill-mode forwards,使得动画结束后保持*/
            animation: 1s transform-test forwards;
        }

        img {
            width: 100%;
            height: auto;
        }

    </style>
</head>
<body>
<div class="img-box">
    <div class="img">
        <img src="./test.jpg" alt="" class=""/>
    </div>
</div>
</body>
</html>

上面实现的是hover时图片放大两倍。如果要实现click效果也好办,click后换个class,在这个class里直接写上animation即可。

在我的github里也有整理关于animationtransform的知识点。不过animation相关并非原创,所以就不传上来了。各位想深入些可以跳转页面:

    原文作者:geek_zwb
    原文地址: https://segmentfault.com/a/1190000010855545
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞
Scroll Up