效果预览

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

https://codepen.io/comehope/pen/oMgmwB

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

上部:
https://scrimba.com/p/pEgDAM/cEb3nhK

下部:
https://scrimba.com/p/pEgDAM/cqwzqAR

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器包含 5 个元素,分别代表纸张、尺子、记事本、日历和铅笔。

<div class="desk">
<span class="paper"></span>
<span class="ruler"></span>
<span class="notebook"></span>
<span class="calendar"></span>
<span class="pencil"></span>
</div>

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

定义容器尺寸:

.desk {
width: 70em;
height: 70em;
font-size: 5px;
position: relative;
}

定义各元素的共有属性:

.desk {
--b: 1em solid darkslategray;
} .desk * {
position: absolute;
border: var(--b);
box-sizing: border-box;
} .desk *::before,
.desk *::after {
content: '';
position: absolute;
box-sizing: border-box;
}

画出纸张的轮廓:

.paper {
width: 24em;
height: 30em;
color: skyblue;
background-color: currentColor;
border-radius: 0 0 0 3em;
top: 14em;
left: 4em;
}

画出纸张左侧卷曲的部分:

.paper::before {
width: 4em;
height: 32em;
background-color: currentColor;
border: var(--b);
filter: saturate(150%) brightness(0.9);
bottom: 1.6em;
left: -1em;
border-radius: 3em 0 3em 0;
} .paper::after {
width: 4em;
height: 5em;
background-color: currentColor;
border: var(--b);
bottom: -1em;
left: -1em;
border-radius: 2.5em 0 0 2.5em;
border-right: none;
}

画出尺子的轮廓:

.ruler {
width: 6em;
height: 24em;
background: linear-gradient(
to right,
peru 30%,
sandybrown 30%
);
top: 8em;
left: 14em;
transform: rotate(25deg);
}

画出尺子上的长刻度线:

.ruler::before {
width: 2em;
height: calc(100% - 3em);
background-image: linear-gradient(darkslategray 1em, transparent 0);
background-size: 4em 4em;
top: 1em;
}

画出尺子上的短刻度线:

.ruler::after {
width: 1em;
height: calc(100% - 3em);
background-image: linear-gradient(darkslategray 1em, transparent 0);
background-size: 4em 4em;
top: 3em;
}

画出日历的轮廓:

.calendar {
width: 28em;
height: 28em;
background: linear-gradient(coral 30%, white 30%);
border-radius: 2em;
top: 14em;
right: 4em;
transform: rotate(15deg);
}

画出日历顶部的转轴:

.calendar::before {
width: 3em;
height: 4em;
color: sandybrown;
background-color: currentColor;
top: -2em;
left: 4em;
border-radius: 100% 100% 50% 50%;
box-shadow:
0 0, 0 0 0 1em darkslategray,
15em 0, 15em 0 0 1em darkslategray;
}

画出日历上的日期:

.calendar::after {
width: 3em;
height: 3em;
color: silver;
background-color: silver;
top: 10em;
left: 4em;
border-radius: 0.4em;
box-shadow:
0 0, 5em 0, 10em 0, 15em 0,
0 5em, 5em 5em, 10em 5em, 15em 5em,
0 10em, 5em 10em, 10em 10em, 15em 10em;
}

画出记事本的轮廓:

.notebook {
width: 26em;
height: 34em;
background: linear-gradient(
to right,
tomato 12%,
coral 12%, coral 60%,
darkslategray 60%, darkslategray 64%,
sandybrown 64%, sandybrown 78%,
darkslategray 78%, darkslategray 82%,
coral 82%
);
border-radius: 3em;
bottom: 8em;
left: 20em;
}

画出记事本的底部:

.notebook::before {
width: inherit;
height: 5em;
background-color: white;
border: var(--b);
bottom: -1em;
left: -1em;
border-radius: 3em 0 3em 3em;
}

画出记事本的书签:

.notebook::after {
width: 4em;
height: 5em;
background-color: coral;
border: var(--b);
bottom: -3em;
left: 4em;
border-top: none;
border-radius: 0 0 1em 1em;
}

画出铅笔的轮廓:

.pencil {
width: 6em;
height: 12em;
background: linear-gradient(
coral 20%,
darkslategray 20%, darkslategray 25%,
sandybrown 25%
);
border-radius: 0.8em;
bottom: 14em;
right: 13em;
transform: rotate(-35deg);
}

画出铅笔的笔尖:

.pencil::before {
border: 3em solid transparent;
border-top-color: darkslategray;
bottom: -6.5em;
left: -1em;
} .pencil::after {
border: 2em solid transparent;
border-top-color: sandybrown;
bottom: -4.5em;
left: 0;
}

