CSS3制作皮卡丘动画壁纸的示例


Posted in HTML / CSS onNovember 02, 2020

正文

OK,接下来就是晒效果图的时候了,看图后才有兴趣了解一下,不然很沉闷,没什么心思看了。

CSS3制作皮卡丘动画壁纸的示例

PS:由于我这个动画的尺寸做得比较大(720 x 1280),所以为了能录这个gif动画,我缩小了一倍。但是其实按原尺寸看效果会更好一些,这个的话,可以在文章结尾处我提供的地址下载。

言归正传,其实这个动画效果并不难,大家可以看到这个结构是非常简单清晰的。不过虽然简单,但是呈现出来的效果还是很不错的,这也是我为什么愿意做的原因。

好的,既然这么简单,就来看一下我实现它的html结构吧:

<div class="pikachu_container">
    <div class="header">
        <div class="header_main">
            <span class="battery"></span>
            <span class="clock" id="nowTime">09:00</span>
        </div>
    </div>
    <div class="time">
        <h1>09:00</h1>
        <p id="date">2015年 9月3日</p>
        <p>比卡丘可爱手机壁纸</p>
    </div>
    <div class="body">
        <div class="eyes">
            <div class="leftEye"></div>
            <div class="rightEye"></div>
        </div>
        <div class="nose"></div>
        <div class="cheek">
            <div class="leftCheek"></div>
            <div class="rightCheek"></div>
        </div>
        <div class="mouth">
            <div class="mouth_main">
                <div class="tongue"></div>
            </div>
        </div>
        <div class="hands">
            <div class="leftHand">
                <div class="leftHand_main">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <div class="leftshadow"></div>
                </div>
            </div>
            <div class="rightHand">
                <div class="rightHand_main">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <div class="rightshadow"></div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box_main">
                <div class="box_circle"></div>
            </div>
        </div>
    </div>
    <p class="author">@JR</p>
</div>

结构主线还是比较清晰的,整体上分为顶部电池和时间,中部的时间日期,还有皮卡丘的身体。而皮卡丘的身体又分为眼睛,鼻子,嘴巴,脸颊,双手和球。

把html结构搭建好了之后,就可以根据自己对该图测量出来的各部分的尺寸进行CSS样式的编写。

那么接下来我就把每一个部分的CSS实现代码分享给大家:

首先初始化一下

*{
    margin:0;
    padding:0;
}
body{
    font-family:"微软雅黑";
    color:#fff;
}
.pikachu_container{
    width:720px;
    height:1280px;
    background:rgb(251,205,60);
    position:relative;
    overflow:hidden;
    margin:0 auto;
}

顶部电池和时间

.pikachu_container .header{
    width:100%;
    height:50px;
    line-height:50px;
    position:relative;
    top:0;
    left:0;
}
.pikachu_container .header .header_main{
    width:160px;
    height:100%;
    position:absolute;
    right:0;
    top:0;
    font-size:30px;
    overflow:hidden;
}
.header .header_main .battery{
    display:inline-block;
    width:34px;
    height:18px;
    border:3px solid #fff;
    border-radius:5px;
    position:absolute;
    top:50%;
    left:23px;
    margin-top:-12px;
}
.header .header_main .battery:after{
    content:'';
    display:inline-block;
    width:5px;
    height:14px;
    background:#fff;
    position: absolute;
    top:2px;
    right:2px;
    -webkit-animation:charging 2s linear infinite;
    -moz-animation:charging 2s linear infinite;
    -o-animation:charging 2s linear infinite;
    -ms-animation:charging 2s linear infinite;
    animation:charging 2s lineat infinite;
}
@-webkit-keyframes charging{
    0%{
        width:5px;
    }
    100%{
        width:30px;
    }
}
@-moz-keyframes charging{
    0%{
        width:5px;
    }
    100%{
        width:30px;
    }
}
@-o-keyframes charging{
    0%{
        width:5px;
    }
    100%{
        width:30px;
    }
}
@-ms-keyframes charging{
    0%{
        width:5px;
    }
    100%{
        width:30px;
    }
}
@keyframes charging{
    0%{
        width:5px;
    }
    100%{
        width:30px;
    }
}
.header .header_main .battery:before{
    content:'';
    display:block;
    width:3px;
    height:12px;
    background:#fff;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    position: absolute;
    top:3px;
    left:-6px;
}
.header .header_main .clock{
    position: absolute;
    right:14px;
    top:0;
}

