摘要:代码解读定义一个名为的容器内容居中显示画条纹背景在容器内定义一个名为的容器容器留出厚边框,容器嵌在其中设置厚边框的立体效果容器中增加内容内容布局定义动画效果最后,把动画效果应用到容器上大功告成知识点
效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
https://codepen.io/zhang-ou/pen/YLqbXy
可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/c/cPvn6tE
源代码下载请从 github 下载。
https://github.com/comehope/front-end-daily-challenges/tree/master/003-diagonal-stripe-border-effects
代码解读定义一个名为 box 的容器:
内容居中显示:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; }
画条纹背景:
.box { width: 300px; height: 300px; background: linear-gradient( -45deg, white 0%, white 25%, hotpink 25%, hotpink 50%, white 50%, white 75%, hotpink 75%, hotpink 100%); background-size: 10%; }
在 box 容器内定义一个名为 content 的容器:
box 容器留出厚边框,content 容器嵌在其中:
.box .content { height: 100%; display: flex; align-items: center; justify-content: center; } .box { box-sizing: border-box; padding: 15px; } .box .content { background-color: white; }
设置厚边框的立体效果:
.box, .box .content { box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1); border-radius: 10px; }
content 容器中增加内容:
What is Lorem Ipsum?
Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risus sed, congue congue quam. Morbi sit amet suscipit ex. Vivamus vel nulla ac libero volutpat ultrices.
内容布局:
.box .content { flex-direction: column; box-sizing: border-box; padding: 30px; text-align: center; font-family: sans-serif; } .box .content h2 { color: deeppink; } .box .content p { color: dimgray; }
定义动画效果:
@keyframes animate { from { background-position: 0; } to { background-position: 10%; } }
最后,把动画效果应用到 box 容器上:
.box { animation: animate 2s linear infinite; }
大功告成!
知识点linear-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
@keyframes https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
background-position https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
lorem ipsum https://lipsum.com/
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52243.html
摘要:代码解读定义一个名为的容器内容居中显示画条纹背景在容器内定义一个名为的容器容器留出厚边框,容器嵌在其中设置厚边框的立体效果容器中增加内容内容布局定义动画效果最后,把动画效果应用到容器上大功告成知识点 showImg(https://segmentfault.com/img/bVbcWRf?w=500&h=500); 效果预览 按下右侧的点击预览按钮在当前页面预览,点击链接全屏预览。 h...
摘要:前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书以下是年月份发布的项目视频演示如何用纯创作一个按钮文字滑动特效视频演示如何用纯创作一个矩形旋转特效视频演示如何用纯创作一个容器厚条纹边 《前端每日实战》专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书! 以下是 2018 年 4 月份发...
摘要:前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书以下是年月份发布的项目视频演示如何用纯创作一个按钮文字滑动特效视频演示如何用纯创作一个矩形旋转特效视频演示如何用纯创作一个容器厚条纹边 《前端每日实战》专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书! 以下是 2018 年 4 月份发...
阅读 1656·2021-10-09 09:44
阅读 3229·2021-09-27 13:36
阅读 1471·2021-09-22 15:33
阅读 1243·2021-09-22 15:23
阅读 1133·2021-09-06 15:02
阅读 1644·2019-08-29 16:14
阅读 2864·2019-08-29 15:26
阅读 2374·2019-08-28 18:08