当前位置:首页>WP建站>Wordpress>B2文章:hover水纹特效美化,效果满满的

B2文章:hover水纹特效美化,效果满满的

申明此水纹特效来自于日主题;

只需将下方的CSS放置于子主题样式文件中,保存,强制刷新前端即可看到效果。

/*
 * ------------------------------------------------------------------------------
 * 文章小动画
 * 让他们使劲的找一找吧!!!
 * ------------------------------------------------------------------------------
 */
.post-module-thumb a.thumb-link,.shop-normal-item-img a.link-block{
	transition: 0.9s ease-out all;
}
.post-module-thumb a.thumb-link:hover::after,.shop-normal-item-img a.link-block:hover::after {
	opacity:0.8;
	-webkit-transform:scale(1);
	transform:scale(1);
}
.post-module-thumb a.thumb-link:hover,.shop-normal-item-img a.link-block:hover{
    /* -webkit-transform:translateY(-5px);
	transform:translateY(-5px); */
	box-shadow:0 5px 5px rgba(0,0,0,0.1);
	transition: 0.9s ease-out all;
	background:rgba(0,0,0,0.5);
}
.post-module-thumb a.thumb-link::before,.shop-normal-item-img a.link-block::before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0);
	transition:background 0.3s ease-out;
	z-index:2    
}
.post-module-thumb a.thumb-link::after,.shop-normal-item-img a.link-block::after{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	width:50px;
	height:50px;
	margin:-25px 0 0 -25px;
	background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NSIgaGVpZ2h0PSI0NSIgdmlld0JveD0iMCAwIDQ1IDQ1IiBzdHJva2U9IiNmZmYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj48Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSI2IiBzdHJva2Utb3BhY2l0eT0iMCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMTswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS13aWR0aCIgYmVnaW49IjEuNXMiIGR1cj0iM3MiIHZhbHVlcz0iMjswIiBjYWxjTW9kZT0ibGluZWFyIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjIyIiBjeT0iMjIiIHI9IjYiIHN0cm9rZS1vcGFjaXR5PSIwIj48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiBiZWdpbj0iM3MiIGR1cj0iM3MiIHZhbHVlcz0iNjsyMiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utb3BhY2l0eSIgYmVnaW49IjNzIiBkdXI9IjNzIiB2YWx1ZXM9IjE7MCIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJzdHJva2Utd2lkdGgiIGJlZ2luPSIzcyIgZHVyPSIzcyIgdmFsdWVzPSIyOzAiIGNhbGNNb2RlPSJsaW5lYXIiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9jaXJjbGU+PGNpcmNsZSBjeD0iMjIiIGN5PSIyMiIgcj0iOCI+PGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgYmVnaW49IjBzIiBkdXI9IjEuNXMiIHZhbHVlcz0iNjsxOzI7Mzs0OzU7NiIgY2FsY01vZGU9ImxpbmVhciIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2NpcmNsZT48L2c+PC9zdmc+);
	background-repeat:no-repeat;
	background-size:100% 100%;
	z-index:3;
	-webkit-transform:scale(2);
	transform:scale(2);
	transition:opacity 0.35s,-webkit-transform 0.35s;
	transition:transform 0.35s,opacity 0.35s;
	transition:transform 0.35s,opacity 0.35s,-webkit-transform 0.35s;
	opacity:0;
}

 

给TA打赏
共{{data.count}}人
人已打赏

相关文章

Wordpress

如何获取子主题后台控制中心不同类型的数据

2022-7-19 10:37:47

WordpressWP建站

增加B2主题顶部消息铃消息数值,同时取消消息闪烁特效

2022-7-20 20:45:24

{{yiyan[0].hitokoto}}
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索