当前位置: 首页 > Web前端 > HTML5

前端日常实践:3#视频演示如何用纯CSS制作容器粗条纹边框效果

时间:2023-04-04 23:26:52 HTML5

效果预览在当前页面点击右侧“点击预览”按钮进行预览,点击链接进行预览全屏显示。https://codepen.io/zhang-ou/pen/YLqbXy交互式视频教程本视频是交互式的,您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cPvn6tE源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/003-diagonal-stripe-border-effects代码解读定义了一个名为box的容器:/div>内容中心显示:html,body{height:100%;显示:弹性;对齐项目:居中;justify-content:center;}绘制条纹背景:.box{width:300px;高度:300px;背景:线性渐变(-45deg,白色0%,白色25%,hotpink25%,hotpink50%,白色50%,白色75%,hotpink75%,hotpink100%);background-size:10%;}inbox在容器中定义一个名为content的容器:

box容器留有粗边框,内容容器嵌入其中:.box。内容{高度:100%;显示:弹性;对齐项目:居中;调整内容:居中;}.box{box-sizing:border-box;padding:15px;}.box.content{background-color:white;}设置粗边框立体效果:.box,.box.content{box-shadow:002pxdeeppink,005pxrgba(0,0,0,1),插图005pxrgba(0,0,0,1);border-radius:10px;}content添加以下内容:

LoremIpsum

Maurisvolutpatrisusquisnisitempushendrerit.没有投票箱,suscipitquisrisusthirst,congueconguequam。Morbi和疑似前任坐在一起。

内容布局:.box.content{flex-direction:column;框大小调整:边框框;填充:30px;文本对齐:居中;font-family:sans-serif;}.box.contenth2{color:deeppink;}.box.contentp{color:dimgray;}定义动画效果:@keyframesanimate{from{background-position:0;}到{背景-位置:10%;}}最后,将动画效果应用于盒子容器:.box{Animation:Animate2sLinearInfinity;}就大功告成了!知识点Linear-Gradienthttps://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradientbox-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow@keyframeshttps://developer.mozilla.org/en-US/docs/Web/CSS/@keyframesbackground-sizehttps//developer.mozilla.org/en-US/docs/Web/CSS/background-sizebackground-positionhttps://developer.mozilla.org/en-US/docs/Web/CSS/background-positionloremipsumhttps://lipsum.com/