效果预览

按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。

在线演示

https://codepen.io/zhang-ou/pen/qYqwQp

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/c/cp24VfV

源代码下载

本地下载

请从 github 下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/006-blue-dazzling-diamond

代码解读

定义 dom,容器中包含一个元素:

<div class="diamond">
<span></span>
</div>

居中显示:

html,
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

画出第一组刻面的形状:

.diamond {
display: grid;
} .diamond span {
border-width: 50px;
border-style: solid;
}

为第一组刻面上色,因为后面还要用到这些色值,所以定义了变量:

:root {
--color1: deepskyblue;
--color2: steelblue;
--color3: royalblue;
--color4: dodgerblue;
} .diamond span {
border-color: var(--color1) var(--color2) var(--color3) var(--color4);
}

dom容器 中再增加3组刻面:

<div class="diamond">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

把4组刻面先组成田字格,再转换成钻石形状:

.diamond {
grid-template-columns: 1fr 1fr;
transform: rotate(45deg);
} .diamond span:first-child {
border-color: transparent var(--color2) var(--color3) transparent;
}

定义动画效果:

@keyframes animate {
0% {
border-color: var(--color1) var(--color2) var(--color3) var(--color4);
} 25% {
border-color: var(--color4) var(--color1) var(--color2) var(--color3);
} 50% {
border-color: var(--color3) var(--color4) var(--color1) var(--color2);
} 75% {
border-color: var(--color2) var(--color3) var(--color4) var(--color1);
} 100% {
border-color: var(--color1) var(--color2) var(--color3) var(--color4);
}
}

最后,把动画效果应用到除第1组以外的刻面上:

.diamond span:not(:first-child) {
animation: animate 2s linear infinite;
}

大功告成!

知识点

原文地址:https://segmentfault.com/a/1190000014652116

如何用纯 CSS 绘制一颗闪闪发光的璀璨钻石的更多相关文章

  1. 前端每日实战:6# 视频演示如何用纯 CSS 绘制一颗闪闪发光的璀璨钻石

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/qYqwQp 可交互视频教程 此视频是可以交 ...

  2. 6. 纯 CSS 绘制一颗闪闪发光的璀璨钻石

    原文地址:https://segmentfault.com/a/1190000014652116 HTML代码: <div class="diamond"> <s ...

  3. 如何用纯 CSS 创作一颗逼真的土星

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 ...

  4. 如何用纯 CSS 绘制一个充满动感的 Vue logo

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zaqKPx 可交互视频教 ...

  5. 如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RyvgMZ 可交互视频教 ...

  6. 前端每日实战:43# 视频演示如何用纯 CSS 绘制一个充满动感的 Vue logo

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zaqKPx 可交互视频教程 此视频 ...

  7. 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...

  8. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  9. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

随机推荐

  1. bzoj 4403: 序列统计【lucas+组合数学】

    首先,给一个单调不降序列的第i位+i,这样就变成了单调上升序列,设原来数据范围是(l,r),改过之后变成了(l+1,r+n) 在m个数里选长为n的一个单调上升序列的方案数为\( C_m^n \),也就 ...

  2. P1228-重叠的图像

    一道很水的topsort,唉?怎么交了14遍...(某人用我的代码刚好卡过,我怎么过不去...[鄙视][鄙视][鄙视]) #include <bits/stdc++.h> using na ...

  3. robotframework自动化系列:操作mysql数据库

    随着项目自动化深入和不断完善,大部分功能都已经能完成了自动化的操作:但是在设备添加的时候,遇到了难题.添加设备的时候mac必须是服务器设备管理中已经存在的mac地址,且是没有关联或绑定用户的设备信息. ...

  4. plsqldeveloper永久注册码

    注册码:Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769 password:xs374ca

  5. PMD - Avoid autogenerated methods to access private fields and methods of inner / outer classes

    PMD错误 Avoid autogenerated methods to access private fields and methods of inner / outer classes 样例 p ...

  6. 跟我一起玩Win32开发(25):监视剪贴板

    自从郭大侠和蓉儿离开桃花岛后,最近岛比较寂静,有一种“门前冷落鞍马稀”的感觉.于是,老邪就拿出<九阴真经>认真阅读,同时用迅雷下载经典大剧<汉武大帝>晚上睡觉前看上几集,老邪一 ...

  7. ssm框架下实现文件上传

      1.由于ssm框架是使用Maven进行管理的,文件上传所需要的jar包利用pom.xml进行添加,如下所示: <properties> <commons-fileupload.v ...

  8. 与Cookie相比,Web Storage存在的优势

    与Cookie相比,Web Storage存在不少的优势,概括为以下几点:1. 存储空间更大:能提供5MB的存储空间(不同浏览器的提供的空间不同),Cookie仅4KB2. 存储内容不会发送到服务器: ...

  9. 515 Find Largest Value in Each Tree Row 在每个树行中找最大值

    在二叉树的每一行中找到最大的值.示例:输入:           1         /  \        3   2       /  \    \        5   3    9 输出: [ ...

  10. Squid启动报:Could not determine this machines public hostname. Please configure one or set 'visible_hostname'.

    在squid.conf中添加 visible_hostname squid.packet-pushers.net 或者编辑/etc/hosts文件, 在该文件中制定主机IP地址与主机名的对应.