如何用纯 CSS 绘制一颗闪闪发光的璀璨钻石
效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
https://codepen.io/zhang-ou/pen/qYqwQp
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
请从 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;
}
大功告成!
知识点
- variables https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
- border-width https://developer.mozilla.org/en-US/docs/Web/CSS/border-width
- border-color https://developer.mozilla.org/en-US/docs/Web/CSS/border-color
- grid-template-column https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
- rotate() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate
原文地址:https://segmentfault.com/a/1190000014652116
如何用纯 CSS 绘制一颗闪闪发光的璀璨钻石的更多相关文章
- 前端每日实战:6# 视频演示如何用纯 CSS 绘制一颗闪闪发光的璀璨钻石
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/qYqwQp 可交互视频教程 此视频是可以交 ...
- 6. 纯 CSS 绘制一颗闪闪发光的璀璨钻石
原文地址:https://segmentfault.com/a/1190000014652116 HTML代码: <div class="diamond"> <s ...
- 如何用纯 CSS 创作一颗逼真的土星
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 ...
- 如何用纯 CSS 绘制一个充满动感的 Vue logo
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zaqKPx 可交互视频教 ...
- 如何用纯 CSS 绘制一个世界上不存在的彭罗斯三角形
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RyvgMZ 可交互视频教 ...
- 前端每日实战:43# 视频演示如何用纯 CSS 绘制一个充满动感的 Vue logo
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zaqKPx 可交互视频教程 此视频 ...
- 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 摘记 史上最强大的40多个纯CSS绘制的图形(一)
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
随机推荐
- IT兄弟连 JavaWeb教程 经典面试题3
1.简述什么是重定向? 服务器向浏览器发送—个302状态码及一个Location消息头(该消息头的值是一个地址,称之为重定向地址),浏览器收到后会立即向重定向地址发出请求. 2.简述什么是转发?怎么实 ...
- C#解决窗体全屏遮住任务栏
this.MaximizedBounds = Screen.PrimaryScreen.WorkingArea; 在初始话后添加这个即可实现,...............
- Java反编译工具-JD-GUI
Java是跨平台的,JD-GUI提供了多个系统的支持,但是不建议直接安装,最快的方式推荐直接下载JAR包,然后用java -jar进行运行. 就现在的版本是1.4.0,停留在2015年,估计近期会更新 ...
- android动画(1)各种动画属性表,简单代码,xml配置
1.动画的属性表 1.1 常用属性 它们可以通过代码setXXX,getXXX,也可在xml中配置. 属性[类型] 功能 备注 Duration[long] 属性为动画持续时间 时间以毫秒为单位 fi ...
- 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 ...
- NestedScrollView嵌套RecycleView发生的小问题
1.解决方法:嵌套滑动不激活. recycleView.setNestedScrollingEnable(false); 这样做有个弊端,RecycleView的item会一次性加载完,不管是否显示, ...
- 一个Java编写的小玩意儿--脚本语言解释器(一)
今天开始想写一个脚本语言编译器.在这个领域,我还是知道的太少了,写的这个过程肯定是艰辛的,因为之前从来没有接触过这类的东西.写在自己的博客里,算是记录自己的学习历程吧.相信将来自己有幸再回过头来看到自 ...
- IOS之GCD记录
在 GCD 中,加入了两个非常重要的概念: 任务 和 队列. 任务:即操作,你想要干什么,说白了就是一段代码,在 GCD 中就是一个 Block,所以添加任务十分方便.任务有两种执行方式: 同步执行 ...
- js递归和数组去重(简单便捷的用法)
1.递归例子<script type="text/javascript"> function test(num) { if(num < 0) { return; ...
- (译文)IOS block编程指南 4 声明和创建blocks
Declaring and Creating Blocks (声明和创建blocks) Declaring a Block Reference (声明一个block引用) Block variable ...