原文地址: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 创作一只咖啡壶(这个不好看)的更多相关文章

  1. 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶

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

  2. 73.纯 CSS 创作一只卡通狐狸

    原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位 ...

  3. 70.纯 CSS 创作一只徘徊的果冻怪兽

    原文地址:https://segmentfault.com/a/1190000015484852 感想:monster中边框角.上下动画.旋转动画.左右动画,眼睛中transform:scaleY(n ...

  4. 62.纯 CSS 创作一只蒸锅(感觉不好看呀)

    原文地址:https://segmentfault.com/a/1190000015389338 HTML code: <!-- steamer: 蒸锅: lid: 盖子: pot: 锅 --& ...

  5. 58.纯 CSS 创作一只卡通鹦鹉

    原文地址:https://segmentfault.com/a/1190000015339977 优化后效果地址:https://scrimba.com/c/c97Z2vuD 感想:消除了图片外的:h ...

  6. 前端每日实战:103# 视频演示如何用纯 CSS 创作一只监视眼

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

  7. 前端每日实战:111# 视频演示如何用纯 CSS 创作一只艺术的鸭子

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

  8. 如何用纯 CSS 创作一只徘徊的果冻怪兽

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

  9. 前端每日实战:98# 视频演示如何用纯 CSS 创作一只愤怒小鸟中的绿猪

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

随机推荐

  1. 还是畅通工程,最小生成树kruskal

    题目描述:     某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可 ...

  2. linux之创建用户

    用户 useradd   xxx        创建用户   默认是普通用户 useradd    -u666   web       创建新用户    设置id号 groupadd   -g 777 ...

  3. 双跑道------js分机号

    博客园 首页 新随笔 联系 管理 订阅 随笔- 310  文章- 0  评论- 134  [tomcat]启动报错:Failed to initialize end point associated ...

  4. Windows文件夹、文件源代码对比工具--WinMerge

    /********************************************************************** * Windows文件夹.文件源代码对比工具--WinM ...

  5. 读书笔记--《gongchandang宣言》

    纪念马克思诞辰200周年 末尾 gongchandang人不屑于隐瞒自己的观点和意图.他们公开宣布:他们的目的只有用暴力推翻全部现存的社会制度才能达到. 让统治接机在共产主义革命面前发抖吧. 无产者在 ...

  6. nginx+keepalived实现高可用

    参看文献 https://blog.csdn.net/u012410733/article/details/57078407 nginx的安装,这里就不再讲了 这里使用了两台服务器 192.168.3 ...

  7. 超级简单的数据压缩算法—LZW算法

    1. 前文回顾 在字符串算法—数据压缩中,我们介绍了哈夫曼压缩算法(Huffman compression),本文将介绍LZW算法. 2. LZW算法 这个算法很简单,为了方便讲述,我们将采用16进制 ...

  8. eclipse中,将springboot项目打成jar包

    1.右击项目,选择Run As - Maven clean 2.右击项目,选择Run As - Maven install 3.成功后 会在项目的target文件夹下生成jar包 4.将打包好的jar ...

  9. Redis使用规范

    突出强调部分 [强制]key名不要包含特殊字符,如空格.换行.单双引号以及其他转义字符 [强制]拒绝bigkey(防止网卡流量.慢查询) [强制]控制key的生命周期,redis不是垃圾桶 [强制]技 ...

  10. day45 jQuery

    在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. 书写很繁琐,代码量多. 代码很乱,各个页面到处都是. 动 ...