前言

明天就放假了,趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果。话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以用CSS3来实现的,于是带着好感就实现了它。至于原图吧,为了不影响大家对我实现的动画产生对比,我就有心地不放上来了,哈哈!那么到底是什么效果呢?接着往下看吧!

正文

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

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年&nbsp;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:;
padding:;
}
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:;
left:;
}
.pikachu_container .header .header_main{
width:160px;
height:100%;
position:absolute;
right:;
top:;
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:;
}

中部的日期和时间

.pikachu_container .time{
width:100%;
height:250px;
position: relative;
top:70px;
left:;
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:;
}
.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:;
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:;
}
.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:;
left:;
overflow:hidden;
}
.body .box .box_main:before{
content:'';
display:block;
width:80px;
height:40px;
background:#fff;
position:absolute;
bottom:;
left:;
}
.body .box .box_main:after{
content:'';
display:block;
width:80px;
height:12px;
background:rgb(59,53,67);
position:absolute;
top:50%;
left:;
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:;
}
.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

若需转载,请注明出处,谢谢合作!

纯CSS3制作皮卡丘动画壁纸的更多相关文章

  1. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  2. 纯CSS3实现打火机火焰动画

    HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...

  3. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  4. CSS源码之纯css3制作的哆啦a梦图片

    本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...

  5. 一款简洁的纯css3代码实现的动画导航

    之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  6. 2014圣诞节一款纯css3实现的雪人动画特效

    在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <span cla ...

  7. css3制作左右拉伸动画菜单

    微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...

  8. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  9. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

随机推荐

  1. Python黑帽编程 3.3 MAC洪水攻击

    Python灰帽编程 3.3 MAC洪水 传统的交换机(我只对我目前使用的交互机做过测试,按照常识只能这样表述)在数据转发过程中依靠对CAM表的查询来确定正确的转发接口,一旦在查询过程中无法找到相关目 ...

  2. 理解nginx的配置

    Nginx配置文件主要分成四部分:main(全局设置).server(主机设置).upstream(上游服务器设置,主要为反向代理.负载均衡相关配置)和 location(URL匹配特定位置后的设置) ...

  3. OpenCV(5) 对比度和亮度

      公式: 两个参数 \alpha > 0 和 \beta 一般称作 增益 和 偏置 参数.我们往往用这两个参数来分别控制 对比度 和 亮度 .   #include "stdafx. ...

  4. SPRING IN ACTION 第4版笔记-第十一章Persisting data with object-relational mapping-001-使用Hibernate(@Inject、@EnableTransactionManagement、@Repository、PersistenceExceptionTranslationPostProcessor)

    一.结构 二.Repository层 1. package spittr.db; import java.util.List; import spittr.domain.Spitter; /** * ...

  5. CSS3 动画记

    css3 动画 在CSS3中可以通过animation创建复杂的动画序列,像transition属性一样用来控制CSS的属性实现动画效果. animation实现动画效果主要由两个部分组成. 通过类似 ...

  6. EF性能优化(一)

    一:背景 说到EF的性能问题,我相信都是大家比较头痛的问题,有很多初学者望而却步,可是每每菜鸟在群里面抱怨EF太慢的时候,这个时候总有一些大牛登场说一句:怪EF咯?怪你不会用! 当然我从未嫌弃过它,因 ...

  7. [每日一题] 11gOCP 1z0-052 :2013-09-4 block header grows............................................A33

    转载请注明出处:http://write.blog.csdn.net/postedit/11100311 正确答案是:AD 要理解这道题就要去了解数据块的结构.引用OCPPPT中的一幅图: 从这幅图中 ...

  8. SSM-MyBatis-11:Mybatis中查询全部用resultmap

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 实体类很普通,四个字段,编号,名字,作者名,价格 在接口中的方法声明如下 //查全部 public List& ...

  9. 自定义Form组件

    一.wtforms源码流程 1.实例化流程分析 # 源码流程 1. 执行type的 __call__ 方法,读取字段到静态字段 cls._unbound_fields 中: meta类读取到cls._ ...

  10. Oracle 11g DRCP连接方式——基本原理

    学习Oracle是一个复杂.繁琐的过程.在浩如烟海的Oracle官方资料.新特性.MOS资料和各种Internal知识面前,我们总是觉得力不从心.不知所措.但是,这往往也就是我们不断坚持.积累和追寻的 ...