目录
1. 梯形方块:
梯形分为长方形和白色三角形
i标签通过设置border 出现三角形形状
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.price {
width: 160px;
height: 24px;
margin: 0 auto;
border: 1px solid red;
text-align: center;
line-height: 24px;
}
.miaosha {
position: relative;
float: left;
width: 80px;
height: 24px;
background-color: red;
color: white;
}
/* 通过设置border 出现三角形形状 */
.miaosha i {
position: absolute;
width: 0;
right: 0;
height: 0;
border-color: transparent white transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.del {
color: gray;
font-size: 14px;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="price">
<div class="miaosha">
¥189
<i></i>
</div>
<div class="del">
¥18999
</div>
</div>
</body>
</html>
2. 遮罩层
一般用的遮罩层是用一个div标签通过hover实现
此处使用::before实现,减少网页标签使用,提高代码质量
效果都是相同的,如图
未优化代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hask {
position: relative;
width: 200px;
height: 200px;
margin: 30px auto;
}
.box {
padding: 10px;
width: 200px;
height: 200px;
background-color: skyblue;
}
.shade {
padding: 10px;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(36, 36, 36, 0.5);
}
.hask:hover .shade{
display: block;
}
</style>
</head>
<body>
<div class="hask">
<div class="box">真正的爱,不是单纯的给予,还包括适当的拒绝,及时的赞美,得体的批评,恰当的争论,必要的鼓励和有效的监督。</div>
<div class="shade"></div>
</div>
</body>
</html>
优化后代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
margin: 30px auto;
position: relative;
padding: 10px;
width: 200px;
height: 200px;
background-color: skyblue;
}
/* ::before 伪元素选择器必须加content,实现遮罩层 */
.box::before {
content: '';
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(36, 36, 36, 0.5);
}
.box:hover::before{
display: block;
}
</style>
</head>
<body>
<div class="box">真正的爱,不是单纯的给予,还包括适当的拒绝,及时的赞美,得体的批评,恰当的争论,必要的鼓励和有效的监督。</div>
</body>
</html>
3.地图上的光晕圆圈
主要是给光晕加从小到大的动画, 需要加三个盒子分别做光晕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.map {
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
margin: 100px auto;
}
.city {
position: absolute;
top: 50%;
left: 50%;
}
.dotted {
width: 8px;
height: 8px;
background: #09f;
border-radius: 50%;
}
/* 属性选择器, ^= 匹配class前几个字符 */
.city div[class^="pulse"]{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow: 0 0 12px #09f;
animation: pulse 1.2s linear infinite;
}
/* 延时 pulse2 pulse3 使三个 pulse 盒子分开,形成晕 */
.pulse2 {
animation-delay: 0.4s !important;
}
.pulse3 {
animation-delay: 0.8s !important;
}
@keyframes pulse {
0% {}
70% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html>
4.css写凸起凹陷(阴刻阳刻文字)
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文字效果</title>
<style>
body {
background-color: #ccc;
font: 700 90px '楷体';
color: #ccc;
}
div:first-child {
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-of-type {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div>凸起文字</div>
<div>凹陷文字</div>
</body>
</html>