前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标
时间:2019-11-13
本文章向大家介绍前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标,主要包括前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/zJKwbO
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cDBZNUW
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 8 个元素,每个元素代表一个矩形色块:
<div class="icon">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
居中显示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #ccc;
}
定义容器尺寸:
.icon {
width: 10em;
height: 10em;
font-size: 30px;
background-color: #eee;
border-radius: 20%;
}
绘制出矩形的轮廓(边框为辅助线,最终会被删除),并放置在容器的中上方:
.icon {
position: relative;
display: flex;
justify-content: center;
box-sizing: border-box;
padding: 1em;
}
.icon span {
position: absolute;
width: 22.5%;
height: 37.5%;
border: 1px dashed black;
border-radius: 50% / 30%;
}
为矩形设置下标变量 --n
:
.icon span:nth-child(1) {
--n: 1;
}
.icon span:nth-child(2) {
--n: 2;
}
.icon span:nth-child(3) {
--n: 3;
}
.icon span:nth-child(4) {
--n: 4;
}
.icon span:nth-child(5) {
--n: 5;
}
.icon span:nth-child(6) {
--n: 6;
}
.icon span:nth-child(7) {
--n: 7;
}
.icon span:nth-child(8) {
--n: 8;
}
让 8 个矩形依次旋转固定的角度,围合成一个圆形:
.icon span {
transform-origin: center 105%;
transform: rotate(calc((var(--n) - 1) * 45deg));
}
为矩形设置颜色变量 --c
:
.icon span:nth-child(1) {
--c: rgba(243, 156, 18, 0.7);
}
.icon span:nth-child(2) {
--c: rgba(241, 196, 15, 0.7);
}
.icon span:nth-child(3) {
--c: rgba(46, 204, 113, 0.7);
}
.icon span:nth-child(4) {
--c: rgba(27, 188, 155, 0.7);
}
.icon span:nth-child(5) {
--c: rgba(65, 131, 215, 0.7);
}
.icon span:nth-child(6) {
--c: rgba(102, 51, 153, 0.7);
}
.icon span:nth-child(7) {
--c: rgba(155, 89, 182, 0.7);
}
.icon span:nth-child(8) {
--c: rgba(242, 38, 19, 0.7);
}
为 8 个矩形上色,并删除掉起辅助线作用的边框:
.icon span {
/* border: 1px dashed black; */
background-color: var(--c);
}
设置混色模式,使重叠颜色能叠加在一起:
.icon span {
mix-blend-mode: multiply;
}
增加鼠标悬停效果,当悬停时运行矩形色块展开的动画:
.icon:hover span {
animation: rotating 2s ease-in-out forwards;
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(calc((var(--n) - 1) * 45deg));
}
}
注意,在动画过程中第 1 个矩形并没有转动,因为它是从 0 度转到 0 度,为了让它转动,要把它的结束角度设置为 360 度,通过修改它的下标变量来实现:
.icon span:nth-child(1) {
--n: 9;
}
大功告成!
原文地址:https://www.cnblogs.com/jlfw/p/11848413.html
- 深入理解JVM原理之编译openjdk7
- 初识ActiveMQ
- Kafka集群安装
- 知其所以然之永不遗忘的算法
- ZOOKEEPER集群搭建及测试
- 【Python环境】Scikit-Learn:开源的机器学习Python模块
- 【Python环境】可爱的 Python: 自然语言工具包入门
- 电脑静音工作,又听不到12306的来票音乐,纠结啊 !但春节前工作多任务重,不能安心工作,就动手做个“无声购票弹窗”工具吧!
- .net访问PostgreSQL数据库发生“找不到函数名”的问题追踪
- “领域驱动开发”实例之旅(1)--不一样的开发模式 一、分析业务需求。 二、设计领域对象模型 三、测试领域对象模型 四、设计业务处理类 五、设计Entity和Vi
- Java基础——左移和右移
- 【Python环境】利用 Python、SciKit 和文本分类来实现行为分析
- LJMM平台( Linux +Jexus+MySQL+mono) 上使用MySQL的简单总结
- 判断两个单链表是否相交(有环、无环两种)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例