前端每日实战:76# 视频演示如何用纯 CSS 创作一组办公用品(因代码量大,录了2个视频,共23分钟)

2018-07-12 admin

图片描述

效果预览

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

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);
}

大功告成!

原文链接:https://segmentfault.com/a/1190000015607676

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35792.html

文章标题:前端每日实战:76# 视频演示如何用纯 CSS 创作一组办公用品(因代码量大,录了2个视频,共23分钟)

相关文章
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
JavaScript短路原理精简代码
js中||和&amp;&amp;的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、&quot;&quot;、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
回到顶部