一、鼠标滑入文字逐个渐入
效果图：
鼠标滑入按钮时，按钮中原本的文字从下方滑走，同时在原位置上，按钮文字单个挨个浮现。（原本文字和后面单个浮现的文本内容可不一致，可根据需要进行调整）。
实现思路：
用div模拟button按钮，并将按钮文本单个单个的放在其子元素span中，用于后面的单个显示。而鼠标没有触发时的静止状态文本则由div按钮的伪类::before来承担。在静态状态下将所有span元素的opacity透明度设置为0（元素不可见了，但仍占据原来的空间），当鼠标滑入按钮时，设置所有span元素的透明度为1，但从前往后给span设置不同的延时时间，即形成了上图中文字依次渐入的效果。鼠标滑入时原来的文本也是一样，通过设置opacity为0隐藏，且给一个竖直方向移动的动画即可。
代码：
1） HTML结构
<div class="btn" data-text="Get Started Now"><span>G</span><span>e</span><span>t</span><span> </span><span>S</span><span>t</span><span>a</span><span>r</span><span>t</span><span>e</span><span>d</span><span> </span><span>N</span><span>o</span><span>w</span></div>
2）CSS
/* 静态按钮的文本 */.btn::before {content: attr(data-text); /* 划重点！这样可多次复用本段CSS */opacity: 1;position: absolute;/* 使其不占据空间，不将子元素span挤到后面去 */-webkit-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;-ms-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;-moz-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;}.btn:hover::before {opacity: 0;transform: translateY(100%);}/* 鼠标滑入逐个渐入的文字 */.btn>span {opacity: 0;-webkit-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;-ms-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;-moz-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;}.btn:hover>span {opacity: 1;}.btn:hover>span:nth-child(1) {-webkit-transition-delay: 0.01s;-ms-transition-delay: 0.01s;-moz-transition-delay: 0.01s;transition-delay: 0.01s;}.btn:hover>span:nth-child(2) {-webkit-transition-delay: 0.05s;-ms-transition-delay: 0.05s;-moz-transition-delay: 0.05s;transition-delay: 0.05s;}.btn:hover>span:nth-child(3) {-webkit-transition-delay: 0.10s;-ms-transition-delay: 0.10s;-moz-transition-delay: 0.10s;transition-delay: 0.10s;}/* ...有多少个字就写多少个延时，每次递增0.05s差不多，可自行调整，空格最好也算上，不然效果会不太顺畅 */
【TIPS】cubic-bezier是定义贝赛尔曲线，一般用于描述速率曲线，不详述，感兴趣的可自行百度。
【兼容性】上述涉及transition的加了很多浏览器前缀，是因为它存在兼容性问题（主要是针对IE），其浏览器兼容支持如下表：
要是嫌手动写浏览器前缀很麻烦，可以下载一些插件，自动补全（例如：Autoprefixer）。此外，这里还有一个问题：我们通常习惯将带前缀的属性写在对应不带前缀的属性之前，这是为了在所有浏览器统一标准时,我们的通用属性覆盖前面的hack。
二、气泡上升效果
效果图：
一共用了三张气泡的图片（png格式，背景透明）作为背景图，需自己提前绘制，或者也可以用CSS绘制（前提是环形气泡中间不要求是透明的）。
实现思路：
用6个li模拟出现的所有气泡（数量自定，但数目较多一些显得自然一些，建议四五个及以上），设定两个不同的动画效果（移动translate、大小scale变化），随机赋给6个li作为动画animation，并分别给定不同的延时时间（思路同上述效果），营造出随意的感觉即可。
代码：
1）HTML结构：
<ul class="bubble"><li class="b-1"></li><li class="b-2"></li><li class="b-3"></li><li class="b-4"></li><li class="b-5"></li><li class="b-6"></li></ul>
2）CSS：
.bubble .b-1 {width: 6px;height: 6px;background: url(../../image/welcome/bubble3.png) no-repeat;animation: bubble1 7s linear infinite;}.bubble .b-2 {width: 8px;height: 8px;background: url(../../image/welcome/bubble2.png) no-repeat;animation: bubble2 5s linear infinite;}.bubble .b-3 {width: 12px;height: 12px;background: url(../../image/welcome/bubble1.png) no-repeat;animation: bubble1 4s linear infinite;}.bubble .b-4 {width: 8px;height: 8px;background: url(../../image/welcome/bubble2.png) no-repeat;animation: bubble2 5s linear infinite;}.bubble .b-5 {width: 6px;height: 6px;background: url(../../image/welcome/bubble3.png) no-repeat;animation: bubble2 7s linear infinite;}.bubble .b-6 {width: 12px;height: 12px;background: url(../../image/welcome/bubble1.png) no-repeat;animation: bubble1 6s linear infinite;}/* 比赛入口气泡动画 */@keyframes bubble1 {0% {opacity: 0;transform: translate(0px,0) scale(.8);}50% {opacity: 1;transform: translate(10px,-20px) scale(1.1);}100% {opacity: 0;transform: translate(5px,-50px) scale(.9);}}@keyframes bubble2 {0% {opacity: 0;transform: translate(0px,0) scale(.8);}50% {opacity: 1;transform: translate(3px,-20px) scale(1.1);}100% {opacity: 0;transform: translate(5px,-50px) scale(.9);}}
【TIPS】bubble-x中的宽高是小气泡背景图片本身的宽高，为了使图片变形失真不那么明显，气泡scale值不要太大。
【TIPS】keyframes中0%和100%时必须设opacity为0，才有渐入渐出的效果，不然会直愣愣地消失，体验不好。
【兼容性】animation和transform都涉及兼容性问题（为了整洁起见，上述CSS未添加带浏览器前缀的兼容代码）：
三、渐变边框动画效果
效果图：
上图实现了三个渐变边框的动画效果，且上一个的边框阴影覆盖在下一个上面（调整各div的z-index），营造出“百叶窗”的突出显示效果。
实现思路：
先讲其中一个框的实现：每一个框一个div，每一个“框”分三部分组成，::before实现渐变边框（实际上是渐变背景），::after实现内部白色背景，最后div的其他子元素作为框内的文字内容显示。使用animation动画实现::before渐变背景旋转，即可模拟边框动画：
这个时候会遇到li内部子元素被::after覆盖显示不了的问题（::after的显示层级高于正常流元素），给内部子元素加position: relative;z-index: 1;即可（若有其他更好的解决办法，望告知）。
代码：
1）HTML结构
<div class="con"><div class="box"><p>123</p></div><div class="box"><p>456</p></div><div class="box"><p>789</p></div></div>
2）CSS：
.con {width: 500px;height: 500px;display: flex;flex-direction: column;justify-content: center;align-items: center;background-image: linear-gradient(#5b53fd,#87a8fb);}.box {width: 300px;height: 50px;margin: 4px auto;position: relative;overflow: hidden; /* 动画的关键之一，使渐变背景仅显示需要的那一部分 */border-radius: 4px;box-shadow: 0 10px 15px rgba(0,0,0,.7);color: #000;font-size: 16px;vertical-align: middle;}.box>* { /* 此处调整层级是为了使div.box子元素显示（不被::after覆盖） */position: relative;z-index: 1;padding-left: 20px;}.box:nth-child(1) { /* 层级的调整是为了使上一层div.box阴影覆盖下一个div.box */z-index: 3;}.box:nth-child(2) {z-index: 2;}.box:nth-child(3) {z-index: 1;}.box::before {content: "";display: inline-block;position: absolute;width: 310px;height: 310px;margin-top: -125px; /* 当元素absolute时，可使用margin调整其位置，而不影响其他元素布局 */margin-left: -5px;background-image: linear-gradient(45deg,#51f4fa 35%,#da7efc 60%);border-radius: 50%;animation: rotate 5s linear infinite 0s; /* 动画关键之一，使渐变背景旋转 */}.box::after {content: "";display: inline-block;position: absolute; top: 3px;bottom: 3px; /* 重点！设置对立方位的值，使元素具有填充特性，且跟随父元素大小变化 */left: 3px;right: 3px;background: #fff;border-radius: 3px;}@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(355deg);}}
【TIPS】当不需要外面那层渐变边框有border-radius圆角效果和上述动画效果的话，可以使用border-image的渐变来实现渐变边框。
【TIPS】为了边框动画效果中颜色过渡自然一点，linear-gradient的颜色值不要设置两个颜色直接从0%到100%显示，亲测 linear-gradient(45deg,#51f4fa 35%,#da7efc 60%) 下表现较好。
【TIPS】为了使上述动画效果适用于不同尺寸的“框”，建议::after和::before元素的宽高设置相对单位（当然是相对于外层元素div.con），这样其他地方需要用到这个效果时，直接加上类名即可完美适配。当然，此时需要给外层li position:relative，而::after和::before position:absolute。
【兼容性】background-image（左）和border-image（右）
