1024程序员节将至，通过代码实现思否猫冲出月球庆祝一下

前言

一年一度的1024程序员节就要到了，每年1024程序员节都有不一样的境遇，岁岁1024，今又1024。为了烘托节日气氛，结合工作内容，实现一个通过HTML5简单实现思否猫冲出月球的效果，分享一下，感兴趣的可以复制一下代码查看一下效果。

需求

这里通过使用前端的知识来实现思否猫冲出月球的动态效果，通过思否猫冲出月球效果来实现本次主题的效果。

主要组成部分有思否猫和月球两部分内容，而且思否猫和月球是单独分开的两个部分，然后提前准备好思否猫和月球的素材文件，可以根据自己喜好选择不同的思否猫姿势和月球，最后通过HTML+CSS相结合来实现最终的思否猫冲出月球的动画效果。

素材

1、思否猫的图片素材（根据自己喜好来选择素材）；下载地址：https://pan.baidu.com/s/1zI9C... 提取码: 6ga3
2、月球的图片素材（同样是根据自己喜好来定）。这里不再提供月球素材

代码

首先新建一个前端项目，这里是创建一个基于vue.js的项目工程，然后把思否猫和月球的静态资源素材拖入项目中去，接着新建一个html的文件，最后在新建的这个html文件中实现核心的思否猫冲出月球的效果。具体的核心代码如下所示：

<meta charset="UTF-8">

<title>冲出月球的思否猫</title>

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }

    body{
        background: #111111;
    }

    .wrap{
        width: 470px;
        height: 470px;
        margin: 50px auto;
        border: 10px solid white;
        text-align: center;
    }

    .wrap .moon{
        /* margin-top: 50px; */
        margin-top: 20px;
        position: relative;
    }

    .wrap .change{
        position: relative;
        margin-top: -550px;
        margin-left: -350px;
        opacity: 0;  /*全透明*/
        transition-duration: 3s;  /*动画过渡时间3秒*/
    }

    .wrap:hover .change{
        transition-duration: 2s;
        /*transform: translate(100px,100px);*/ /*移动方向*/
        transform: translate(230px,200px);/*移动方向*/
        opacity: 1;/*不透明*/
    }

</style>

<div class="wrap">
    <div class="moon">
        <img src="../assets/image/moon.png" alt="" width="430" height="430"> 
    </div>

    <div class="change">
        <img src="../assets/image/cat.png" alt="" width="300" height="300"> 
    </div>

</div>

效果

经过上述操作之后，然后直接在浏览器中打开这个html文件，鼠标放在月球上面，思否猫会自右下角开始向左上角移动飞出，然后就实现了思否猫冲出月球的动画效果，具体的效果如下所示：

通过代码实现思否猫冲出月球的效果还不算完，再来品鉴一下关于程序员节的诗：

     七绝·程序员节快乐
 一年快乐是今朝，万里风光入画桡。
 莫道江南春色好，梅花开遍雪中遥。

再来一首关于程序员节的藏头诗：

程门立雪已多风，
序幕拉开又一中。
员外学习知识广，
节前进取意志雄。
日新月异求真理，
快马加鞭创大同。
乐在其间无止境，
哦诗作赋有神功！

最最后再加一首，送给思否官方的藏头诗：

思绪飞千里，
否极定一公。
加薪为梦想，
油盐酱醋葱。

最后

上面的操作只是通过前端知识来实现一个简单的思否猫冲出月球的动画效果，其实还有很大的提升空间，如果有觉得能做的更好的，可以交流学习，迫于篇幅有限就不再详细的完善。也提前预祝大家1024程序员节快乐！

本文参与了1024程序员节，欢迎正在阅读的你也加入。