键代码分析：

/*css代码*/

.effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }

css3 伪元素 ::before ::after的更多相关文章

  1. 使用 CSS3 伪元素实现立体的照片堆叠效

    CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果.例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣 ...

  2. 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果

    利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...

  3. css3 伪元素和伪类选择器详解

    转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...

  4. 基于CSS3伪元素和动画绘制旋转太极图

    通过CSS3的动画知识来完成一个旋转的太极. 任务 1.创建一个div,用CSS控制其大小.边框.位置等,做成一个静态的圆形,一半为红色一半为白色. 2.用div的伪元素位置两个圆环并放置核实位置,使 ...

  5. CSS3伪元素、伪类选择器

    伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...

  6. Css3 伪元素

    伪元素---用于向某些选择器设置特殊的效果 语法:元素::伪元素 (element::pseudo-element) 兼容性:IE9+ FireFox4+ Chrome Safari Opera fi ...

  7. CSS3伪元素 ::first-letter ::first-line ::selection

    首先,关于伪元素的语法: 有的时候单冒号也能用,但最好写双冒号. 伪类:匹配的是元素(不同状态或结构的). 伪元素:匹配的是元素中的一部分内容(首字符,首行文本). ::first-letter 匹配 ...

  8. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  9. css3的伪（伪类和伪元素）大合集

    本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属 ...

随机推荐

  1. 基于STM32F103ZET6 HC_SR501人体红外感应

    这是最后的实验现象,有人走过会一直输出有人,离开范围时则输出没人 开发板 PZ6086L ,HC_SR501模块 这是HC_SR501的示意图,,VCC和GND不再多做介绍,5V供电就行, OUT接口 ...

  2. 【转载++】fopen返回0（空指针NULL）且GetLastError是0

    结论来看,是一个简单又朴素的道理——打开文件句柄用完了得给关上.表现在现象上却是着实让人费解,以至于有人还怀疑起了微软的Winodws系统来了,可笑至极.还是那句话,先把自己的屁股先给擦干净喽再怀疑别 ...

  3. windows server dump文件

    1. mini dump: ***** 需要包含 dbghelp.dll 库 ****mini_dump.h文件: // reference:https://msdn.microsoft.com/zh ...

  4. GD32F20x系列使用问题总结

    GD单片机近几年越来越火了,既有他自身相比与ST的价格优势,也有支持国货的信仰加成.然而一个新的东西,或者说一个相对较新的东西,在使用的友好性和资料的完整性方面还有很长的路要走. 现将个人使用过程中碰 ...

  5. 记账APP（4）

    依旧是一个表格类型的增删改查,但是呢,在用节点做,有点懵,明天加油

  6. 20155233 2006-2007-2 《Java程序设计》第2周学习总结

    20155233 2006-2007-2 <Java程序设计>第2周学习总结 教材学习内容总结 本章主要学习Java的基础语法,这些语法在C语言的学习中基本上都涉及到过,基本上,Java可 ...

  7. 20155239 《Java程序设计》实验三（敏捷开发与XP实践）实验报告

    实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 学会使用git 学会代码的重构 实现团队合作 团队分工 20155239:按照老师的实验三教程,逐步实验,编写代码,并用git上传,下载团 ...

  8. 资源很多，你却不会使用——以不变应万变才是自学Java的正确方法

    鄙人乐于寻找学习方法,在这里提出自己的见解,希望可以帮助想玩好Java而又感觉很难上手的同学对Java不再恐惧 现状 我们的同学们除了某月,某婷等等大神以外,想必仍然存在着一大批同学根本没有摸索到学习 ...

  9. 20155310 2016-2017-2 《Java程序设计》第一周学习总结

    20155310 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 通过对第一章第二章的学习我了解到了JVM.JRE与JDK的重要性,并且下载.安装并测试了JD ...

  10. 20155321 《Java程序设计》实验五 网络编程与安全

    实验内容 两人一组结对编程: 参考http://www.cnblogs.com/rocedu/p/6766748.html#SECDSA 结对实现中缀表达式转后缀表达式的功能 MyBC.java 结对 ...