示例

HTML

.container.warlock.circle.c1.circle.c2.circle.c3.circle.c4.shape_group.shape.s1.shape.s2.shape.s3.shape.s4.shape.s5.shape.s6.line_group.g1.line.l1.line.l2.line.l3.line.l4.line_group.g2.line.l1.line.l2.line.l3.line.l4.line_group.g3.line.l1.line.l2.line.l3.line.l4

CSS

$color-background: #fff;
$color-triangle: #363636;* {box-sizing: border-box;
}html {font-size: 24px;
}body {margin: 0;min-height: 100vh;display: grid;place-items: center;background: $color-background;
}.container {position: relative;display: flex;align-items: center;justify-content: center;height: 14rem;width: 14rem;
}.circle {position: absolute;border-radius: 50%;border: 1px solid $color-triangle;z-index: 1;
}.shape_group {position: absolute;display: grid;place-items: center;height: 8rem;width: 8rem;overflow: hidden;.shape {position: absolute;border-left: 2.85rem solid transparent;border-right: 2.85rem solid transparent;border-bottom: 4.9rem solid $color-triangle;}
}.line_group {position: absolute;.line {position: absolute;height: 100%;width: 1px;background: linear-gradient(to bottom,transparent 0%,$color-triangle 20%,$color-triangle 80%,transparent 100%);&.l1 {left: 0;}&.l2 {left: 33%;}&.l3 {left: 67%;}&.l4 {left: 100%;}}
}// ============================
// DEFAULT
// ============================
.default {.c1 {height: 10rem;width: 10rem;transition: all 2s ease-in-out;}.c2 {height: 9rem;width: 9rem;transition: all 2s ease-in-out;}.c3 {height: 9rem;width: 9rem;transition: all 2s ease-in-out;}.c4 {height: 8rem;width: 8rem;transition: all 2s ease-in-out;}.shape_group {transition: height 2s ease-in-out;.shape {transition: transform 2s ease-in-out,border-bottom-color 0.75s ease-in 1.25s;border-bottom-color: $color-background;transform: rotate(180deg);}}.line_group {transition: all 2s ease-in-out;.line {transition: all 2s ease-in-out;}&.g1 {height: 15rem;width: 6rem;}&.g2 {height: 15rem;width: 7.75rem;transform: rotate(-60deg);}&.g3 {height: 15rem;width: 7.75rem;transform: rotate(60deg);}}
}// ============================
// WARLOCK
// ============================
.warlock {.c1 {height: 6.25rem;width: 6.25rem;transition: all 2s ease-in-out;}.c2 {height: 4rem;width: 4rem;transition: all 2s ease-in-out;}.c3 {height: 12.5rem;width: 12.5rem;transition: all 1s ease-in-out 1s;}.c4 {height: 11.5rem;width: 11.5rem;transition: all 1s ease-in-out 1s;}.shape_group {.shape {transition: transform 2s ease-in-out,border-bottom-color 0.75s ease-in 1.25s;&.s1,&.s4 {transform: rotate(0) translate(-1.15rem, 0.5rem);}&.s2,&.s5 {transform: rotate(360deg) translate(0, 0.5rem);}&.s3,&.s6 {transform: rotate(360deg) translate(1.15rem, 0.5rem);}}}.line_group {transition: all 2s ease-in-out;.line {transition: all 2s ease-in-out;box-shadow: 0 0 0 2px $color-background;}&.g1 {height: 15rem;width: 6rem;transform: rotate(-90deg);.l2,.l3 {opacity: 0;}}&.g2 {height: 15rem;width: 4rem;transform: rotate(-150deg);.l1 {left: 50%;}.l2 {left: 74%;}.l3 {left: 77%;}.l4 {left: 100%;}}&.g3 {height: 15rem;width: 4rem;transform: rotate(150deg);.l1 {left: 0%;}.l2 {left: 24%;}.l3 {left: 27%;}.l4 {left: 50%;}}}
}// ============================
// TITAN
// ============================
.titan {.c1 {height: 10.5rem;width: 10.5rem;transition: all 2s ease-in-out;}.c2 {height: 10rem;width: 10rem;transition: all 2s ease-in-out;}.c3 {height: 12rem;width: 12rem;transition: all 1s ease-in-out 1s;}.c4 {height: 11rem;width: 11rem;transition: all 1s ease-in-out 1s;}.shape_group {.shape {transition: transform 2s ease-in-out;&.s1 {transform: rotate(-90deg) scale(0.535) translate(-3.1rem, -2.5rem);}&.s2 {transform: rotate(270deg) scale(0.535) translate(3.1rem, -2.5rem);}&.s3 {transform: rotate(270deg) scale(0.485) translate(0, 3rem);}&.s4 {transform: rotate(90deg) scale(0.485) translate(0, 3rem);}&.s5 {transform: rotate(450deg) scale(0.535) translate(-3.1rem, -2.4rem);}&.s6 {transform: rotate(450deg) scale(0.535) translate(3.1rem, -2.4rem);}}}.line_group {transition: all 2s ease-in-out;.line {transition: all 2s ease-in-out;}&.g1 {height: 15rem;width: 5.25rem;transform: rotate(-180deg);.l2,.l3 {opacity: 0;}}&.g2 {height: 15rem;width: 5.5rem;transform: rotate(-240deg);.l1 {left: 0%;}.l2 {left: 48%;}.l3 {left: 52%;}.l4 {left: 100%;}}&.g3 {height: 15rem;width: 5.5rem;transform: rotate(240deg);.l1 {left: 0%;}.l2 {left: 48%;}.l3 {left: 52%;}.l4 {left: 100%;}}}
}// ============================
// HUNTER
// ============================
.hunter {.c1 {height: 5.5rem;width: 5.5rem;transition: all 2s ease-in-out;}.c2 {height: 4rem;width: 4rem;transition: all 2s ease-in-out;}.c3 {height: 9rem;width: 9rem;transition: all 2s ease-in-out;}.c4 {height: 8rem;width: 8rem;transition: all 2s ease-in-out;}.shape_group {transition: height 2s ease-in-out;height: 6rem;.shape {transition: all 2s ease-in-out, border-bottom-color 0.75s ease-in 1.25s;&.s1 {transform: rotate(0deg) scale(0.83) translate(0, 1.2rem);}&.s2 {transform: rotate(360deg) scale(0.83) translate(0, -3.6rem);}&.s3 {transform: rotate(360deg) scale(0.83) translate(0, -1.2rem);}&.s4 {border-bottom-color: $color-background;transform: rotate(0deg) scale(0.4) translate(0, 0);}&.s5 {border-bottom-color: $color-background;transform: rotate(360deg) scale(0.4) translate(0, -5rem);}&.s6 {border-bottom-color: $color-background;transform: rotate(360deg) scale(0.4) translate(0, 5rem);}}}.line_group {transition: all 2s ease-in-out;.line {transition: all 2s ease-in-out;}&.g1 {height: 15rem;width: 6rem;transform: rotate(-270deg);}&.g2 {height: 15rem;width: 5rem;transform: rotate(-330deg);.l1 {left: 0%;}.l2 {left: 20%;}.l3 {left: 40%;z-index: -1;}.l4 {left: 60%;z-index: -1;}}&.g3 {height: 15rem;width: 5rem;transform: rotate(330deg);.l1 {left: 40%;}.l2 {left: 60%;}.l3 {left: 80%;}.l4 {left: 100%;}}}
}@media only screen and (max-width: 600px) {html {font-size: 16px;}
}

