html创建等边三角形,CSS3 等边三角形组成星形图案

最新推荐文章于 2022-12-01 22:06:20 发布
最新推荐文章于 2022-12-01 22:06:20 发布
阅读量373 收藏
点赞数
文章标签： html创建等边三角形
这篇博客介绍了如何使用CSS创建一个旋转的六边形，并结合XOR三角形，形成类似XOR门的视觉效果。通过设置不同动画和混合模式，实现了元素的动态变化和交互。主要涉及CSS布局、动画、背景和颜色、transform属性以及过渡效果。
摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

}

body {

background: #eeefee;

font-size: 150px;

overflow: hidden;

}

.triangle {

position: relative;

width: 0.86603em;

height: 1em;

margin-top: -0.5em;

overflow: hidden;

transform-origin: left center;

}

.triangle::after {

content: '';

display: block;

position: absolute;

top: 0;

left: -0.5em;

width: 1em;

height: 1em;

background: currentColor;

transform: scaleY(0.57735) rotate(45deg) scale(1.22474);

}

@keyframes globalRot {

from {

transform: rotate(30deg) scale(0.33333);

}

to {

transform: rotate(90deg) scale(1);

}

}

.container {

position: absolute;

top: 50%;

left: 50%;

width: 5em;

height: 5em;

margin: -2.5em 0 0 -2.5em;

background: #eeefee;

animation: globalRot 3s linear infinite;

}

.xor .triangle {

position: absolute;

top: 50%;

left: 50%;

mix-blend-mode: difference;

color: #fff;

}

@keyframes xorTri1 {

from, 44% {

opacity: 0;

transform: rotate(0deg) translateX(0.86603em);

}

45% {

opacity: 1;

}

46% {

transform: rotate(0deg) translateX(0.86603em);

}

95%,

to {

opacity: 1;

transform: rotate(0deg) translateX(-0.28868em);

}

}

.xor .triangle:nth-child(1) {

animation: xorTri1 3s infinite;

}

@keyframes xorTri2 {

from, 44% {

opacity: 0;

transform: rotate(180deg) translateX(0.86603em);

}

45% {

opacity: 1;

}

46% {

transform: rotate(180deg) translateX(0.86603em);

}

95%,

to {

opacity: 1;

transform: rotate(180deg) translateX(-0.28868em);

}

}

.xor .triangle:nth-child(2) {

animation: xorTri2 3s infinite;

}

.six {

position: absolute;

top: 50%;

left: 50%;

width: 0;

height: 0;

animation: six 3s linear infinite;

}

@keyframes six {

from, 45% {

opacity: 1;

}

46%,

to {

opacity: 0;

}

}

.six .triangle {

position: absolute;

top: 50%;

left: 50%;

color: #111011;

}

.six .triangle:nth-child(1) {

animation: sixTri1 3s infinite;

}

@keyframes sixTri1 {

from, 0% {

transform: rotate(60deg) translateX(0.86603em) translateX(33%) rotate(0) scale(1) translateX(-33%);

}

44%,

to {

transform: rotate(60deg) translateX(0.86603em) translateX(33%) rotate(-120deg) scale(0) translateX(-33%);

}

}

.six .triangle:nth-child(2) {

animation: sixTri2 3s infinite;

}

@keyframes sixTri2 {

from, 0% {

transform: rotate(120deg) translateX(0.86603em) translateX(33%) rotate(0) scale(1) translateX(-33%);

}

44%,

to {

transform: rotate(120deg) translateX(0.86603em) translateX(33%) rotate(-120deg) scale(0) translateX(-33%);

}

}

.six .triangle:nth-child(3) {

animation: sixTri3 3s infinite;

}

@keyframes sixTri3 {

from, 0% {

transform: rotate(180deg) translateX(0.86603em) translateX(33%) rotate(0) scale(1) translateX(-33%);

}

44%,

to {

transform: rotate(180deg) translateX(0.86603em) translateX(33%) rotate(-120deg) scale(1) translateX(-33%);

}

}

