昔洛 的个人博客

Bug不空,誓不成佛

目录
记录我的黑马前端学习经历----第十一天
/        

记录我的黑马前端学习经历----第十一天

学习内容

  • 盒子边框样式的使用技巧——三角形
  • CSS3特效之过度属性

1、三角形

盒子的边框应用属性非常多,能画圆,画框,画三角等,仔细观察盒子的四条边框可以发现其实四条边框的连接数是一条平滑的斜线,那么利用这个属性可以画出你想要的三角形,其边框示例效果如下:

<style>
	.t1 {
		width: 50px;
		height: 50px;
		border-width: 20px 20px 20px 20px;
		border-style: solid;
		border-color: red green blue pink;
	}
</style>
<body>
	<div class="t1" >
	</div>
</body>
可以看出盒子的方框交接点是由平滑斜线连接的,每条边框并不是真正的直线,那么将盒子的宽高都设置成 0 结果如下:
<style>
	.t2 {
		width: 0px;
		height: 0px;
		border-width: 50px 50px 50px 50px;
		border-style: solid;
		border-color: red green blue pink;
	}
</style>
<body>
	<div class="t2" >
	</div>
</body>
此时四条边框就呈现出四个三角形的对顶状态,将另外三个三角形设置成透明就会剩下一个三角形的样子了,保留蓝色,效果如下:
<style>
	.t3 {
		width: 0px;
		height: 0px;
		border-width: 50px 50px 50px 50px;
		border-style: solid;
		border-color: transparent transparent blue transparent;
	}
</style>
<body>
	<div class="t3" >
	</div>
</body>
此时其他三个边框的三角形虽然隐藏了但是还占据着位置高度,那么此时只需要将想保留的额三角形的对顶边框宽度设置为0 就可以取消多余的位置了,从而可以获取任意方向的三角形:
<style>
	.t4 {
		width: 0px;
		height: 0px;
		border-width: 0px 50px 50px 50px;
		border-style: solid;
		border-color: transparent transparent blue transparent;
	}
</style>
<body>
	<div class="t4" >
	</div>
</body>

带边框的三角形
由于不能给已经三角形化的盒子再设置边框的,那么只能用定位和覆盖来让一个小的三角形盖到大的三角形上面形成一个带边框的三角形了,为了减少标签的使用那么就是用伪元素::after来完成,示例如下:

<style>
	.t5 {
		width: 0px;
		height: 0px;
		border-width: 0px 50px 50px 50px;
		border-style: solid;
		border-color: transparent transparent yellow transparent;
		position: relative;
	}
	.t5:after {
		content: "";
		display: inline-block;
		width: 0px;
		height: 0px;
		border-width: 0px 44px 44px 44px;
		border-style: solid;
		border-color: transparent transparent red transparent;
		position: relative;
		top: 3px;
		left: -44px;
	}
</style>
<body>
	<div class="t5" >
	</div>
</body>
需要注意的是,根据子绝父相的定位规则,子元素绝对定位后会以已经设置相对定位的父元素的 padding 区,由于宽高和 padding 都为0 而边框又不占 padding 区,所以初识默认定位的话会三角形的定点会与父元素顶点对齐,而左边会有一半的边框宽度重叠到父元素的右边框上,因此要想让小的三角移动到父三角的中心需要把子三角的定点向下移动两个三角形高度之差,再向左边移动三角形一半的距离即一个边框的距离。

2、CSS3 属性过渡(transition)

  • transition-property 需要过渡的属性,默认 all,可添加自定义过渡属性如 width,height,border-radius,color 等
  • transition-delay 过渡的延迟时间,即动画变换的延迟时间
  • transition-duration 过渡的时间,即完成过渡动画的时间
  • transition-timing-function 时间曲线默认为 ease(逐渐慢下来),linear(匀速),ease-in(加速),ease-out(减速),ease-in-out(先加速后减速)
  • transition 属性连写,最重要的一点是过渡时间属性必须要写,其他的都是默认,值得一提的是 延迟时间默认为 0;
  • 要想实现过渡特效需要设置条件出发,比如:hover,:active等
    下面写几个过渡效果:

过渡效果1

鼠标放到我身上!!!
<style>
	.t6 {
		width: 100px;
		height: 100px;
		font-size: 12px;
		line-height: 100px;
		background-color: red;
		transition: 3s;
	}
	.t6:hover {
		border-radius: 50%;
		margin-left: 100px;
		background-color: green;
		color: blue;
	}
</style>
<body>
	<div class="t6">
		鼠标放到我身上!!!
	</div>
</body>

过渡效果2

鼠标放到我身上!!!
<style>
	.t7 {
		width: 100px;
		height: 100px;
		background: url(https://jiangck.com/favicon.ico) no-repeat center;
		border-radius: 50%;
		transition: 1s;
	}
	.t7:hover {
		transform: rotate(180deg);
	}
</style>
<body>
	<div class="t7">
		鼠标放到我身上!!!
	</div>
</body>
(゚д゚)σ弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌⊃
评论
歌名 - 歌手
0:00