效果预览

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

在线演示

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. IT兄弟连 JavaWeb教程 经典面试题3

    1.简述什么是重定向? 服务器向浏览器发送—个302状态码及一个Location消息头(该消息头的值是一个地址,称之为重定向地址),浏览器收到后会立即向重定向地址发出请求. 2.简述什么是转发?怎么实 ...

  2. C#解决窗体全屏遮住任务栏

    this.MaximizedBounds = Screen.PrimaryScreen.WorkingArea; 在初始话后添加这个即可实现,...............

  3. Java反编译工具-JD-GUI

    Java是跨平台的,JD-GUI提供了多个系统的支持,但是不建议直接安装,最快的方式推荐直接下载JAR包,然后用java -jar进行运行. 就现在的版本是1.4.0,停留在2015年,估计近期会更新 ...

  4. android动画(1)各种动画属性表,简单代码,xml配置

    1.动画的属性表 1.1 常用属性 它们可以通过代码setXXX,getXXX,也可在xml中配置. 属性[类型] 功能 备注 Duration[long] 属性为动画持续时间 时间以毫秒为单位 fi ...

  5. python_13(前端—cs)

    第1章 前端三大标准:1.1 三大标准介绍 1.2 html标签一览表 第2章 结构标准 html 2.1 html结构 2.2 html常用标签 2.2.1 h1-h6 2.2.2 span 2.2 ...

  6. NestedScrollView嵌套RecycleView发生的小问题

    1.解决方法:嵌套滑动不激活. recycleView.setNestedScrollingEnable(false); 这样做有个弊端,RecycleView的item会一次性加载完,不管是否显示, ...

  7. 一个Java编写的小玩意儿--脚本语言解释器(一)

    今天开始想写一个脚本语言编译器.在这个领域,我还是知道的太少了,写的这个过程肯定是艰辛的,因为之前从来没有接触过这类的东西.写在自己的博客里,算是记录自己的学习历程吧.相信将来自己有幸再回过头来看到自 ...

  8. IOS之GCD记录

    在 GCD 中,加入了两个非常重要的概念: 任务 和 队列. 任务:即操作,你想要干什么,说白了就是一段代码,在 GCD 中就是一个 Block,所以添加任务十分方便.任务有两种执行方式: 同步执行 ...

  9. js递归和数组去重(简单便捷的用法)

    1.递归例子<script type="text/javascript"> function test(num) { if(num < 0) { return; ...

  10. (译文)IOS block编程指南 4 声明和创建blocks

    Declaring and Creating Blocks (声明和创建blocks) Declaring a Block Reference (声明一个block引用) Block variable ...