css3新特性之動畫使用

時間 2019-12-06

標籤 css3 css 特性動畫使用欄目 CSS 简体版

原文原文鏈接

有個朋友N久沒有動前端，最近由於需求和人手不得不硬着頭皮拾起它。有個需求是圖片放大瀏覽，由於時間緊沒有時間學新的如react等，因此仍是用jq，一直在找插件，可是都不太滿意。因此問我有沒推薦。我想了想，要引入新的插件開銷仍是有的，能夠使用CSS3新特性。transform有個方法scale就是實現縮放的，再配合上animation不要太簡單。css

不過此前還有個問題，圖片放大以後不能影響到現有的盒子結構。因此在圖片父元素上給個相對定位，圖片使用絕對定位便可。html

下面是隨意寫的小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便可。react

在個人github裏也有整理關於animation和transform的知識點。不過animation相關並不是原創，因此就不傳上來了。各位想深刻些能夠跳轉頁面：css3