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 可交互视频 此视频是可 ...
随机推荐
- 2.3 利用FTP服务器下载和上传文件
二.利用FTP服务器的下载文件 from ftplib import FTP from os.path import exists def getfile(file,site,dir,user=(), ...
- nginx——控制 Nginx 并发连接数
1. 限制单个 IP 的并发连接数 .... http { include mime.types; default_type application/octet-stream; sendfile on ...
- 2019-04-16-day033-锁与队列
内容回顾 几个问题 概念多,练习少 不问问题 概念?代码? Process类 并发并行 并发 是同一时间段内多个任务交替使用同一个cpu 并行 是在同一个时刻多个任务在不同的cpu上同时执行 同步异步 ...
- phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接 解决办法
phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接.您应该检查配置文件中的主机.用户名和密码,并确认这些信息与 MySQL 服务器管理员所给出的信息一致. 原因有可能是因为修改了m ...
- 初见 fultter for MAC
第一步:下载flutter https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos 第二步:(development ...
- 公众号及H5支付
本篇主要记录微信支付中公众号及H5支付全过程. 1|1准备篇 公众号或者服务号(并开通微信支付功能).商户平台中开通JSAPI支付.H5支付. 1|2配置篇 公众号或者服务号中 -------开发-- ...
- 整数的故事(4)——Karastuba算法
我们在小学就学过用竖式计算两个多位数的乘法: 这个过程简单而繁琐,没有最强大脑的普通大众通常是用计算器代替的.然而对于超大整数的乘法,计算器也未必靠得住,它还存在“溢出”一说.这就需要我们自行编写算法 ...
- 第3章 Vim使用笔记
3.1 vi使用map自定义快捷方式 [想要永久保存定义的快捷键在-/.vimrc[进入root后才能看到~/.vimrc文件]中编辑保存即可!] set nu 输入下列命令[:map <spe ...
- 让所有浏览器支持HTML5 video视频标签
HTML5究竟需要多少种视频编码格式 当前,video 元素支持三种视频格式:Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编 ...
- linq 实现对象映射
public static string GetPrintList(string data) { string[] _data = data.Split(','); string Order_No = ...