61.纯 CSS 创作一只咖啡壶(这个不好看)
原文地址:https://segmentfault.com/a/1190000015376202
感想: 好像不像呀,啊啊啊。伪元素、定位、动画、width和height包括内边距|边框|内容区。
HTML code:
<!-- 定义 dom,容器中包含 1 个元素表示壶体,其中再包含 1 个元素表示壶把手 -->
<div class="container">
<div class="pot">
<div class="handle"></div>
</div>
</div>
CSS code:
html, body {
margin:;
padding:;
}
*,
*::before,
*::after{
/* 设置元素的width、height包括内边距、边框、内容区 */
box-sizing: border-box;
}
/* 设置body的子元素水平垂直居中 */
body{
height: 100vh;
display: flex;
/* 排不下就换行 */
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
background: linear-gradient(to right bottom, silver, dimgray);
}
/* 设置容器样式 */
.container {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: snow;
display: flex;
justify-content: center;
align-items: center;
animation: pouring 3s linear infinite alternate;
}
/* 再用伪元素给壶加上光影 */
.container::after {
content: '';
position: absolute;
width: 70px;
height: 70px;
border: 3px solid transparent;
border-left-color: white;
border-radius: 50%;
left: 40px;
top: 40px;
transform: rotate(-10deg);
}
@keyframes pouring {
0%, 25% {
transform: rotate(0deg);
} 75%, 100% {
transform: rotate(-45deg);
}
}
.pot {
position: relative;
width: 85px;
height: 85px;
/* 阴影 */
border-right: 5px solid steelblue;
border-radius: 50%;
background-color: deepskyblue;
}
/* 用伪元素画出壶的上半部分 */
.pot::before {
content: '';
position: absolute;
width: 85px;
height: 43px;
border-right: 5px solid palevioletred;
border-radius: 43px 43px 0 0;
background-color: hotpink;
}
/* 用伪元素画出壶嘴 */
.pot::after {
content: '';
width: 43px;
height: 10px;
position: absolute;
left: 21px;
top: -3px;
background-color: hotpink;
}
/* 画出把手横向的部分 */
.pot .handle {
width: 83px;
height: 7px;
border-radius: 7px;
background-color: black;
position: absolute;
left: 13px;
top: 12px;
}
/* 用伪元素画出把手竖向的部分: */
.pot .handle::before {
content: '';
width: 7px;
height: 50px;
border-radius: 7px;
background-color: black;
position: absolute;
left: calc(85px - 7px);
}
61.纯 CSS 创作一只咖啡壶(这个不好看)的更多相关文章
- 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZRjGGy 可交互视频 此视频是可 ...
- 73.纯 CSS 创作一只卡通狐狸
原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位 ...
- 70.纯 CSS 创作一只徘徊的果冻怪兽
原文地址:https://segmentfault.com/a/1190000015484852 感想:monster中边框角.上下动画.旋转动画.左右动画,眼睛中transform:scaleY(n ...
- 62.纯 CSS 创作一只蒸锅(感觉不好看呀)
原文地址:https://segmentfault.com/a/1190000015389338 HTML code: <!-- steamer: 蒸锅: lid: 盖子: pot: 锅 --& ...
- 58.纯 CSS 创作一只卡通鹦鹉
原文地址:https://segmentfault.com/a/1190000015339977 优化后效果地址:https://scrimba.com/c/c97Z2vuD 感想:消除了图片外的:h ...
- 前端每日实战:103# 视频演示如何用纯 CSS 创作一只监视眼
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBzLdy 可交互视频 此视频是可 ...
- 前端每日实战:111# 视频演示如何用纯 CSS 创作一只艺术的鸭子
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/aaoveW 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一只徘徊的果冻怪兽
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 ...
- 前端每日实战:98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VBGWqX 可交互视频 此视频是可 ...
随机推荐
- 还是畅通工程,最小生成树kruskal
题目描述: 某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可 ...
- linux之创建用户
用户 useradd xxx 创建用户 默认是普通用户 useradd -u666 web 创建新用户 设置id号 groupadd -g 777 ...
- 双跑道------js分机号
博客园 首页 新随笔 联系 管理 订阅 随笔- 310 文章- 0 评论- 134 [tomcat]启动报错:Failed to initialize end point associated ...
- Windows文件夹、文件源代码对比工具--WinMerge
/********************************************************************** * Windows文件夹.文件源代码对比工具--WinM ...
- 读书笔记--《gongchandang宣言》
纪念马克思诞辰200周年 末尾 gongchandang人不屑于隐瞒自己的观点和意图.他们公开宣布:他们的目的只有用暴力推翻全部现存的社会制度才能达到. 让统治接机在共产主义革命面前发抖吧. 无产者在 ...
- nginx+keepalived实现高可用
参看文献 https://blog.csdn.net/u012410733/article/details/57078407 nginx的安装,这里就不再讲了 这里使用了两台服务器 192.168.3 ...
- 超级简单的数据压缩算法—LZW算法
1. 前文回顾 在字符串算法—数据压缩中,我们介绍了哈夫曼压缩算法(Huffman compression),本文将介绍LZW算法. 2. LZW算法 这个算法很简单,为了方便讲述,我们将采用16进制 ...
- eclipse中,将springboot项目打成jar包
1.右击项目,选择Run As - Maven clean 2.右击项目,选择Run As - Maven install 3.成功后 会在项目的target文件夹下生成jar包 4.将打包好的jar ...
- Redis使用规范
突出强调部分 [强制]key名不要包含特殊字符,如空格.换行.单双引号以及其他转义字符 [强制]拒绝bigkey(防止网卡流量.慢查询) [强制]控制key的生命周期,redis不是垃圾桶 [强制]技 ...
- day45 jQuery
在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. 书写很繁琐,代码量多. 代码很乱,各个页面到处都是. 动 ...