增加鼠标悬停效果,把物品都推向桌面的边缘:

.desk * {
transition: 1s;
} .desk:hover .paper {
top: 0;
left: 0;
} .desk:hover .ruler {
top: 0;
left: 50%;
transform: rotate(0);
} .desk:hover .calendar {
top: 0;
right: 0;
transform: rotate(0deg);
} .desk:hover .notebook {
bottom: 0;
left: 0;
} .desk:hover .pencil {
bottom: 0;
right: 0;
transform: rotate(180deg);
}

dom 中增加文字 “Hey, Take it easy”:

<div class="desk">
<span class="paper"></span>
<span class="ruler"></span>
<span class="calendar"></span>
<span class="notebook"></span>
<span class="pencil"></span>
<p>Hey!<br>Take it easy!</p>
</div>

设置文字样式:

.desk p {
border: none;
color: darkslategray;
font-size: 6em;
font-weight: bold;
font-family: sans-serif;
text-align: center;
bottom: 2em;
right: 1em;
}

最后,为文字增加慢慢浮现的效果:

.desk p {
transform: rotate(-35deg) scale(0);
} .desk:hover p {
transform: rotate(-35deg) scale(1);
}

大功告成!

前端每日实战:76# 视频演示如何用纯 CSS 创作一组单元素办公用品(内含2个视频)的更多相关文章

  1. 前端每日实战:69# 视频演示如何用纯 CSS 创作一个单元素抛盒子的 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 此视频是可 ...

  2. 76.纯 CSS 创作一组单元素办公用品

    原文地址:https://segmentfault.com/a/1190000015607676 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:利用css的制图. ...

  3. 前端每日实战:92# 视频演示如何用纯 CSS 创作一颗逼真的土星

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可 ...

  4. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

  5. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...

  6. 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...

  7. 前端每日实战:161# 视频演示如何用纯 CSS 创作一张纪念卓别林的卡片(没有笑声的一天就是被荒废的一天)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/WaaBNV 可交互视频 此视频是可 ...

  8. 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...

  9. 前端每日实战:126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...

随机推荐

  1. php array_fill()函数 语法

    php array_fill()函数 语法 作用:用键值填充数组.大理石平台价格 语法:array_fill(index,number,value) 参数: 参数 描述 index 必需.被返回数组的 ...

  2. Tomcat修改源码,重新编译

    源码和编译的区别:源码不能直接运行,是人读的,而编译后的程序是计算机可以读的.所以它们是不同的语言.

  3. 解决Windows2003 Server终端服务120天限制

    用过windows server 2003做服务器的人都知道,windows2003的性能安全性比以前的windows版本高出很多,但是也带来很多麻烦.其中服务器最重要的远程管理“终端服务”居然要求授 ...

  4. ThreadPoolExecutor实现异步多线程

    import time from concurrent.futures import ThreadPoolExecutor executor = ThreadPoolExecutor(max_work ...

  5. save change is not permitted

    https://support.microsoft.com/en-my/help/956176/error-message-when-you-try-to-save-a-table-in-sql-se ...

  6. 五一清北学堂培训之数据结构(Day 1&Day 2)

    Day 1 前置知识: 二进制 2.基本语法 3.时间复杂度 正片       1.枚举 洛谷P1046陶陶摘苹果  入门题没什么好说的 判断素数:从2枚举到sqrt(n),若出现n的因子,则n是合数 ...

  7. 双轴按键摇杆控制器控制TFTLCD(使用ADC1双通道DMA传输)

    实验使用如下所示的双轴按键摇杆控制器,来控制TFTLCD上显示的直线.首先介绍一下双轴按键摇杆控制器.原理:十字摇杆为一个双向的10K电阻器,随着摇杆方向不同,抽头的阻值随着变化.本模块使用5V供电( ...

  8. 《图解设计模式》读书笔记4-1 Bridge模式

    目录 概念 代码 角色 类图 想法 概念 Bridge模式即桥接模式.顾名思义,这个模式的作用是将类的功能层次结构和类的实现层次结构连接起来. 功能层次结构 Something -SomethingG ...

  9. pandas melt 与pivot 函数

    (掌握这个,基本就完美无缺的任意按照自己的想法,更改列了.) 背景: 最近有个excel 数据需要转化的过程. 数据量还挺大的,大概有30多万. 需要把某些行变成列,有些列又变成行. 这个操作本身就比 ...

  10. python web自动化测试框架搭建(功能&接口)——测试用例执行和结果收集

    由于unittest框架中结果收集在不同文件中,所以此处重写结果收集方法,加入执行时间,失败信息,失败截图等 TestRunner.py # coding=utf-8 import sys impor ...