68.纯 CSS 创作一本色卡
原文地址:https://segmentfault.com/a/1190000015456554
感想:复习下 transform-origin: 位置;
HTML code:
<div class="cards">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS code:
html, body {
margin:;
padding:;
}
/* 设置body子元素水平垂直居中*/
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
/* 重定义盒模型 */
.cards,
.cards > * {
/* width、height包括边框、内边距、内容区 */
box-sizing: border-box;
}
/* 设置容器样式 */
.cards {
position: relative;
font-size: 12px;
width: 20em;
height: 20em;
/* border: 1px solid blue; */
}
/* 画出色卡 */
.cards span{
width: 10em;
height: 3em;
border: 0.2em solid dimgray;
border-radius: 0.3em 0.8em 0.8em 0.3em;
/* 用 HSL 色彩模式为色卡上色 */
background-color: hsl(calc(360 / 8 * var(--n)), 80%, 70%);
position: absolute;
top: calc(50% - 3em / 2);
/* 定义动画效果,transform-origin定点绕其旋转 */
transform-origin: right;
animation: rotating 3s linear infinite;
animation-delay: calc((var(--n) - 8) * 0.15s);
}
@keyframes rotating {
0%, 35% {
transform: rotate(0deg);
} 90%, 100% {
transform: rotate(360deg);
}
}
/* 用伪元素画出色卡的标签 */
.cards span::before{
content:'';
width: 35%;
height: 100%;
border-left: 0.2em solid silver;
border-radius: 0 0.6em 0.6em 0;
background-color: white;
position: absolute;
right:;
}
.cards span::after {
content: '';
width: 0.4em;
height: 2em;
background-color: silver;
position: absolute;
left: 6.5em;
top: 0.1em;
box-shadow: 0.7em 0 0 -0.1em silver;
}
/* 为色卡设置变量 */
.cards span:nth-child(1) {
--n:;
}
.cards span:nth-child(2) {
--n:;
}
.cards span:nth-child(3) {
--n:;
}
.cards span:nth-child(4) {
--n:;
}
.cards span:nth-child(5) {
--n:;
}
.cards span:nth-child(6) {
--n:;
}
.cards span:nth-child(7) {
--n:;
}
.cards span:nth-child(8) {
--n:;
}
68.纯 CSS 创作一本色卡的更多相关文章
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 75.纯 CSS 创作一支摇曳着烛光的蜡烛
原文地址:https://segmentfault.com/a/1190000015580809 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:CSS 真强大! ...
- 74.纯 CSS 创作一台 MacBook Pro
原文地址:https://segmentfault.com/a/1190000015568609 HTML code: <div class="macbook"> &l ...
- 73.纯 CSS 创作一只卡通狐狸
原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位 ...
- 72.纯 CSS 创作气泡填色的按钮特效
原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...
- 71.纯 CSS 创作一个跳 8 字型舞的 loader
原文地址:https://segmentfault.com/a/1190000015534639#articleHeader0 感想:rotateX() 和rotateZ()一起使用好懵呀. HTML ...
- 70.纯 CSS 创作一只徘徊的果冻怪兽
原文地址:https://segmentfault.com/a/1190000015484852 感想:monster中边框角.上下动画.旋转动画.左右动画,眼睛中transform:scaleY(n ...
随机推荐
- Linux下tomcat运行时jvm内存分配
tomcat运行时jvm内存分配 ⑴开发环境下在myeclipse中配置-Xms256m -Xmx512m -XX:NewSize=64m -XX:MaxNewSize=128m -XX:PermSi ...
- 对于"单链表逆置和递归"的问题的理解.
一. 相关知识要点: 学习或了解基础数据结构和C语言, 对基础链表知识或相关知识有概况性认识. 例如: 本题目结构为: #define elem_type int typedef struct _si ...
- 每个月总有那么几天!!!!XML解析
1. 介绍 1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这个层次结构允许 ...
- 【bug记录】OS Lab3 踩坑记
OS Lab3 踩坑记 Lab3在之前Lab2的基础上,增加了进程建立.调度和中断异常处理.其中测试包括进程建立以及进程调度部分. 由于是第一次做bug记录,而且是调试完bug后再做的记录,所以导致记 ...
- idea打开dashboard
1.编辑workspace.xml文件,搜索 “RunDashboard” 节点 2.在component节点下增加option <option name="configuration ...
- 大数据量下的SQL Server数据库自身优化
原文: http://www.d1net.com/bigdata/news/284983.html 1.1:增加次数据文件 从SQL SERVER 2005开始,数据库不默认生成NDF数据文件,一般情 ...
- css颜色的设置
css的颜色设置 1.英文命令颜色 p{color:blue;}RGB颜色 2.与 photoshop 中的 RGB 颜色一致,由 R(red).G(green).B(blue) 三种颜色的比例来配色 ...
- Cygwin,一个提供linux命令行体验的Windows命令行工具
安装 从官网下载,选择合适节点(带edu结尾的优先),安装 使用 未完待续...
- R并行计算
# 参考文献: https://cosx.org/2016/09/r-and-parallel-computinghttps://blog.csdn.net/sinat_26917383/articl ...
- MySQL高可用工具--orchestrator
orchestrator是一款MySQL高可用工具,其支持: 集群拓扑探测 集群拓扑重塑 故障恢复 提供3种使用方式: 命令行 HTTP API web页面 orchestator github地址