CSS文件夹
时间:2022-07-26
本文章向大家介绍CSS文件夹,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
网上冲浪时发现的瑰宝,特别适合刚学习过 transform 的同学拿来练习,也比较适合前端大能拿来复习CSS 。素材来源于 “ 站长之家 ”
故事是这样的: 当我看到这个动画时,并没有太大的触动。当我想要关闭它时,我突然好奇它是如何绘制一个平行四边形的。 百度给了我三种答案,看图一目了然
我把文件夹的 分析图 和源码 放在这里,有喜欢的朋友可以拿去试一试。 ——底部有问答
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3文件夹悬停打开</title>
<style>
body {
background-color:#1e1f26;
}
body .folder {
cursor:pointer;
position:absolute;
top:50%;
left:50%;
margin-right:-50%;
transform:translate(-50%,-50%);
background-color:#FFD485;
width:200px;
height:150px;
border-radius:10px;
}
body .folder:before {
width:55px;
height:25px;
border-radius:5px;
content:'';
background-color:#FFD485;
position:absolute;
top:-10px;
left:0px;
}
body .folder:after {
display:block;
width:200px;
height:150px;
border-radius:10px;
content:'';
transform:skew(0deg);
background-color:#ffe1a8;
transition:all .2s;
}
body .folder .paper {
position:absolute;
top:50%;
left:50%;
margin-right:-50%;
transform:translate(-50%,-50%);
background-color:whitesmoke;
width:190px;
height:140px;
transition:all .2s;
}
body .folder .paper.one {
background-color:#ffadad;
}
body .folder .paper.two {
background-color:#ffd6a5;
}
body .folder .paper.three {
background-color:#fdffb6;
}
body .folder .paper.four {
background-color:#9bf6ff;
}
body .folder:hover:after {
transform:skew(-20deg);
margin-left:25px;
}
body .folder:hover .paper:nth-child(1) {
transform:rotate(10deg) translate(-80px,-80px);
}
body .folder:hover .paper:nth-child(2) {
transform:rotate(20deg) translate(-80px,-80px);
}
body .folder:hover .paper:nth-child(3) {
transform:rotate(30deg) translate(-80px,-80px);
}
body .folder:hover .paper:nth-child(4) {
transform:rotate(40deg) translate(-80px,-80px);
}
</style>
</head>
<body>
<div class="folder">
<div class="paper one"></div>
<div class="paper two"></div>
<div class="paper three"></div>
<div class="paper four"></div>
</div>
</body>
</html>
如有疑问或更优解答请评论在下方或私信本人,本人常在,钟爱动画制作。
问:能用你学过的 CSS 制作出七巧板吗?
不辜负每一份真情,不嘲笑每一个正在努力的人,力所能及的对别人施以援手,每天都要强化自己,洗去铅华才能绽放光芒。
- 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 实例
- python小例子(二)
- 面试题系列第1篇:说说==和equals的区别?你的回答可能是错误的
- django-URL转换器(四)
- 【猫狗数据集】加载保存的模型进行测试
- 【猫狗数据集】划分验证集并边训练边验证
- 【猫狗数据集】使用学习率衰减策略并边训练边测试
- 面试题系列第2篇:new String()创建几个对象?有你不知道的
- spring之整合struts2
- django-URL之include函数(五)
- springmvc之使用ModelAttribute避免不允许被修改的值更新时为空
- 【colab pytorch】使用tensorboard可视化
- django-URL别名的作用(六)
- springmvc之如何确定目标方法Pojo类型的参数?
- 【colab pytorch】使用tensorboardcolab可视化
- 实用,完整的HTTP cookie指南