中部的日期和时间

.pikachu_container .time{
    width:100%;
    height:250px;
    position: relative;
    top:70px;
    left:0;
    text-align:center;
}
.pikachu_container .time h1{
    font-size:90px;
    letter-spacing:8px;
    text-shadow:-1px 2px 3px rgba(0,0,0,0.5);
}
.pikachu_container .time p:nth-of-type(1){
    font-size:30px;
    margin-top:10px;
}
.pikachu_container .time p:nth-of-type(2){
    font-size:26px;
    margin-top:8px;
    -webkit-animation:textShake 1s infinite;
    -moz-animation:textShake 1s infinite;
    -o-animation:textShake 1s infinite;
    -ms-animation:textShake 1s infinite;
    animation:textShake 1s infinite;
}
@-webkit-keyframes textShake{
    0%,20%,40%,60%,80%,100%{
        -webkit-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
        -webkit-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%,30%,50%,70%,90%{
        -webkit-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-moz-keyframes textShake{
    0%,20%,40%,60%,80%,100%{
        -moz-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
        -moz-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%,30%,50%,70%,90%{
        -moz-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-o-keyframes textShake{
    0%,20%,40%,60%,80%,100%{
        -o-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
        -o-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%,30%,50%,70%,90%{
        -o-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@-ms-keyframes textShake{
    0%,20%,40%,60%,80%,100%{
        -ms-transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
        -ms-transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%,30%,50%,70%,90%{
        -ms-transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}
@keyframes textShake{
    0%,20%,40%,60%,80%,100%{
        transform:rotate(1deg) translate3d(2px,-2px,0);
    }
    5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
        transform:rotate(0deg) translate3d(0px,0px,0);
    }
    10%,30%,50%,70%,90%{
        transform:rotate(-1deg) translate3d(-2px,2px,0);
    }
}

皮卡丘的眼睛

.pikachu_container .body{
    width:100%;
    height:940px;
    position: relative;
    top:50px;
    left:0;
}
.body .eyes{
    position: relative;
}
.body .eyes .leftEye,.body .eyes .rightEye{
    width:85px;
    height:85px;
    border:5px solid rgb(2,0,1);
    background:rgb(51,51,51);
    border-radius:50%;
    position: absolute;
    top:40px;
}
.body .eyes .leftEye{
    left:150px;
}
.body .eyes .rightEye{
    right:150px;
}
.body .eyes .leftEye:after,.body .eyes .rightEye:after{
    content:'';
    display:block;
    width:40px;
    height:40px;
    background:#fff;
    border:5px solid rgb(2,0,1);
    border-radius:50%;
    position:absolute;
    top:2px;
    left:2px;
    -webkit-animation:eyeMove 3s infinite;
    -moz-animation:eyeMove 3s infinite;
    -o-animation:eyeMove 3s infinite;
    -ms-animation:eyeMove 3s infinite;
    animation:eyeMove 3s infinite;
}
@-webkit-keyframes eyeMove{
    0%,100%{
        top:2px;
        left:2px;
    }
    30%,60%,70%{
        top:0px;
        left:17px;
    }
    40%{
        top:0px;
        left:21px;
    }
    50%{
        top:0px;
        left:13px;
    }
    80%,90%{
        top:17px;
        left:17px;
    }
}
@-moz-keyframes eyeMove{
    0%,100%{
        top:2px;
        left:2px;
    }
    30%,60%,70%{
        top:0px;
        left:17px;
    }
    40%{
        top:0px;
        left:21px;
    }
    50%{
        top:0px;
        left:13px;
    }
    80%,90%{
        top:17px;
        left:17px;
    }
}
@-o-keyframes eyeMove{
    0%,100%{
        top:2px;
        left:2px;
    }
    30%,60%,70%{
        top:0px;
        left:17px;
    }
    40%{
        top:0px;
        left:21px;
    }
    50%{
        top:0px;
        left:13px;
    }
    80%,90%{
        top:17px;
        left:17px;
    }
}
@-ms-keyframes eyeMove{
    0%,100%{
        top:2px;
        left:2px;
    }
    30%,60%,70%{
        top:0px;
        left:17px;
    }
    40%{
        top:0px;
        left:21px;
    }
    50%{
        top:0px;
        left:13px;
    }
    80%,90%{
        top:17px;
        left:17px;
    }
}
@keyframes eyeMove{
    0%,100%{
        top:2px;
        left:2px;
    }
    30%,60%,70%{
        top:0px;
        left:17px;
    }
    40%{
        top:0px;
        left:21px;
    }
    50%{
        top:0px;
        left:13px;
    }
    80%,90%{
        top:17px;
        left:17px;
    }
}

皮卡丘的鼻子

.body .nose{
    position:absolute;
    width:28px;
    height:18px;
    background:rgb(51,51,51);
    border:4px solid rgb(2,0,1);
    border-radius:36px/26px;
    left:50%;
    top:100px;
    margin-left:-18px;
    -webkit-animation:noseMove 3s infinite;
    -moz-animation:noseMove 3s infinite;
    -o-animation:noseMove 3s infinite;
    -ms-animation:noseMove 3s infinite;
    animation:noseMove 3s infinite;
}
@-webkit-keyframes noseMove{
    0%,49%,51%,100%{
        width:28px;
        height:18px;
        margin-left:-18px;
    }
    50%{
        width:34px;
        height:20px;
        margin-left:-21px;
    }
}
@-moz-keyframes noseMove{
    0%,49%,51%,100%{
        width:28px;
        height:18px;
        margin-left:-18px;
    }
    50%{
        width:34px;
        height:20px;
        margin-left:-21px;
    }
}
@-o-keyframes noseMove{
    0%,49%,51%,100%{
        width:28px;
        height:18px;
        margin-left:-18px;
    }
    50%{
        width:34px;
        height:20px;
        margin-left:-21px;
    }
}
@-ms-keyframes noseMove{
    0%,49%,51%,100%{
        width:28px;
        height:18px;
        margin-left:-18px;
    }
    50%{
        width:34px;
        height:20px;
        margin-left:-21px;
    }
}
@keyframes noseMove{
    0%,49%,51%,100%{
        width:28px;
        height:18px;
        margin-left:-18px;
    }
    50%{
        width:34px;
        height:20px;
        margin-left:-21px;
    }
}

皮卡丘的脸颊

.body .cheek{
    position: relative;
}
.body .cheek .leftCheek,.body .cheek .rightCheek{
    width:120px;
    height:120px;
    border:5px solid rgb(2,0,1);
    background:rgb(231,74,57);
    border-radius:50%;
    position: absolute;
    top:170px;
    -webkit-animation:cheekMove 3s infinite;
    -moz-animation:cheekMove 3s infinite;
    -o-animation:cheekMove 3s infinite;
    -ms-animation:cheekMove 3s infinite;
    animation:cheekMove 3s infinite;
}
@-webkit-keyframes cheekMove{
    0%,46%,54%,100%{
        width:120px;
        height:120px;
        top:170px;
    }
    50%{
        width:100px;
        height:100px;
        top:180px;
    }
}
@-moz-keyframes cheekMove{
    0%,46%,54%,100%{
        width:120px;
        height:120px;
        top:170px;
    }
    50%{
        width:100px;
        height:100px;
        top:180px;
    }
}
@-o-keyframes cheekMove{
    0%,46%,54%,100%{
        width:120px;
        height:120px;
        top:170px;
    }
    50%{
        width:100px;
        height:100px;
        top:180px;
    }
}
@-ms-keyframes cheekMove{
    0%,46%,54%,100%{
        width:120px;
        height:120px;
        top:170px;
    }
    50%{
        width:100px;
        height:100px;
        top:180px;
    }
}
@keyframes cheekMove{
    0%,46%,54%,100%{
        width:120px;
        height:120px;
        top:170px;
    }
    50%{
        width:100px;
        height:100px;
        top:180px;
    }
}
.body .cheek .leftCheek{
    left:60px;
}
.body .cheek .rightCheek{
    right:60px;
}

皮卡丘的嘴巴

.body .mouth{
    position: relative;
    width:180px;
    height:220px;
    left:50%;
    top:180px;
    margin-left:-90px;
}
.body .mouth .mouth_main{
    position: absolute;
    left:0;
    top:0px;
    width:180px;
    height:220px;
    background:rgb(132,37,41);
    border:4px solid rgb(2,0,1);
    border-top-right-radius:15px 15px;
    border-bottom-left-radius: 250px 570px;
    border-bottom-right-radius: 250px 590px;
    overflow:hidden;
    -webkit-animation:mouthMove 3s infinite;
    -moz-animation:mouthMove 3s infinite;
    -o-animation:mouthMove 3s infinite;
    -ms-animation:mouthMove 3s infinite;
    animation:mouthMove 3s infinite;
}
@-webkit-keyframes mouthMove{
    0%,46%,54%,100%{
        height:220px;
    }
    50%{
        height:20px;
    }
}
@-moz-keyframes mouthMove{
    0%,46%,54%,100%{
        height:220px;
    }
    50%{
        height:20px;
    }
}
@-o-keyframes mouthMove{
    0%,46%,54%,100%{
        height:220px;
    }
    50%{
        height:20px;
    }
}
@-ms-keyframes mouthMove{
    0%,46%,54%,100%{
        height:220px;
    }
    50%{
        height:20px;
    }
}
@keyframes mouthMove{
    0%,46%,54%,100%{
        height:220px;
    }
    50%{
        height:20px;
    }
}
.body .mouth:after,.body .mouth:before{
    content:'';
    display:block;
    width:112px;
    height:38px;
    background:rgb(251,205,60);
    border-bottom:4px solid rgb(2,0,1);
    position: absolute;
    top:-13px;
    z-index:3;
}
.body .mouth:after{
    border-left:4px solid rgb(2,0,1);
    border-bottom-left-radius: 340px 180px;
    left:-30px;
    -webkit-transform:rotate(-24deg);
    -moz-transform:rotate(-24deg);
    -o-transform:rotate(-24deg);
    -ms-transform:rotate(-24deg);
    transform:rotate(-24deg);
}
.body .mouth:before{
    border-right:4px solid rgb(2,0,1);
    border-bottom-right-radius: 340px 180px;
    right:-30px;
    -webkit-transform:rotate(24deg);
    -moz-transform:rotate(24deg);
    -o-transform:rotate(24deg);
    -ms-transform:rotate(24deg);
    transform:rotate(24deg);
}
.body .mouth .tongue{
    width:200px;
    height:200px;
    background:rgb(221,102,106);
    margin-top:40px;
    margin-left:-10px;
    border-top-left-radius: 380px;
    border-top-right-radius: 420px 380px;
    overflow:hidden;
}

皮卡丘的嘴巴还是值得琢磨的,最主要还是用了border-radius来完成这个效果。这个圆角特性还是蛮强大的,主要是看怎么去使用它。

皮卡丘身上的球

.body .box{
    width:82px;
    height:82px;
    border:3px solid #fff;
    border-radius:50%;
    position: relative;
    box-shadow:0 0 5px rgba(255,255,255,0.9);
    left:50%;
    top:320px;
    margin-left:-44px;
    -webkit-animation:box-rotate 4s ease-in-out infinite alternate;
    -moz-animation:box-rotate 4s ease-in-out infinite alternate;
    -o-animation:box-rotate 4s ease-in-out infinite alternate;
    -ms-animation:box-rotate 4s ease-in-out infinite alternate;
    animation:box-rotate 4s ease-in-out infinite alternate;
}
@-webkit-keyframes box-rotate{
    0%,90%,100%{
        -webkit-transform:rotate(0deg);
    }
    40%,50%{
        -webkit-transform:rotate(360deg);
        box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-moz-keyframes box-rotate{
    0%,90%,100%{
        -moz-transform:rotate(0deg);
    }
    40%,50%{
        -moz-transform:rotate(360deg);
        box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-o-keyframes box-rotate{
    0%,90%,100%{
        -o-transform:rotate(0deg);
    }
    40%,50%{
        -o-transform:rotate(360deg);
        box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@-ms-keyframes box-rotate{
    0%,90%,100%{
        -ms-transform:rotate(0deg);
    }
    40%,50%{
        -ms-transform:rotate(360deg);
        box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
@keyframes box-rotate{
    0%,90%,100%{
        transform:rotate(0deg);
    }
    40%,50%{
        transform:rotate(360deg);
        box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
    }
}
.body .box .box_main{
    width:80px;
    height:80px;
    border-radius:50%;
    background:rgb(236,2,3);
    border:1px solid #333;
    position: absolute;
    top:0;
    left:0;
    overflow:hidden;
}
.body .box .box_main:before{
    content:'';
    display:block;
    width:80px;
    height:40px;
    background:#fff;
    position:absolute;
    bottom:0;
    left:0;
}
.body .box .box_main:after{
    content:'';
    display:block;
    width:80px;
    height:12px;
    background:rgb(59,53,67);
    position:absolute;
    top:50%;
    left:0;
    margin-top:-6px;
}
.body .box .box_main .box_circle{
    width:24px;
    height:24px;
    border:8px solid rgb(59,53,67);
    border-radius:50%;
    background:#fff;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-20px;
    margin-top:-20px;
    z-index:5;
}
.body .box .box_main .box_circle:after{
    content:'';
    display:block;
    width:16px;
    height:16px;
    border:1px solid rgb(59,53,67);
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-9px;
    margin-top:-9px;
    -webkit-animation:bg_change 4s infinite;
    -moz-animation:bg_change 4s infinite;
    -o-animation:bg_change 4s infinite;
    -ms-animation:bg_change 4s infinite;
    animation:bg_change 4s infinite;
}
@-webkit-keyframes bg_change{
    0%,40%,60%,90%,100%{
        background:none;
    }
    50%{
        background:rgb(236,2,3);
    }
}
@-moz-keyframes bg_change{
    0%,40%,60%,90%,100%{
        background:none;
    }
    50%{
        background:rgb(236,2,3);
    }
}
@-o-keyframes bg_change{
    0%,40%,60%,90%,100%{
        background:none;
    }
    50%{
        background:rgb(236,2,3);
    }
}
@-ms-keyframes bg_change{
    0%,40%,60%,90%,100%{
        background:none;
    }
    50%{
        background:rgb(236,2,3);
    }
}
@keyframes bg_change{
    0%,40%,60%,90%,100%{
        background:none;
    }
    50%{
        background:rgb(236,2,3);
    }
}

PS:至于双手的手,由于事先的代码比较多,加上篇幅已经有点长,所以就不拿上来了。需要的话可以到我的github下载。

本案例github下载地址:https://github.com/JR93/pikachu

原文链接:https://www.cnblogs.com/jr1993/p/4779678.html

以上就是CSS3制作皮卡丘动画壁纸的示例的详细内容,更多关于CSS3 制作皮卡丘壁纸的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS3不透明度实例讲解
Apr 26 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 #HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 #HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 #HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 #HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 #HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 #HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 #HTML / CSS
You might like
支持oicq头像的留言簿(二)
2006/10/09 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
javascript 写类方式之八
2009/07/05 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
javascript数据类型详解
2017/02/07 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python中去空格函数的用法
2014/08/21 Python
python抽象基类用法实例分析
2015/06/04 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
高中军训感言400字
2014/02/24 职场文书
综合内勤岗位职责
2014/04/14 职场文书
离婚协议书范本样本
2014/08/19 职场文书
民用住房租房协议书
2014/10/29 职场文书
2014年居委会工作总结
2014/12/09 职场文书
航班延误投诉信
2015/07/02 职场文书
女性健康讲座主持词
2015/07/04 职场文书
小学音乐课教学反思
2016/02/18 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android