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

内容占位符

前言

随着我们对HTML和CSS3的学习逐渐深入,相信大家都已经掌握了网页制作的基础知识,包括如何使用HTML标记构建网页结构,以及如何运用CSS样式美化页面。为了进一步巩固和熟练这些技能,今天我们一起来完成一个有趣且实用的项目——内容占位符的设计与实现。

 效果图展示

动态效果,可点击查看

内容占位符

学习目标

本单元主要完成学习目标:

        1.使用css实现三角形效果

        2.如何给元素添加动画

结构分析

任务1:静态效果实现

知识学习

  1. ::before  ::after 介绍

::before  ::after 伪元素用来给元素前面或者后面插入指定内容

  • 使用content属性来指定要插入的内容;
  • 必须配合content属性一起使用,content的属性值可以为空;
  • 伪元素的display属性值默认为inline;
  1. 使用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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/61225.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LC】209. 长度最小的子数组

题目描述&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。找出该数组中满足其总和大于等于 target 的长度最小的 子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 1&#x…

时间和空间复杂程度计算规则

时间复杂度和空间复杂度的计算是算法分析的重要部分。以下是详细的计算方法、示例&#xff0c;以及需要注意的要点。 1. 时间复杂度 时间复杂度描述算法执行所需时间随输入规模增长的增长关系&#xff0c;通常用 大 O O O 表示法 来表示&#xff0c;关注输入规模 n n n 的增…

【YOLOv8】安卓端部署-1-项目介绍

【YOLOv8】安卓端部署-1-项目介绍 1 什么是YOLOv81.1 YOLOv8 的主要特性1.2 YOLOv8分割模型1.2.1 YOLACT实例分割算法之计算掩码1.2.1.1 YOLACT 的掩码原型与最终的掩码的关系1.2.1.2 插值时的目标检测中提取的物体特征1.2.1.3 coefficients&#xff08;系数&#xff09;作用1.…

Hadoop 学习心得

一、引言 &#xff08;一&#xff09;学习 Hadoop 的背景和目的 随着信息技术的飞速发展&#xff0c;数据量呈爆炸式增长&#xff0c;传统的数据处理方式已难以满足需求。在这样的背景下&#xff0c;为了能够在大数据领域有所发展&#xff0c;我开始学习 Hadoop。Hadoop 作为处…

【全面解读】Apache SeaTunnel常见问题全攻略

使用SeaTunnel需要安装Spark或者Flink这样的引擎么&#xff1f; 不需要&#xff0c;SeaTunnel 支持 Zeta、Spark 和 Flink 作为同步引擎的选择&#xff0c;您可以选择之一就行&#xff0c;社区尤其推荐使用 Zeta 这种专为同步场景打造的新一代超高性能同步引擎。Zeta 被社区用…

【build.gradle里的仓库】buildScript、allprojects、根级别中的repositories属性有何区别

build.gradle文件中的buildScript、allprojects、根级别下的repositories属性有何区别&#xff1a; buildScript中的repositories属性&#xff1a; buildscript { repositories {...}dependencies {...} }allprojects中的repositories属性&#xff1a; allprojects { reposi…

Elasticsearch搜索流程及原理详解

Elasticsearch搜索流程及原理详解 1. Elasticsearch概述1.1 简介1.2 核心特性1.3 应用场景2. Elasticsearch搜索流程2.1 搜索请求的发起2.2 查询的执行2.3 结果的聚合与返回3. Elasticsearch原理详解3.1 倒排索引3.2 分布式架构3.3 写入流程3.4 读取流程4. 技术细节与操作流程4…

刘艳兵-DBA046-ASSM表空间的全表扫描范围由哪些因素综合确定?

ASSM表空间的全表扫描范围由哪些因素综合确定&#xff1f; A L1/L2/L3位图块 B 段头块Auxillary Map C 段头块Extent Map D 段头块Highwater 答&#xff1a; B 段头块Auxillary Map C 段头块Extent Map D 段头块Highwater 在 Oracle 数据库中&#xff0c…

ubuntu连接orangepi-zero-2w桌面的几种方法

ubuntu连接orangepi-zero-2w桌面的几种方法 一 &#xff1a; 串口 wifi Nomachine 1 开发板通过串口连接wifi 扫描wifi nmcli dev wifi连接wifi sudo nmcli dev wifi connect wifi_name password wifi_passwd查看开发板IP ifconfig # 假设开发板IP是 192.168.2.32 使用…

