博客 文章中 文字上下摇摆动画效果

个人博客传送门》》》》》

/**
 *　　┏┓　　　┏┓+ +
 *　┏┛┻━━━┛┻┓ + +
 *　┃　　　　　　　┃ 　
 *　┃　　　━　　　┃ ++ + + +
 * ████━████ ┃+
 *　┃　　　　　　　┃ +
 *　┃　　　┻　　　┃
 *　┃　　　　　　　┃ + +
 *　┗━┓　　　┏━┛
 *　　　┃　　　┃　　　　　　　　　　　
 *　　　┃　　　┃ + + + +
 *　　　┃　　　┃
 *　　　┃　　　┃ +  神兽保佑
 *　　　┃　　　┃    代码无bug　　
 *　　　┃　　　┃　　+　　　　　　　　　
 *　　　┃　 　　┗━━━┓ + +
 *　　　┃ 　　　　　　　┣┓
 *　　　┃ 　　　　　　　┏┛
 *　　　┗┓┓┏━┳┓┏┛ + + + +
 *　　　　┃┫┫　┃┫┫
 *　　　　┗┻┛　┗┻┛+ + + +
 */

 ======

实现方法，编写博客的时候，选择 html 这个图标，编辑html源代码

 

添加如下语句 即可

<p><em><strong><a class="gomyblog" href="#" target="_blank">个人博客传送门》》》》》</a></strong></em></p>
<pre>/**
*　　┏┓　　　┏┓+ +
*　┏┛┻━━━┛┻┓ + +
*　┃　　　　　　　┃ 　
*　┃　　　━　　　┃ ++ + + +
<span class="gomyblog">* ████━████ ┃+</span>
*　┃　　　　　　　┃ +
*　┃　　　┻　　　┃
*　┃　　　　　　　┃ + +
*　┗━┓　　　┏━┛
*　　　┃　　　┃　　　　　　　　　　　
*　　　┃　　　┃ + + + +
*　　　┃　　　┃
*　　　┃　　　┃ + 神兽保佑
*　　　┃　　　┃ 代码无bug　　
*　　　┃　　　┃　　+　　　　　　　　　
*　　　┃　 　　┗━━━┓ + +
*　　　┃ 　　　　　　　┣┓
*　　　┃ 　　　　　　　┏┛
*　　　┗┓┓┏━┳┓┏┛ + + + +
*　　　　┃┫┫　┃┫┫
*　　　　┗┻┛　┗┻┛+ + + +
*/</pre>
</div>
</div>
<style><!--
.gomyblog {
display:inline-block;
animation:lol 0.5s infinite 3s;
-webkit-animation:lol 0.5s infinite 3s;

}
@keyframes lol {
0% {transform:rotate(0deg)}
33% {transform:rotate(30deg)}
66% {transform:rotate(0deg)}
100% {transform:rotate(-30deg)} 
}
@-webkit-keyframes lol {
0% {-webkit-transform:rotate(0deg)}
33% {-webkit-transform:rotate(30deg)}
66% {-webkit-transform:rotate(0deg)}
100% {-webkit-transform:rotate(-30deg)} 
}
--></style>

　　

======