js 实现点赞放大效果 (动画练习)

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>Documenttitle>
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的用法

你可能感兴趣的:(js 实现点赞放大效果 (动画练习))