STM32完全学习——系统时钟设置

一、时钟框图的解读 首先我们知道STM32在上电初始化之后使用的是内部的HSI未经过分频直接通过SW供给给系统时钟&#xff0c;由于内部HSI存在较大的误差&#xff0c;因此我们在系统完成上电初始化&#xff0c;之后需要将STM32的时钟切换到外部HSE作为系统时钟&#xff0c;那么我…

分布式系统稳定性建设-性能优化篇

分布式系统稳定性建设-性能优化篇 系统稳定性建设是系统工程的核心内容之一。以下是一些重要的方面: 架构设计: 采用模块化、松耦合的架构设计,以提高系统的可扩展性和可维护性。合理划分系统功能模块,降低单个模块的复杂度。定义清晰的接口和数据交换标准,确保各模块之间协调…

生成式语言模型 三范式 预训练、微调、强化反馈学习

ChatGPT 是一种典型的大语言模型&#xff0c;其训练过程可以分为预训练、微调和**强化学习&#xff08;RLHF&#xff09;**这三个主要阶段。以下是对这些阶段的详细讲解&#xff1a; 1. 预训练&#xff08;Pretraining&#xff09; 目标&#xff1a;让模型掌握基本的语言理解与…

【Go实战】:使用AES和RSA加密算法保护关键信息

前言 作为一名开发者&#xff0c;我们在构建安全可靠的应用时&#xff0c;确保接口请求中的关键信息不被泄露是非常重要的。加密与解密技术是实现这一目标的关键手段。本文将详细介绍如何在Golang中使用AES&#xff08;高级加密标准&#xff09;和RSA加密算法来实现数据的加密…

网络学习第四篇

引言&#xff1a; 我们在第三篇的时候出现了错误&#xff0c;我们要就行排错&#xff0c;那么我们要知道一下怎么配置静态路由实现ping通&#xff0c;这样子我们才知道下一跳到底是什么&#xff0c;为什么这样子做。 实验目的 理解和掌握静态路由的基本概念和配置方法。 实…

[控制理论]—位置式PID与增量式PID

位置式PID与增量式PID 1.位置式PID 按模拟PID控制算法&#xff0c;以一系列的采样时刻点kT代表连续时间t&#xff0c;以矩形法数值积分近似代替积分&#xff0c;以一阶后向差分近似代替微分&#xff0c;即&#xff1a; t ≈ k T &#xff08; k 0 , 1 , 2... &#xff09; …

【c++丨STL】list的使用

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C、STL 目录 前言 list简介 一、list的默认成员函数 构造函数(constructor) 析构函数 赋值重载 二、list的迭代器接口 迭代器的功能分类 三、list的容量…

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色,类似材质丢失

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色&#xff0c;类似材质丢失 Addressable Play Mode Script加载模式 选择 Use Existiing Build 1.Unity 切换到 PC 平台&#xff0c;执行 Addressable Build 运行&#xff0c;加载 bundle 内的预制体 显示正常 2.Unit…

单片机学习笔记 6. 数码管动态显示

更多单片机学习笔记&#xff1a;单片机学习笔记 1. 点亮一个LED灯单片机学习笔记 2. LED灯闪烁单片机学习笔记 3. LED灯流水灯单片机学习笔记 4. 蜂鸣器滴~滴~滴~单片机学习笔记 5. 数码管静态显示 目录 0、实现的功能 1、Keil工程 1-1 数码管动态显示 1-2 数组的定义与引用…

车企如何实现安全图纸外发管理

车企面临着日益增长的数据交换需求&#xff0c;尤其是设计图纸等敏感数据的外发管理。如何确保这些数据在传输过程中的安全性和效率&#xff0c;是车企急需解决的问题。我们将从几个关键性的因素上来分析一下怎么实现安全图纸外发管理。 统一管理与授权 采用专业的文件交换系统…

第7章 硬件测试-7.1 硬件调试

第7章 硬件测试 7.1 硬件调试7.1.1 电路检查7.1.2 电源调试7.1.3 时钟调试7.1.4 主芯片及外围小系统调试7.1.5 存储器件和串口外设调试7.1.6 其他功能模块调试 测试是每项成功产品的必经环节。硬件测试是评估产品质量的重要方法&#xff0c;产品质量是公司的信誉和品牌象征&…