css动画:WordPress如何添加通用css动画
为了丰富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插件:在线问答DW Question & AnswerDW Question & Answer是一款WordPress在线问答插件,追格小编曾分享过多个类似插件。
-
WordPress注册登录页美化插件Custom Login Page Customizer by Colorlib追格小编分享过一款WordPress登录页面美化插件:Login Designer,今天再分享一款类似插件Custom Login Page Customizer by Colorlib。
-
微信小程序转发文件到聊天API wx.shareFileMessagewx.shareFileMessage是微信小程序转发文件到聊天API。追格小编前面分享过《wx.shareVideoMessage微信小程序转发视频到聊天接口》,有兴趣的朋友可以看看。
-
Simple Lightbox:WordPress图片附件打开效果(灯箱效果)插件Simple Lightbox是一个WordPress图片附件打开效果(灯箱效果)插件,就是让文章内的图片,在点击后弹出类似于幻灯片的效果,即实现点击查看高清图片用。
-
WordPress插件:Branda 自定义网站仪表盘插件(白标插件)Branda是一个自定义网站仪表板WordPress插件,有些人也叫白标插件。Branda支持自定义网站仪表板的很多位置,支持修改或删除工具栏中的徽标、添加工具栏链接、删除工具栏链接等。
-
WordPress插件:LoginPress注册登录页美化插件LoginPress是一个WordPress登录页美化插件,LoginPress插件在WordPress官网显示有20万+的安装量,该插件和其他登录美化页插件差不多,均可可视化修改登录页面和登录表单,自定义登录页Logo,自定义登录页面背景,自定义登录页面表单样式等。
暂无评论,抢个沙发...