效果预览

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

在线演示

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. Asp.net core 框架整理

    https://github.com/thangchung/awesome-dotnet-core#cms

  2. 使用ansible对远程主机上的ssh公钥进行批量分发

    使用ansible对远程主机上的ssh公钥进行批量分发或者是删除修改操作 ansible内置了一个authorized_key模块,这个模块很好用,我们使用这个模块可以对远程 主机上的ssh公钥进行批 ...

  3. css3 background-size属性--ie兼容

    css3 background-size属性--ie兼容 safari浏览器对background-size 属性显示原始大小 background-size: cover not working o ...

  4. Qt样式表之一:Qt样式表和盒子模型介绍

    一.Qt样式表介绍 Qt样式表是一个可以自定义部件外观的十分强大的机制,可以用来美化部件.Qt样式表的概念.术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CS ...

  5. 【bzoj2084】[Poi2010]Antisymmetry

    2084: [Poi2010]Antisymmetry Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 1205  Solved: 756[Submit ...

  6. Vue-cli构建项目, 组件中js代码引入图片路径问题

    问题描述 .vue的组件分成三个部分, template结构部分, script路径代码, style页面样式 首先, 我们可以在template可以正确引入, 无论是dev, 还是build都没有问 ...

  7. canvas绘图出现模糊,解决方法

    在项目开发中发现,canvas有一个问题,绘制的图会出现模糊现象. 解决方法之一:将canvas元素放大2倍,然后将整个canvas元素或者其父元素缩小两倍. <!DOCTYPE html> ...

  8. [已读]JavaScript面向对象编程指南

    又是一个忽悠人的书名,其实这本书的花了大量内容阐述JS的基础语法,BOM,DOM,事件,ajax(这个和很多js书一样).最后一章则是编程模式与设计模式. 我觉得与面向对象没多大关系,要算的话,pro ...

  9. calc() 计算CSS属性值

    calc()是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值.calc() ...

  10. Android虚拟机电池状态设置

    问题描述: 安装SDK后使用AVD配合APPIUM进行测试,此时虚拟机的电池状态为0%充电中:部分APP会对手机电池状态有要求,不符合要求时,无法安装或打开. 解决思路: 1.Android系统设置( ...