JS

const container = document.querySelector(".container");
const classNames = ["warlock", "titan", "hunter", "default"];
let i = 0;const changeClass = () => {container.classList.remove(classNames[i]);i = i < classNames.length - 1 ? i + 1 : 0;container.classList.add(classNames[i]);
};setInterval(changeClass, 3000);

几何图形变化（Codevember）相关推荐

左边是地狱右边也是地狱_我担任地狱首席执行官的时间
左边是地狱右边也是地狱回顾性 (RETROSPECTIVE) Back in primary school, I was a curious lad. I fit in better with th ...
【GNSS技术发展三部曲】
在我们了解一个新的技术领域的时候,最令人头疼的往往是其技术名词缩写的含义与各自关系,这常常会让新手或业外人士丈二摸不着头脑.今天小新就给大家讲讲卫星导航技术领域的三部曲:RTK,PPP,LEO. GP ...
CAD 实验4 二维图形变换
实验4 二维图形变换实验目的: (1)掌握二维几何图形变化的方法. (2)熟悉Windows窗口图形的生成方法. 实验环境与设备: 已安装Visual Studio 2010(或其以上版本)集 ...
Ae 案例：制作粒子空间穿梭动画
本文介绍使用 Ae 插件 Stardust 制作粒子空间穿梭动画的一般方法与步骤. 示例视频 1.新建合成. 持续时间:10 秒. 2.新建纯色图层,命名为"Stardust",然 ...
几何画板自定义工具_用好神奇的数学工具--几何画板，轻松作出复杂的几何图形...
#几何画板是一个很神奇的绘图工具,所有数学教材中的图形都能运用几何画板轻而易举的画出来,还可以复制到文档编辑软件(比如Word.WPS)中,几何画板提供了一个十分理想的"做数学"的 ...
OpenGL入门学习课程 (三) 绘制几何图形的一些细节问题
http://oulehui.blog.163.com/blog/static/79614698201191832753312/ 先回顾一下我们都学习了些什么: 第一课,编写第一个OpenGL程序第 ...
第二课，绘制几何图形
原帖地址:http://www.programfan.com/club/showbbs.asp?id=184525 本次课程所要讲的是绘制简单的几何图形,在实际绘制之前,让我们先熟悉一些概念. 一.点 ...
OpenGL入门学习[二] 绘制简单的几何图形
OpenGL入门学习[二] 本次课程所要讲的是绘制简单的几何图形,在实际绘制之前,让我们先熟悉一些概念. 一.点.直线和多边形我们知道数学(具体的说,是几何学)中有点.直线和多边形的概念,但这些概念 ...
30 个案例教你用纯 CSS 实现常见的几何图形
三角形传统 border 实现我们知道,如果设置一个盒子的宽高为 0,盒子就会变成一个点.此时再给上下左右四个 border 一定的宽度和不同的颜色,那么单纯由 border 填充的盒子看起来是这 ...

几何图形变化（Codevember）

几何图形变化（Codevember）

示例

HTML

CSS

JS

几何图形变化（Codevember）相关推荐

最新文章

热门文章