.six .triangle:nth-child(4) {

animation: sixTri4 3s infinite;

}

@keyframes sixTri4 {

from, 0% {

transform: rotate(240deg) translateX(0.86603em) translateX(33%) rotate(0) scale(1) translateX(-33%);

}

44%,

to {

transform: rotate(240deg) translateX(0.86603em) translateX(33%) rotate(-120deg) scale(0) translateX(-33%);

}

}

.six .triangle:nth-child(5) {

animation: sixTri5 3s infinite;

}

@keyframes sixTri5 {

from, 0% {

transform: rotate(300deg) translateX(0.86603em) translateX(33%) rotate(0) scale(1) translateX(-33%);

}

44%,

to {

transform: rotate(300deg) translateX(0.86603em) translateX(33%) rotate(-120deg) scale(0) translateX(-33%);

}

}

.six .triangle:nth-child(6) {

animation: sixTri6 3s infinite;

}

@keyframes sixTri6 {

from, 0% {

transform: rotate(360deg) translateX(0.86603em) translateX(33%) rotate(0) scale(1) translateX(-33%);

}

44%,

to {

transform: rotate(360deg) translateX(0.86603em) translateX(33%) rotate(120deg) scale(1) translateX(-33%);

}

}

弗洛伊德人永不倒
关注
CSS画出各种三角形如等边三角形
09-25
下面的代码将演示三角形如何产生的以及等边三角形画法，喜欢css的朋友可以参考下，希望对大家学习css有所帮助
css3 写等边三角形（非border）
taotaomin99的博客
05-16 2569
非border实现等边三角形
html创建等边三角形,HTML5实践：等边三角形
weixin_42121905的博客
06-07 652
#pyramid { position: relative; margin: 100px auto; height: 500px; width: 100px; } #pyramid > div { position: absolute; border-style: solid; border-width: 200px 0 200px 346px; } #pyramid > div:after {...
html画等边三角形,CSS做等边三角形
weixin_36316102的博客
06-05 746
这里我列举地开级还思层似未屏别。域一插式近址发应是的两种方法：一种用边框也就是border实现(比较简单)另一种是用五个div旋转溢出隐分浏代刚的学过互解久点维数数请曾房总题屏断果如以气。泉公一实切式时带近享览码开时会进。,后，护据一求相藏实现一、用bor遇新是直朋能到分览der在我们平持发秀事应差互过来商类如处。，到图近就这常使用边框的时候往往是一个很窄的边框，所以在视觉效果上边框看似为直线，事...
html画等边三角形,CSS画出各种三角形如等边三角形
weixin_36301296的博客
06-05 341
下面的代码将演示三角形如何产生HTML复制代码代码如下:LESS复制代码代码如下:.triangles {border: 50px solid transparent;border-top-color: #0075a9;border-right-color: #a89a00;border-bottom-color: #19a800;border-left-color: #a90000;width:...
python输出星号等腰三角形_python打印直角三角形与等腰三角形实例代码
weixin_39644139的博客
11-25 4735
python打印直角三角形与等腰三角形实例代码前言本文通过示例给大家详细介绍了关于python打印三角形的相关，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧1、直角三角形#i控制行数j控制*的个数for i in range(5):i += 1for j in range(i):print('*', end='')#end=‘'输出空格print()/2、等腰三角形row = i...
使用CSS实现椭圆，三角形，五角星等图形
左岸
08-20 1261
使用CSS实现椭圆，三角形，五角星等图形
CSS3利用圆角边框属性制作图案下篇
Shmily_ox的博客
03-22 359
CSS3变形transform属性 上篇文章分享了使用圆角边框属性制作饼环和四边不同色的正方形，今天分享加上CSS3的`变形 transform属性`做一个由八个同色的三角形组成的正方形。 CSS3动画相关的第二个属性就是transform,翻译成中文是“改变，使…变彩;转换”，CSS3 transform属性允许我们对元素进行旋转、缩放、移动或倾斜，向元素应用2D或3D转换。 tanton性的基...
纯CSS代码写出各种不规则的形状图形
weixin_43878963的博客
08-04 2800
做网页设计时经常要用到各种形状的图形，对于规则的图形很简单，但是对于不规则的图形，一般我们都是用图片来切图实现。不过今天新起点博客给大家分享几十种看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。...
只使用一个html元素css绘制各种图形
08-10
这些示例可能包括常见的几何形状，如矩形、圆形、三角形，也可能有更复杂的图形，如星形、心形，甚至一些抽象的图案。通过研究这些示例，开发者可以学习到如何运用CSS的`box-shadow`、`clip-path`、`mask`等高级特性...
html创建等边三角形,HTML5实践：等边三角形-♚付涛纪实阁♚
weixin_29496207的博客
06-07 149
#pyramid { position: relative; margin: 100px auto; height: 500px; width: 100px; } #pyramid > div { position: absolute; border-style: solid; border-width: 200px 0 200px 346px; } #pyramid > div:after {...
CSS实现三角形
striveYan的专栏
06-28 473
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。
html画等边三角形,前台面试：使用CSS画一个等边三角形
weixin_32744285的博客
06-05 387
CSS是前台面试必考的内容，有时候会面试官会出题让你画少量基本图形。由于画图的过程中可以考察很多的CSS知识点。今天我们就和大家详情一个比较难得等边三角形。思路是利使用三个div的边框来拼成一个三角形，只要要调整好左右两个div边框的旋转角度，就可以生成一个等边三角形。能用三个div来实现，也能借助伪类来实现三个div的效果。代码如下：//css.box{border-bottom:1pxs...
css如何绘制一个等边三角形
weixin_42424269的博客
03-27 8490
我们首先绘制出一个一般的三角形，那么代码应该是如此的 <body> <div class="triangle"> </div> </body> .triangle { border-left: 50px solid transparent; border-right: 50px solid transparent; ...
html css 怎么画星形,CSS画各种图形（五角星、吃豆人、太极图等）
weixin_35411443的博客
06-16 396
前言这里说的用css做图形，其实是使用一个html元素，结合它的伪元素::before & ::after(不需要其他额外的非伪元素的html元素)，然后定义样式来生成所需的图形。前面有讲过如何用css绘制箭头，三角形，可以去了解一下CSS绘制三角形和箭头，不用再用图片了这里不是说不可以使用其他的html元素，只是这样的好处是在html方便引入，而不需要每次引入都需要添加大量的html...
HTML,CSS 三角形制作案例（等边三角形 直角三角形）
Mr_wang001的博客
05-07 605
HTML,CSS 三角形制作案例（等边三角形 直角三角形）
用（js+html）实现三角形的打印
IT_zxl001的博客
04-12 5095
代码实现：&lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;三角形&lt;/title&gt; &lt;script type="text/javascript"&gt; var t=prompt("请输入一个整数",&
Html-绘制三角形
最新发布
a451319296的博客
12-01 882
Html-绘制三角形
TopCoder[SRM587 DIV 1]:TriangleXor(550)
weixin_30325971的博客
04-12 174
Problem Statement You are given an intW. There is a rectangle in the XY-plane with corners at (0, 0), (0, 1), (W, 0), and (W, 1). Let T[x] be the triangle with vertices at (0, ...
等边三角形阵列麦克风与Wiener滤波的语音增强技术
"这篇学术论文主要探讨了一种应用于小体积场景的语音增强技术，该技术基于等边三角形麦克风阵列，并结合Wiener后置滤波器，由VAD（Voice Activity Detection）作为控制单元。该方法旨在克服传统自适应零限波束形成在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值