学前端半个月的一些心得（五）

最新推荐文章于 2021-08-15 23:45:07 发布

piaopiao_客

最新推荐文章于 2021-08-15 23:45:07 发布

阅读量310

点赞数

文章标签：阴影时间过渡三角形的制作

本文链接：https://blog.csdn.net/D_debag/article/details/76343866

版权

盒子阴影：box-shadow：5px 10px 20px 5px #000；
第一个值：x轴阴影偏移（正数右移，负数左移）
第二个值：y轴阴影偏移（正数下移，负数上移）
第三个值：羽化（值越大看起来越模糊，越小越实）
第四个值：阴影的大小；
也可以最后加上inset，加上则为内阴影。

时间过渡：transition：all 3x；
第一个值：什么元素或属性
第二个值：过渡的时间
使用条件：实行必须存在明显意义的值
必须占有空间

常用的种三角形做法：
淘宝三角形：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
}
.one{
width: 0;
height: 0;
border: 50px solid #ccc;
border-color: transparent transparent transparent #ccc;
}
.one:hover{
position:absolute;
top:25px;
left: -25px;
border-color:#ccc transparent transparent transparent;
}
</style>
</head>
<body>
<div>
<div class="one"></div>
</div>
</body>
</html>

京东三角形：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
div{
width: 0;
height: 0;
border: 30px solid pink;
border-color:transparent transparent transparent pink;
position: relative;
}
div::after{
content: "";
display: block;
width: 0;
height: 0;
border: 30px solid #000;
border-color:transparent transparent transparent #fff;
position:absolute;
top:-30px;
left:-42px;
}
</style>
</head>
<body>
<div id="">

</div>
</body>
</html>

易迅三角形：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;

}
div{
width: 50px;
height: 50px;
border: 1px solid transparent;
position:relative;
overflow: hidden;
}
p{
font-size: 30px;
position: absolute;
top:-21px;
left:15px;
}
</style>
</head>
<body>
<div>
<p>◇</p>
</div>
</body>
</html>