js 实现点赞放大效果（动画练习）

最新推荐文章于 2024-05-16 10:02:43 发布

巴迪

最新推荐文章于 2024-05-16 10:02:43 发布

阅读量3.4k

点赞数 2

文章标签： js

本文链接：https://blog.csdn.net/weixin_40568715/article/details/80371759

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #box{
        width: 100px;
        height: 100px;
        margin:0 auto;
        top: 100px;
        left:50%;
        border: 1px solid deeppink;
    }
    #zan,#zan1{
        font-family: FreesiaUPC;
        font-size: small;
        color: #000;
        -webkit-transition: all .25s ease-in-out ;
        -moz-transition: all .25s ease-in-out ;
        -ms-transition: all .25s ease-in-out ;
        -o-transition: all .25s ease-in-out ;
        transition: all .25s ease-in-out ;
    }
    #box .big{
        font-size: 200px;
        animation: gogo 1.5s 1;
        display:none;
        opacity: 0;
    }
    @keyframes gogo {
        0%{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
            opacity:0.5;
        }
        30%{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
            opacity:1;
        }
        70%{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
            opacity:1;
        }
        100%{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
            opacity:0;
        }
    }
</style>
<body>
<div id="box">
    <i class="iconfont reward" id="zan">赞</i>
    <i class="iconfont big" id="zan1" >赞</i>
</div>
<script>
    window.onload=function () {
        var zan=document.getElementById("zan");
        var zan1=document.getElementById("zan1");
        zan.onclick=function () {
            zan1.style.display='block';
        }
    }
</script>
</body>
</html>
效果如图：
做的很丑 但是差不多那个意思
涉及到transition transform 以及@keyframes的用法

巴迪

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js 实现点赞放大效果（动画练习）

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
复制链接

扫一扫