为了丰富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圈子到底怎么了...话说,国内WordPress圈子是否还有新的发展机遇?这个充斥着同质化产品和激烈内卷的市场中,如何在价格和功能的差异化上寻求突破,为圈子注入新的活力,是开发者不得不面对的问题。
-
重塑WordPress生态的思考与探索前两天的《WordPress圈子到底怎么了...》这篇文章大家都挺有感触的,群里聊得热火朝天。里头啥声音都有:有的哥们儿直接吐槽WordPress性能拖后腿,躲都躲不及;有的则感慨流量难搞,但坚持建站纯粹是出于热爱和那份情怀;还有人预言,以后建站啊,模块化、可视化才是王道;较热闹的还得数短视频和直播,这家伙一来,内容消费整个儿变了天,网站和小程序怎么赚钱都成难题了。
-
WordPress企业主题近期,国内WordPress社群似乎进入了一段相对宁静的时期,无论是活跃的用户群体还是勤勉的开发者们,都呈现出一种沉稳的态势。在这样一个略显静谧的时刻,追格团队选择利用这段时间沉潜下来,专心致志地精进自身的产品,力求在每一个细节上都追求完善,以备在不久的将来,以更加超凡脱俗的面貌回馈给广大用户与开发者。
-
Loco Translate 一款专为WordPress设计的翻译插件WordPress Loco Translate是一款专为WordPress用户设计的翻译插件,它简化了主题和插件的多语言翻译过程。
-
追格小程序V2.5.0更新发布追格小程序V2.5.0版本的更新,我们没给大家添太多新花样,主要是把“内功”练好了。我们认真检查了上一版里那些组件之间的小摩擦,一点点地调整、优化,搞定了超过40多个小地方。这样一来,小程序跑起来就更顺畅了,大家用起来也会感觉更舒服、更顺手。这次虽然没大张旗鼓,但确实是让产品站得更稳、更可靠了。
-
WordPress后台待审文章显示气泡提示的方法之前小编分享过一篇《WordPress 后台菜单添加 badge-红点提示(气泡通知)》的文章,今天我简单说说待审文章(为全部文章类型显示待审角标提示)的气泡提示如何操作。
暂无评论,抢个沙发...