潍坊网站建设优化一键免费搭建手机网站
内容占位符
前言
随着我们对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>