1.父子元素悬停特效
由于伪元素属于其父元素,因此存在一些不寻常的用例
设计的时候有一个Section Title 在他的左边有一个浅蓝的小圆圆,将鼠标悬停在Section Title上,圆圈变大
参考代码
.section-title:before {
content: "";
width: 20px;
height: 20px;
background: blue;
/* Other styles */
}
.section-title:hover:before {
transform: scale(1.2);
}
2.制作缩略图
HTML
<section class="hero">
<p>Hello, my name is Ahmad. I’m a UX Designer and Front End Developer that enjoys the intersection between design and code. I write on <a href="www.ishadeed.com" class="link-1">ishadeed.com</a> and <a href="www.a11ymatters.com" class="link-2">a11ymatters.com</a> on CSS, UX Design and Web Accessibility.</p>
</section>
1.向hero元素添加padding
为伪元素保留空间，所以添加padding
2.对伪元素进行绝对定位
为了绝对定位它们，我需要定义哪个父类是相对的父类。它应该被添加到hero中 。
.hero部分中的position: relative是影响伪元素的。
3.添加伪元素
最后一步是添加伪元素及其悬停效果：
.link-1 {
color: #854FBB;
}
@media (min-width: 700px) {
.link-1:after {
content: "";
position: absolute;
right: 0;
top: 20px;
width: 150px;
height: 100px;
background: currentColor;
opacity: 0.85;
transition: 0.3s ease-out;
}
.link-1:hover {
text-decoration: underline;
}
.link-1:hover:after {
transform: scale(1.2);
opacity: 1;
}
}
使用了currentColor作为伪元素背景色。如果你不知道这个关键字，它表示继承其父元素的color值。所以在任何时候，我想要改变链接的颜色，只改变一次是很容易的。
3.增加可点击区域的大小
通过向链接添加一个伪元素，链接周围的可点击区域将变得更大。这是非常有用的，将增强用户的体验。
4.叠加层
类似背景图像的元素,上层有一个渐变的叠加层
.hero {
position: relative;
height: 300px;
background: url("image.jpg") center/cover;
}
.hero:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(180deg, #851717 0%, #30328C 100%);
mix-blend-mode: color;
}
5.包裹的阴影
image.png
创建div
<div class="elem"></div>
body{
width: 100%;
height: 100%;
background-color: #eee;
}
.elem {
position: relative;
display: flex;
align-items: center;
max-width: 400px;
background: #fff;
padding: 2rem 1rem;
font-size: 1.5rem;
margin: 2rem auto;
text-align: center;
box-sizing: border-box;
}
添加伪类元素
为每个元素添加:before和:after伪元素 ,其宽度为50%
.elem:before,
.elem:after {
content: "";
position: absolute;
top: 2px;
width: 50%;
height: 100%;
}
.elem:before {
left: 0;
background: grey;
}
.elem:after {
right: 0;
background: #000;
}
添加transform: skew(x)，其中X为2度。对于其中之一，X应该为负数以实现所需的效果。
image.png
源码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="elem"></div>
</body>
<script type="text/javascript">
</script>
<style>
body{
width: 100%;
height: 100%;
background-color: #eee;
}
.elem {
position: relative;
display: flex;
align-items: center;
max-width: 400px;
background: #fff;
padding: 2rem 1rem;
font-size: 1.5rem;
margin: 2rem auto;
text-align: center;
box-sizing: border-box;
}
.elem:before,
.elem:after {
content: "";
position: absolute;
top: 2px;
width: 50%;
height: 100%;
z-index: -1;
background: linear-gradient(to bottom,transparent,#000);
filter: blur(3px);
opacity: 0.3;
}
.elem:before {
left: 0;
transform: skewY(-2deg);
/*background: grey;*/
}
.elem:after {
right: 0;
transform: skewY(2deg);
/*background: #000;*/
}
</style>
</html>
另一种方式
另一种选择，即在伪元素:before和:after之间交换skewY值。
网友评论