HTML5+CSS3从入门到精通 CSS3新特性之动画使用浅析-职坐标

HTML5+CSS3从入门到精通 CSS3新特性之动画使用浅析

沉沙 2018-06-12 来源：阅读 1377 评论 0

摘要：本篇教程讲解了CSS3新特性动画使用的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

现有个需求是图片放大浏览，可以使用CSS3新特性。transform有个方法scale就是实现缩放的，再配合上animation不要太简单。

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

下面是随意写的小demo：

<!DOCTYPE html>
<html>
<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>
    <div>
        <img src="./test.jpg" alt="" class=""/>
    </div>
</div>
</body>
</html>

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

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！

html5css3教程 html5+css3视频教程 html5 css3从入门到精通pdf

本文由 @沉沙发布于职坐标。未经许可，禁止转载。