文档章节

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

困觉的曼巴er
 困觉的曼巴er
发布于 2016/06/13 17:35
字数 266
阅读 13
收藏 0
点赞 0
评论 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
其它
程序员
8 款别具一格的 jQuery/HTML5 插件

这两年HTML5发展得越来越成熟,许多基于HTML5的应用也日益增多,jQuery又是前段开发利器,jQuery结合HTML5自然能够设计出非常棒的产品,本文介绍8款别具一格的jQuery/HTML5应用插件。 1、HTM...

yykj
2013/11/01
613
0
基于单个 div 的 CSS 绘图

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

justjavac
2014/10/11
463
1
20 个 CSS 高级技巧汇总

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

名字已被取
2016/03/15
120
0
12款超强CSS3应用集锦下载

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

Lunaqi
2017/11/20
0
0
::before和::after伪元素的用法

一、前言 css3为了区分伪类和伪元素,伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元素——::first-letter,::first-line,::before,::after,::...

HarleyZhuge
01/17
1
0
【CSS进阶】伪元素的妙用--单标签之美

最近在研读 《CSS SECRET》(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看)。采用单标签完成各种图...

chokcoco
2016/05/25
0
0
第四代CSS选择器

第四代CSS选择器 第三代选择器得到了浏览器的良好支持,也为我们提供了如nth-child的有用的选择器。第四代选择器为我们提供了诸多方法来定位CSS的内容。 否定伪类:not 否定伪类选择器:not在C...

ybyron
2016/09/02
0
0
一步步打造自己的纯CSS单标签图标库

图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互、引导以及网页装饰等充当的角色作用举足轻重。由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素...

深海鱼在掘金
2017/11/28
0
0
端程序员入门所要学习的16个知识点

1、HTML常用标签 语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用标签、超链接(a标签)、Img图片标签 2、盒子模型 初探Div盒子模型 、css样式、 简单css样式、盒...

急速奔跑中的蜗牛
06/07
0
0
简单返回顶部代码及注释说明

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 返回顶部 方法二:操作scrooll函数用...

lovethe51cto
2015/08/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部