为了丰富WordPress模板中的展示交互,我们可以定义一些常用的css动画类名,在需要使用该动画的地方,调用该css类即可实现css动画。
如酱茄Pro,WordPress模板展示站里的网址导航
.jiangqie-site-ac {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.jiangqie-site-ac:hover {
transform: translateY(-4px);
-webkit-transform: translateY(-4px);
-moz-transform: translateY(-4px);
box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
-webkit-box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
-moz-box-shadow: 0 20px 32px -18px rgba(79,125,183,.3);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
以及追格企业官网WordPress主题专业版 首页中的为什么选择我们图标模块
.zhuige-hvr-float-shadow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.zhuige-hvr-float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 60%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 60%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.zhuige-hvr-float-shadow:hover, .zhuige-hvr-float-shadow:focus, .zhuige-hvr-float-shadow:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.zhuige-hvr-float-shadow:hover:before, .zhuige-hvr-float-shadow:focus:before, .zhuige-hvr-float-shadow:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
以上两种css hover效果,均是采用css中定义通用型动画css,均可以应用在WordPress的其他块结构元素上,通过调用,在不同模块实现相同效果的csshover动画。
-
WordPress函数:esc_html__ 转义HTML字符WordPress函数:esc_html__ 转义HTML字符
-
WordPress函数:esc_html_x 带上下文的转义翻译WordPress函数:esc_html_x 带上下文的转义翻译
-
WordPress 6.5移除区块样板菜单项的方法WordPress 6.5新增的区块样板菜单项,可将不同区块组合成一个新的区块模板,方便重复使用。
-
WordPress做多语言企业网站近期常用小伙伴问追格小编,有没有计划做双语WordPress企业官网主题。
-
WP Multilang WordPress翻译插件WP Multilang插件的主要功能是提供多语言支持,使用户能够创建多语言版本的网站,满足不同语言用户的需求。
-
WordPress插件:LiteSpeed Cache 缓存插件LiteSpeed Cache是一款实用的WordPress缓存插件,专为使用LiteSpeed服务器的用户设计。它能显著提高网站加载速度,改善用户体验。
暂无评论,抢个沙发...