内容占位符：Kinetic Loader HTML+CSS 使用CSS制作三角形原理
内容占位符
前言
随着我们对HTML和CSS3的学习逐渐深入，相信大家都已经掌握了网页制作的基础知识，包括如何使用HTML标记构建网页结构，以及如何运用CSS样式美化页面。为了进一步巩固和熟练这些技能，今天我们一起来完成一个有趣且实用的项目——内容占位符的设计与实现。
效果图展示
动态效果，可点击查看
内容占位符
学习目标
本单元主要完成学习目标：
1.使用css实现三角形效果
2.如何给元素添加动画
结构分析
任务1：静态效果实现
知识学习
- ::before ::after 介绍
::before ::after 伪元素用来给元素前面或者后面插入指定内容
- 使用content属性来指定要插入的内容；
- 必须配合content属性一起使用，content的属性值可以为空；
- 伪元素的display属性值默认为inline；
- 使用css制作三角形原理
我们制作三角其实是利用边框（border） 属性来进行制作，大多数时候我们都是单纯认为边框是一条实线、虚线，点这些，并且平时用的都是同一个颜色这样不好看出来，所以这里我们用四种颜色进行演示
第一步:
background-color: coral;
width: 150px;
height: 150px;
border-left: 5px solid aqua;
border-right: 5px solid rgb(0, 255, 21);
border-top: 5px solid rgb(255, 0, 238);
border-bottom: 5px solid rgb(255, 0, 0);
第二步:
border-left: 100px solid aqua;
border-right: 100px solid rgb(0, 255, 21);
border-top: 100px solid rgb(255, 0, 238);
border-bottom: 100px solid rgb(255, 0, 0);
第三步：
border-left: 150px solid aqua;
border-right: 150px solid rgb(0, 255, 21);
border-top: 150px solid rgb(255, 0, 238);
border-bottom: 150px solid rgb(255, 0, 0);
第四步：
width: 0px;
height: 0px;
border-left: 150px solid aqua;
border-right: 150px solid rgb(0, 255, 21);
border-top: 150px solid rgb(255, 0, 238);
border-bottom: 150px solid rgb(255, 0, 0);
我们可以看到当内部宽度变小时边框不断的向内部扩张，这里可以用极限的思维来进行理解，当宽度为0和高度也为0的情况下：width：0；height：0；也就是说盒子宽高趋近为零时就会变成这个样子。
如何实现三角形效果？
只需要在不需要的边框加一个透明颜色（transparent）就可以了
<style>
.box{
width: 0;
height: 0;
border-left:100px solid pink;
border-bottom:100px solid rgb(192, 255, 193);
border-right:100px solid transparent;
border-top:100px solid transparent;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
效果图：
任务实施
<style>
.bigBox {
position: relative; //给三角形盒子进行相对定位
left:45%; //让元素处于页面宽度大约45%的位置
top: 350px;
width: 90px;
height: 90px;
}
.bigBox::after,
.bigBox::before {
content: '';
/*content: '';：这是必需的，因为伪元素必须有内容才能显示。 */
position: absolute;
border: 50px solid transparent;
border-bottom-color: #fff;
}
.bigBox::before {
transform: rotate(90deg); //将第一个写完的三角形旋转90度，让两个三角形拼接成一个大的直角三角形
</style>
</head>
<body>
<div class="bigBox"> </div>
</body>
效果展示
任务2：动态旋转效果实现
知识学习
@keyframes 的使用
- @keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
- 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
- 指定至少这两个 CSS3 的动画属性绑定向一个选择器
animation 属性
- 创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现
任务实施
@keyframes rotateA {
0%,25% {
transform: rotate(0deg);
}
50%,75% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotateB {
0%,25% {
transform: rotate(90deg);
}
50%,75% {
transform: rotate(270deg);
}
100% {
transform: rotate(450deg);
}
}
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容占位符</title>
<style>
body {
background-color: rgb(4, 4, 59);
}
.bigBox {
position: relative;
left:45%;
top: 350px;
width: 90px;
height: 90px;
}
.bigBox::after,
.bigBox::before {
content: '';
position: absolute;
border: 50px solid transparent;
border-bottom-color: #fff;
animation: rotateA 2s linear infinite 0.5s;
}
.bigBox::before {
transform: rotate(90deg);
animation: rotateB 2s linear infinite;
}
@keyframes rotateA {
0%,25% {
transform: rotate(0deg);
}
50%,75% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotateB {
0%,25% {
transform: rotate(90deg);
}
50%,75% {
transform: rotate(270deg);
}
100% {
transform: rotate(450deg);
}
}
</style>
</head>
<body>
<div class="bigBox"> </div>
</body>
</html>