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

HTML code:

<!-- steamer: 蒸锅; lid: 盖子; pot: 锅 -->
<div class="steamer">
<div class="lid"></div>
<div class="pot"></div>
</div>

CSS code:

html, body {
margin:;
padding:;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right bottom, violet, midnightblue);
}
/* 定义.steamer容器尺寸 */
.steamer {
font-size: 10px;
width: 30em;
height: 30em;
border-radius: 50%;
/* border: 1px solid white;*/
background-color: snow;
/* 设置.steamer中的元素水平垂直居中而且是垂直排列 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; z-index:;
}
/* 画出锅(底座) */
.pot {
position: relative;
width: 16em;
height: 12em;
background: darkslateblue;
border-radius: 0.5em 0.5em 6.5em 6.5em;
/* 右边框造出的阴影 */
border-right: 1.5em solid midnightblue;
}
/* 画出锅把手 */
.pot::before {
content: '';
width: 27em;
height: 2.5em;
background-color: tomato;
position: absolute;
left: -4.75em;
top: 2em;
z-index: -1;
}
/* 为锅体增加光影 */
.pot::after {
content: '';
position: absolute;
width: 8em;
height: 8em;
border: 0.6em solid transparent;
border-radius: 50%;
border-left-color: white;
transform: rotate(-60deg);
top: 1em;
left: 2em;
}
/* 画出锅盖 */
.lid {
width: 17em;
height: 6em;
background-color: gold;
position: relative;
border-radius: 6em 6em 0 0;
border-right: 1.5em solid goldenrod;
/* 动画效果 */
transform: translateY(-0.5em);
animation: animate 1s infinite alternate;
}
@keyframes animate{
to{
transform: translateY(0.5em);
}
}
/* 画出锅盖上的钮扣把手 */
.lid::before {
content: '';
position: absolute;
width: 4em;
height: 4em;
background-color: tomato;
border-radius: 50%;
left: 7em;
top: -2.5em;
}
/* 为锅盖增加光影 */
.lid::after {
content: '';
position: absolute;
width: 7em;
height: 7em;
border: 0.6em solid transparent;
border-radius: 50%;
border-left-color: white;
transform: rotate(40deg);
top: 0.6em;
left: 2.5em;
}

62.纯 CSS 创作一只蒸锅(感觉不好看呀)的更多相关文章

  1. 前端每日实战:62# 视频演示如何用纯 CSS 创作一只蒸锅

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

  2. 61.纯 CSS 创作一只咖啡壶(这个不好看)

    原文地址:https://segmentfault.com/a/1190000015376202 感想: 好像不像呀,啊啊啊.伪元素.定位.动画.width和height包括内边距|边框|内容区. H ...

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

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

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

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

  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. 8.7 C++二进制文件读写操作

    参考:http://www.weixueyuan.net/view/6413.html 总结: 二进制文件的读写稍微麻烦一些,对二进制文件的读写同样需要打开文件和关闭文件,打开和关闭方式与文本文件相同 ...

  2. @lazy注解处理循环注入问题

    @Service public class A extends GenericBaseService { @Autowired private B b; } @Service public class ...

  3. cocos2dx解决中文乱码方法

    使用plist文件,优点方便做多国语言支持~也不用去做编码转换 1.Resource目录下新建text.plist文件,内容格式如下 <?xml version="1.0" ...

  4. spring-task解决定时问题

    *  spring3以上版本,spring-content自带 spring-task ,来解决工程中的定时问题  基于注解配置spring定时任务 spring配置文件如下: <?xml ve ...

  5. Maven用途

    1.使用Maven编译项目,命令是:“mvncompile” 在命令行中,进入pom.xml所在目录,输入命令即可. 2.使用Maven清理项目,命令是:“mvnclean” 3.使用Maven测试项 ...

  6. Django请求流程图

    Django请求流程图

  7. 100道JS构造函数面试题

    1. var User = { count: 1, getCount: function () { return this.count; } }; console.log(User.getCount( ...

  8. 账户和联系人 Accounts and Contacts 译

    原文链接: https://crmbook.powerobjects.com/basics/searching-and-navigation/understanding-accounts-and-co ...

  9. laravel 使用 php artisan make:model到指定目录(controller同理)

    在 \app\Models 目录下创建一个BusinessProduct模型文件 D:\htdocs\PHPTutorial\WWW\gf>php artisan make:model /Mod ...

  10. Zookeeper的下载、安装和启动

    一.下载Zookeeper 版本 zookeeper-3.4.13 下载地址:https://archive.apache.org/dist/zookeeper/ 解压后放在/usr/local/zo ...