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 可交互视频 此视频是可 ...
随机推荐
- mysql一些常用配置
清空表: truncate table 表名 让id重1开始 alter table `test` auto_increment=1
- Mad Libs游戏 & 华氏温度与摄氏温度转换
Mad Libs游戏 animal1 = input("请输入一种动物") animal2 = input("请输入一种动物") movement1 = inp ...
- Verilog HDL按位操作符与归约操作符的区别
sdaPipe <= {`DEB_I2C_LEN{1'b1}}; {{}} 为一种赋值运算符,将一个表达式放入双重花括号中,而复制因子放在第一层花括号中,用来指定复制的次数. { }表示拼接,{ ...
- Cordova使用极光推送的方法
1.在极光推送官网注册账号.应用,注意注册的包名要和app的包名一致 2.添加插件 cordova plugin add jpush-phonegap-plugin --variable APP_KE ...
- ecmall 学习记录3
1.在ecmall.php 中 336行有一个函数 function lang_file($file) { return ROOT_PATH . '/languages/' . LANG . '/' ...
- ArcSDE账户频繁被锁定(Oracle显示12560协议适配器错误)
最近遇到了一个比较奇葩的问题,启动系统的时候无法显示地图服务,查找原因时发现无法连接Oracle.出现以下错误: 之前遇到这种问题,通常是由于同时安装了64位和32位Oracle客户端,且二者的环境变 ...
- list实现大整数加法
#include<iostream> #include<list> #include<string> using namespace std; list<in ...
- PythonStudy——比较运算符 Comparison operator
1.运算结果为bool类型 print(3 > 5) Output: False 2.可以连比 num = 10 print(1 < num < 20)# 与之上的等价写法是: pr ...
- 01python语言程序设计基础——初识python
1.python的字符串中format函数用法 format 函数可以接受不限个参数,位置可以不按顺序. In [2]: "{} {}".format("hello& ...
- java设计模式--UML类图
2016-06-07 22:46:16 下面简单介绍UML类图:(图是截取的,大家可以用UML工具去画) 1.描述类的类图 类:Person 属性:name age sex 访问权限:- 表 ...