黑马程序员技术交流社区

标题: 【广州前端】- css3伪类使用技巧和运用（二） [打印本页]

---

作者: coral菜菜    时间: 2018-8-12 17:21
标题: 【广州前端】- css3伪类使用技巧和运用（二）


1、伪元素实现带角度的底部边界（倾斜的边界）原理：修改webkit-transform: skewY属性来修改倾斜度（旋转也是一样的道理）


.edge--bottom {    position: relative;    z-index: 1;}.edge--bottom:after {    background: inherit;    content: '';    display: block;    height: 50%;    left: 0;    position: absolute;    right: 0;    z-index: -1;}.edge--bottom:after {    bottom: 0;    -webkit-transform: skewY(-1.5deg);    -ms-transform: skewY(-1.5deg);    transform: skewY(-1.5deg);    -webkit-transform-origin: 100%;    -ms-transform-origin: 100%;    transform-origin: 100%;}



2、伪元素和平移（translate）变换实现的提示框
<div class="row">        <a rel="nofollow" rel="noreferrer" href="#" class="btn tooltip top">            <span>TOOLTIP TOP</span>            <span class="tooltip-content">Lorem ipsum dolor sit amet</span>        </a>    </div>



.tooltip .tooltip-content::after {    background: #05a8ff;    content: "";    height: 10px;    position: absolute;    -webkit-transform: rotate(45deg);    transform: rotate(45deg);    width: 10px;}.tooltip.top .tooltip-content {    bottom: calc(100% + 1.5em);    left: 50%;    -webkit-transform: translateX(-50%);    transform: translateX(-50%);}.tooltip.top .tooltip-content::after {    bottom: -5px;    left: 50%;    margin-left: -5px;}



3、CSS3 伪元素构建的文章水印背景
h1 {    position: relative;    margin: 0;    font-weight: bold;    letter-spacing: -0.05rem;    line-height: 1;    text-transform: uppercase;    z-index: 10;}h1:before {    content: "2018/08";    font-family: monospace;    font-size: 10rem;    position: absolute;    top: 2rem;    left: -2rem;    z-index: 0;    line-height: 1;    color: rgba(50, 25, 0, 0.1)}

点击查看更多精彩前端资源

点击有惊喜

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2