原文地址:https://segmentfault.com/a/1190000015607676

学习后效果地址:https://scrimba.com/c/c8PQ3PTB

感想:利用css的制图、css的过渡transition等

HTML code:

<!-- 定义一个desk容器:包含纸张、尺子、笔记本、日历、铅笔 -->
<div class="desk">
<span class="paper"></span>
<span class="ruler"></span>
<span class="notebook"></span>
<span class="calendar"></span>
<span class="pencil"></span>
</div>

CSS code:

html, body {
margin:;
padding:;
}
/* 设置body的子元素水平垂直居中 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 设置desk的样式 */
.desk{
position:relative;
/* font-size:12;这是默认值,只可增大,同时影响desk的width、height */
font-size: 12px;
width: 35em;
height: 35em;
/* border: 1px solid black; */
--b: 0.5em solid darkslategray;
}
/* 直接定义desk的子元素共有属性 */
.desk * {
position: absolute;
border: var(--b);
/* 设置width、height的值包括border、padding、content */
box-sizing: border-box;
/* 过渡时间 */
transition: 1s;
}
.desk *::before,
.desk *::after{
content: '';
position: absolute;
box-sizing: border-box;
}
/* 画出纸张的轮廓 */
.paper{
width: 12em;
height: 15em;
border-radius: 0 0 0 1.5em;
color: skyblue;
background-color: currentColor;
top: 7em;
left: 2em
}
/* 设置paper纸张左侧卷曲的部分 */
.paper::before{
width: 2em;
height: 16em;
background-color: currentColor;
border: var(--b);
border-radius: 1.5em 0;
left: -0.5em;
bottom: 0.8em;
filter: saturate(150%) brightness(0.9);
}
.paper::after{
width: 2em;
height: 2.5em;
background-color: currentColor;
border: var(--b);
border-radius: 1.75em 0 0 1.75em;
border-right: none;
bottom: -0.5em;
left: -0.5em;
}
/* 增加鼠标悬停效果 */
.desk:hover .paper{
top:;
left:;
}

76.纯 CSS 创作一组单元素办公用品的更多相关文章

  1. 前端每日实战:76# 视频演示如何用纯 CSS 创作一组单元素办公用品(内含2个视频)

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

  2. 69.纯 CSS 创作一个单元素抛盒子的 loader

    原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...

  3. 如何用纯 CSS 创作一个单元素抛盒子的 loader

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

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

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

  5. 如何用纯 CSS 创作一组昂首阔步的圆点

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

  6. 炫!一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  7. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  8. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  9. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

随机推荐

  1. svcs (service status) 和 svcadm (service administration) 使用

    1. svcs  显示服务实例的状态信息 svcs - report service status  显示服务状态命令 DESCRIPTION The svcs command displays in ...

  2. H3C Easy IP配置举例

  3. codemirror 行高 字体 行间距 设置

    用的是 react-codemirror2 样式文件: ... .code-mirror{ font-size : 13px; line-height : 150%; } ... 引入样式文件: .. ...

  4. Spring Boot 2.x使用Mockito进行测试

    在上一篇,项目基本实现了Spring Boot对Mybatis的整合.这篇文章使用Mockito对项目进行测试. 1.使用postmat测试: 2.编写单元测试类,使用mockito进行测试: 3.使 ...

  5. linux alloc_pages 接口

    为完整起见, 我们介绍另一个内存分配的接口, 尽管我们不会准备使用它直到 15 章. 现 在, 能够说 struct page 是一个描述一个内存页的内部内核结构. 如同我们将见到的, 在内核中有许多 ...

  6. <mvc:annotation-driven /><context:annotation-config/><context:component-scan/>

    <context:annotation-config/> 隐式地向 Spring容器注册AutowiredAnnotationBeanPostProcessor. RequiredAnno ...

  7. nixyx —— 一个小巧的项目工程/编译文件生成器(构建系统?)

    恩..nixyx确实算不上是一个构建系统. 所谓构建系统,比如GNU的Autotools,那是一套很完整的构建体系,包括了程序的配置,编译和安装三大部分. 类似的软件还有:google的gyp.腾讯的 ...

  8. C++Review1_多态和虚函数

    继承是实现多态的基础.虚函数是实现多态的方法.虚函数.多态.继承都是紧密相关的概念.而继承是所有概念的基础: 多态:简单来讲就是接口一样,实现多样.多态是指通过基类的指针或者引用,在运行时动态调用实际 ...

  9. Python3_函数参数传递、可变与不可变对象、变量作用域、函数返回值

    参数传递: 在 python 中,类型属于对象,变量是没有类型的:(变量都仅仅是一个对象的引用,没有类型之分)a=[1,2,3] a="Runoob" 以上代码中,[1,2,3] ...

  10. springboot 动态修改定时任务

    1.静态定时 1)启动类加上注解@EnableScheduling @EnableAsync @EnableScheduling @SpringBootApplication @MapperScan( ...