60.纯 CSS 创作一块乐高积木

【60.纯 CSS 创作一块乐高积木】的更多相关文章

60.纯 CSS 创作一块乐高积木

原文地址:https://segmentfault.com/a/1190000015369542 感想:y轴旋转,相对定位,今天有点懵呀,唉. HTML code:   <div class="brick"> <div class="sides"> <span class='front…

前端每日实战：60# 视频演示如何用纯 CSS 创作一块乐高积木

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

3.纯 CSS 创作一个容器厚条纹边框特效

原文地址:3.纯 CSS 创作一个容器厚条纹边框特效没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class="content"> <h2>What is Lorem Ipsum?</h2> <p>Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risu…

2.纯 CSS 创作一个矩形旋转 loader 特效

原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HTML代码: <div class="loader"> <span></span> <span></span> <span></span> </div> CSS代码: /* 居中显示 */ htm…

1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div class="animation">唉,没有啥新想法添加...</…

74.纯 CSS 创作一台 MacBook Pro

原文地址:https://segmentfault.com/a/1190000015568609 HTML code: <div class="macbook"> <span class="screen"></span> <span class="base"></span> </div> CSS code: html, body { margin:; padding:; }…

69.纯 CSS 创作一个单元素抛盒子的 loader

原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loader"></div> CSS code: html, body { margin:; padding:; } /* 设置body子元素水平垂直居中 */ body { height: 100vh; display: flex; justify-content: center; ali…

57.2拓展之纯 CSS 创作黑暗中会动的眼睛和嘴巴

效果地址:https://scrimba.com/c/cbNkBnuV HTML code:  <div class="eyes"> <span class="left"></span> <span class="right"></span> </div> CSS code: html, body { m…

57.1拓展之纯 CSS 创作黑暗中的眼睛和嘴巴

效果地址:https://scrimba.com/c/cJ8NPpU2 HTML code: <div class="eyes"> <span class="left"></span> <span class="right"></span> </div> CSS code: html, body { margin:; padding:; } /* 设置body的子元素水平垂直…

57.纯 CSS 创作一双黑暗中的眼睛

原文地址:https://segmentfault.com/a/1190000015327725 感想:原来边框还能这样玩-->做会眨眼的眼睛 HTML code: <div class="eyes"> <span class="left"></span> <span class="right"></span> </div> CSS code: html, body…