首页 > 其他分享 >Ripro主题美化-列表页面右上角3个彩色圆点效果实现

Ripro主题美化-列表页面右上角3个彩色圆点效果实现

时间:2022-12-16 15:05:22浏览次数:51  
标签:右上角 圆点 ease transition height 8px Ripro 0.25 out

Ripro主题美化-列表页面右上角3个彩色圆点效果实现

列表页面右上角有3个彩色圆点效果,模仿友站的!分享给大家~
1、找到wp-content/themes/ripro/assets/css/diy.css并将下面的css样式内容整体复制进去并保存

.float-rightse {
float: right;
position: absolute;
right: 30px;
}
.title-iconse {
height: 8px;
width: 8px;
background: #fd4b4b;
padding: 0px;
display: inline-block;
border-radius: 50%;
line-height: 0;
position: relative;
-webkit-transition: ease-in-out 0.25s;
transition: ease-in-out 0.25s;
margin: 0 10px;
}
.title-iconse:before {
content: ” “;
height: 8px;
width: 8px;
background: #ffd12a;
border-radius: 50%;
margin-left: 15px;
position: absolute;
display: block;
-webkit-transition: ease-in-out 0.25s;
transition: ease-in-out 0.25s;
}
.title-iconse:after {
content: ” “;
height: 8px;
width: 8px;
background: #79f52a;
border-radius: 50%;
margin-left: 30px;
position: absolute;
display: block;
-webkit-transition: ease-in-out 0.25s;
transition: ease-in-out 0.25s;
}

2、找到/wp-content/themes/ripro/inc/theme-functions.php并搜索

entry-meta

可以看到以下代码

3、并将下面的内容整体复制进去放在最后面的</span>后面并保存

<i class="title-iconse float-rightse"></i>

效果样式

Ripro主题美化-列表页面右上角3个彩色圆点效果实现_css样式


资源宝分享:www.httple.net

标签:右上角,圆点,ease,transition,height,8px,Ripro,0.25,out
From: https://blog.51cto.com/yunbk/5947465

相关文章