文档章节

css结合伪元素before,after制作网页返回顶部的图标

困觉的曼巴er
 困觉的曼巴er
发布于 2016/06/13 17:35
字数 266
阅读 22
收藏 0

效果:

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相差的像素,然后效果就出来了。

© 著作权归作者所有

共有 人打赏支持
困觉的曼巴er
粉丝 1
博文 25
码字总数 12169
作品 0
其它
程序员
私信 提问
不定期更新的CSS奇淫技巧(二)

拖更很久,各位小哥哥、小姐姐别介意,今天本来会死在襁褓(草稿待了一个月)中的 不定期更新的CSS奇淫技巧(二)终于出来了,本文可能会水份居多,如有问题欢迎提议我会逐步榨干它 七、CSS...

小小茂茂
08/08
0
0
20 个 CSS 高级技巧汇总

黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filte...

名字已被取
2016/03/15
120
0
CSS篇-CSS小技巧与注意手记(四)

一 : 结构伪类选择器 选出第一个与最后一个元素令其变色 效果 选出某个元素令其变色 选出偶数元素令其变色 选出奇数元素令其变色 从后往前数选出某一个元素 二 : 属性选择器 选出所有带有属性...

TianTianBaby223
09/02
0
0
基于单个 div 的 CSS 绘图

原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 绘图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合!赞作者的这句话:Restricting your availabl...

justjavac
2014/10/11
491
1
12款超强CSS3应用集锦下载

CSS3非常强大,它可以渲染很多你意想不到的特效,而且目前浏览器对CSS3的支持也逐渐放开了,所以利用CSS3可以制作一些即美观又实用的网页应用,下面12款CSS3应用集锦分享给大家,有源代码下载...

Lunaqi
2017/11/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开源 java CMS - FreeCMS2.8会员我的评论

项目地址:http://www.freeteam.cn/ 我的评论 从左侧管理菜单点击我的评论进入。在这里可以查看当前登录会员的所有评论记录。 删除评论 选择评论然后点击删除按钮可以完成删除操作。 为了防止...

freeteam
31分钟前
1
0
Eureka Server启用 https服务指北

文章共 591字,阅读大约需要 2分钟 ! 概 述 在我的前文《Eureka Server 开启Spring Security Basic认证》中已经给 Eureka Server 开启了最基本的鉴权措施,本文则让 HTTPS加持于 Eureka Ser...

CodeSheep
今天
17
0
OSChina 周二乱弹 —— 其实我在地板也睡不着

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @witt-z :分享歌词: 阴天 在不开灯的房间,当所有思绪都一点一点沉淀。 分享莫文蔚的单曲《阴天》: 《阴天》- 莫文蔚 手机党少年们想听歌,...

小小编辑
今天
813
12
微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
5
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部