css结合伪元素before,after制作网页返回顶部的图标
css结合伪元素before,after制作网页返回顶部的图标
困觉的曼巴er 发表于2年前
css结合伪元素before,after制作网页返回顶部的图标
  • 发表于 2年前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

效果:

html中:

<a id="top" style="opacity: 1; display: block;">
	<span id="pre" class="pre"></span>
</a>

css样式:

​#top {
    position: fixed;
    display: block;
    right: 20%;
    bottom: 0px;
    cursor: pointer;
    width: 55px;
    height: 55px;
    background-color: #C1C1C1;
    border-radius: 5px;
    z-index: 100;
}

#pre {
    position: relative;
    top: 30px;
    left: 15px;
}

#pre:before {
    border-bottom-color: #FFFFFF;
    top: -21px;
}

#pre:after, #pre:before {
    border: 10px solid transparent;
    border-bottom: 10px solid #C1C1C1;
    width: 0;
    height: 0;
    position: absolute;
    content: ' ';
    top: -18px;
}
​
  1. 首先id=pre的元素设置为相对定位,则两个伪元素设置为绝对定位后,使它们的top等属性就相对pre元素起作用。
  2. 给伪元素设置边框,除了底边其他的边框都为透明,这样可以得到向上的三角形。
  3. 通过设置before,after的top不同,让它们上下有个错位的效果,然后将before的底边框颜色设为白色,after的底边框设为a标签的背景色,相当于after元素遮盖了before的部分底边框,我们看到的就是before和after的top相差的像素,然后效果就出来了。
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 25
码字总数 12169
×
困觉的曼巴er
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: