WordPress指定图片旋转360度特效


Logo实现rotate360

Akina主题的focus logo的设置在/layouts/imbox.php里边,搜索“focus_logo”,定位到下面一行:

<div class="header-tou"><a href="<?php bloginfo('url');?>" ><img class="focus_logo" src="<?php echo akina_option('focus_logo', ''); ?>"></a></div>

如果没有class="focus_logo"属性请自行添加。

在主题根目录下的style.css文件里添加下面的代码:

.focus_logo{
-webkit-transition: 0.6s;
-webkit-transition: -webkit-transform 0.6s ease-out;
transition: transform 0.6s ease-out;
-moz-transition: -moz-transform 0.6s ease-out;
}
.focus_logo:hover{
transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}

作者Logo实现rotate360

Akina主题 author logo的设置在/layouts/authorprofile.php里边,找到下面的代码:

<img  src="//cn.gravatar.com/avatar/<?php echo esc_attr(md5(get_the_author_meta('user_email'))); ?>?s=80" itemprop="image" alt="<?php the_author(); ?>">

在img标签里加入class="profile"

然后在style.css里边加入下面的代码:

.profile{
-webkit-transition: 2s;
-webkit-transition: -webkit-transform 2s ease-out;
transition: transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
}
.profile:hover{
transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}

自由是路人,重逢无意中