CSS简笔画:纯CSS绘制一艘邮轮
本节你能get到什么前端知识
1、CSS 变量
2、CSS 伪类的灵活使用
3、CSS 绘制 梯形、箭头、转发箭头
4、CSS 相对定位和绝对定位
5、CSS transform 变形
6、CSS box-shadow
7、CSS Flex布局
看图解构
1、梯形船体
2、中间部分有一个镂空的梯形
3、船体上有船名、船锚
4、甲板上有护栏
5、船上有货物
6、还有一根旗杆
解构后发现东西并不多!
梯形船体
<div class="ship">
<div class="ship-body"></div>
</div>
:root{
--seaColor:#54a0ff;
--lineColor: #fff;
--enclosureColor: #000;
}
body {
width: 100%;
height: 100vh;
}
.ship{
position: absolute;
width: 480px;
height: 150px;
left: 50%;
top: 50%;
margin-left: -240px;
margin-top: -75px;
}
.ship-body{
position: absolute;
width: 480px;
height: 150px;
background: var(--seaColor);
transform: rotate(180deg) perspective(3em) rotateX(9deg);
z-index: 1;
left: 50%;
top: 50%;
margin-left: -240px;
margin-top: -75px;
}
这里用到了元素水平垂直居中的另外一种方式,让元素绝对定位,然后left/top=50%,然后margin-left/top=负元素宽度的一半,就可以居中了。
船体镂空梯形
这个也就非常简单了,在制作个小一些的白色梯形,覆盖到船体上方即可。
<div class="ship">
...
<div class="ship-body-out"></div>
</div>
.ship-body-out{
position: absolute;
width: 305px;
height: 36px;
background: var(--lineColor);
transform: rotate(180deg) perspective(1em) rotateX(6deg);
z-index: 1;
left: 66px;
top: -30px;
}
细心的小伙伴可能就发现了,图一的左右不是一般高,上图却是一样高的,我只能说,你眼神真好!
我们在用伪类,盖住一部分高度去
.ship-body-out:after{
position: absolute;
display: block;
content: '';
background: var(--lineColor);
height: 10px;
width: 133px;
left: 305px;
top: 19px;
}
船名
每艘船都一个属于它自己的名字,和人名一样。比较有名的,如:定远号(亚洲第一舰)、长城号、东风号等。
下面也为咱们的船弄个名字上去
<div class="ship">
...
<div class="ship-name">Web秀号</div>
</div>
.ship-name{
position: absolute;
z-index: 1;
text-align: center;
width: 100%;
color: #fff;
font-size: 18px;
top: 50px;
}
.ship-name:after, .ship-name:before {
position: absolute;
content: '';
display: block;
width: 10px;
height: 10px;
top: 10px;
border-radius: 100%;
--disance: 120px;
}
.ship-name:after{
right: var(--disance);
box-shadow:
-10px 0px,
-30px 0px,
-50px 0px;
}
.ship-name:before{
left: var(--disance);
box-shadow:
10px 0px,
30px 0px,
50px 0px;
}
伪类主要是用来主要是用来展示名字两旁的点(专业名词作者不知道,希望有专业的小伙伴告知一下),点的个数主要是用box-shadow
实现。
box-shadow
多阴影的宽高,圆角都继承元素本身的宽高,圆角,这里也就是伪类的宽高,然后box-shadow
主要控制多阴影的个数和位置,前面的值是X坐标,后面的是Y坐标,同时还可以在后面添加颜色。
船锚
<div class="ship">
...
<div class="ship-anchor">
<div class="anchor">
<div class="anchor-left"></div>
<div class="anchor-right"></div>
</div>
</div>
</div>
.ship-anchor{
position: absolute;
z-index: 1;
width: 100%;
top: 20px;
}
.ship-anchor .anchor{
position: absolute;
width: 30px;
height: 30px;
border: 5px solid var(--lineColor);
border-radius: 100%;
right: 30px;
}
.ship-anchor .anchor:after{
position: absolute;
content: '';
display: block;
width: 5px;
height: 20px;
background: var(--lineColor);
margin-left: -2.5px;
left: 50%;
top: 25px;
}
到这里还非常简单,就是普通的一个同心圆和一个矩形,组成的形状。然后添加锚的钩子
.anchor-left {
position: absolute;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid var(--lineColor);
transform: rotate(163deg);
left: -22px;
top: 32px;
}
.anchor-left:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 4px solid var(--lineColor);
border-radius: 50px 0 0 0;
top: -18px;
left: -26px;
width: 34px;
height: 15px;
transform: rotate(45deg);
}
.anchor-right {
position: absolute;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid var(--lineColor);
transform: rotateX(150deg);
left: 31px;
top: 27px;
}
.anchor-right:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 4px solid var(--lineColor);
border-radius: 50px 0 0 0;
top: -18px;
left: -26px;
width: 34px;
height: 15px;
transform: rotate(45deg);
}
护栏
<div class="ship">
...
<div div class="ship-head-enclosure"></div>
<div class="ship-center-enclosure"></div>
<div class="ship-foot-enclosure"></div>
</div>
护栏有3段,船头、船中和船尾。然后分别调试取得宽度(F12,和现有船体对齐),然后利用box-shadow
一一实现护栏样式。
主要是先用个黑色背景,然后横向画出多个白色正方形块,每个块之间错位一个像素,这样就可以看到块与块之间的黑色部分了。然后top距离容器1px,上方的底色也就可以看到。下地就不用了,让容器高度刚好多出2个像素,底部底色就可以显示出来
- 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 实例
- let和var和const
- Jupyter 编写python代码实现代码自动补齐功能设置实例演示
- 第37期:从头学二叉搜索树(面试常考)
- Jupyter 工具的安装与使用方法,jupyter运行python代码演示,好用的python编辑器推荐!
- Nginx相关配置与操作
- Python 技术篇-全局与当前socket超时连接时间设置方法实例演示,查看socket超时连接时间
- 给 JDK 报了一个 P4 的 Bug,结果居然……
- Python 套接字-判断socket服务端有没有关闭的方法实例演示,查看socket运行状态
- docker安装logstash
- Rook Operator 源码分析(1) - osd 启动的流程
- Python 技术篇-利用pyqt5库监听剪切板变动,clipboard.dataChanged.connect()剪切板监听
- 关于MySQL server has gone away
- PyQt5 技术篇-在clipboard.dataChanged.connect()里如何写入剪切板示例演示,pyqt5监听剪切板变动并写入剪切板内容
- 去除WordPress链接中出现的index.php
- MySQL 语法问题:You can‘t specify target table ‘xxx‘ for update in FROM clause. 原因及解决方法