当前位置：首页 > news >正文

内容占位符：Kinetic Loader HTML+CSS 使用CSS制作三角形原理

news 文章来源：https://blog.csdn.net/2401_86036532/article/details/143789141 2025/5/9 19:47:07

内容占位符

前言

随着我们对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>