【70.纯 CSS 创作一只徘徊的果冻怪兽】的更多相关文章

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

原文地址:https://segmentfault.com/a/1190000015484852 感想:monster中边框角.上下动画.旋转动画.左右动画,眼睛中transform:scaleY(n); HTML code: <!-- monster包含其body和eyes --> <div class="monster"> <span class="body"></span> <span class=&quo…

前端每日实战：70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/c43ekUL 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f…

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

效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdOKQG 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/c43ekUL 源代码下载 本地下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/…

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

原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位. HTML code: <div class="fox"> <div class="head"> <span class="faces"></span> <span class="ey…

62.纯 CSS 创作一只蒸锅（感觉不好看呀）

原文地址:https://segmentfault.com/a/1190000015389338 HTML code: <!-- steamer: 蒸锅: lid: 盖子: pot: 锅 --> <div class="steamer"> <div class="lid"></div> <div class="pot"></div> </div> CSS code…

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

原文地址:https://segmentfault.com/a/1190000015376202 感想: 好像不像呀,啊啊啊.伪元素.定位.动画.width和height包括内边距|边框|内容区. HTML code: <!-- 定义 dom,容器中包含 1 个元素表示壶体,其中再包含 1 个元素表示壶把手 --> <div class="container"> <div class="pot"> <div class=&q…

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

原文地址:https://segmentfault.com/a/1190000015339977 优化后效果地址:https://scrimba.com/c/c97Z2vuD 感想:消除了图片外的:hover触发过渡效果 HTML code: <div class="parrot"> <div class="outer"></div> <div class="middle"></div>…

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

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBzLdy 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cGENVuR 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f…

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

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/aaoveW 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/c3q28tB 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f…

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

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VBGWqX 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cVweZAr 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f…