如何用纯 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(正方 ...
随机推荐
- bzoj 4403: 序列统计【lucas+组合数学】
首先,给一个单调不降序列的第i位+i,这样就变成了单调上升序列,设原来数据范围是(l,r),改过之后变成了(l+1,r+n) 在m个数里选长为n的一个单调上升序列的方案数为\( C_m^n \),也就 ...
- P1228-重叠的图像
一道很水的topsort,唉?怎么交了14遍...(某人用我的代码刚好卡过,我怎么过不去...[鄙视][鄙视][鄙视]) #include <bits/stdc++.h> using na ...
- robotframework自动化系列:操作mysql数据库
随着项目自动化深入和不断完善,大部分功能都已经能完成了自动化的操作:但是在设备添加的时候,遇到了难题.添加设备的时候mac必须是服务器设备管理中已经存在的mac地址,且是没有关联或绑定用户的设备信息. ...
- plsqldeveloper永久注册码
注册码:Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769 password:xs374ca
- 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 ...
- 跟我一起玩Win32开发(25):监视剪贴板
自从郭大侠和蓉儿离开桃花岛后,最近岛比较寂静,有一种“门前冷落鞍马稀”的感觉.于是,老邪就拿出<九阴真经>认真阅读,同时用迅雷下载经典大剧<汉武大帝>晚上睡觉前看上几集,老邪一 ...
- ssm框架下实现文件上传
1.由于ssm框架是使用Maven进行管理的,文件上传所需要的jar包利用pom.xml进行添加,如下所示: <properties> <commons-fileupload.v ...
- 与Cookie相比,Web Storage存在的优势
与Cookie相比,Web Storage存在不少的优势,概括为以下几点:1. 存储空间更大:能提供5MB的存储空间(不同浏览器的提供的空间不同),Cookie仅4KB2. 存储内容不会发送到服务器: ...
- 515 Find Largest Value in Each Tree Row 在每个树行中找最大值
在二叉树的每一行中找到最大的值.示例:输入: 1 / \ 3 2 / \ \ 5 3 9 输出: [ ...
- 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地址与主机名的对应.