乐趣区

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

jiezi

前言

一年一度的 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 程序员节，欢送正在浏览的你也退出。

退出移动版