本项更改的是首页头像typecho 头像旋转,将键盘放到头像后让其晃动并放大。将以下代码添加到后台主题设置 自定义CSS。

   #转动快慢和头像大小自行修改数值

    /*首页头像自动旋转*/
    .thumb-lg{
        width:130px;
    }
    .avatar{
        -webkit-transition: 0.4s;
        -webkit-transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out; 
    }
    .avatar:hover{
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
    }
    #aside-user span.avatar{
        animation-timing-function:cubic-bezier(0,0,.07,1)!important;
        border:0 solid
    }
    #aside-user span.avatar:hover{
        transform:rotate(360deg) scale(1.2);
        border-width:5px;
        animation:avatar .5s

  鼠标点击义卖特效

  样式二,将下边的代码放到后台开发者设置的自定义JS中

<p><pre>(function(window,document,undefined){

var hearts = [];
window.requestAnimationFrame = (function(){
        return window.requestAnimationFrame ||
                   window.webkitRequestAnimationFrame ||
                   window.mozRequestAnimationFrame ||
                   window.oRequestAnimationFrame ||
                   window.msRequestAnimationFrame ||
                   function (callback){
                           setTimeout(callback,1000/60);
                   }
})();
init();
function init(){
        css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
        attachEvent();
        gameloop();
}
function gameloop(){
        for(var i=0;i
Last modification:March 22nd, 2021 at 09:41 pm
如果觉得我的文章对你有用,请随意赞赏