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

前端日常实践:30#视频演示如何用纯CSS制作抖音公告板

时间:2023-04-05 17:57:01 HTML5

效果预览。按右边的“点击预览”按钮可以在当前页面进行预览,点击链接可以全屏预览。https://codepen.io/comehop??e/pen/wjZoGV互动视频教程本视频为互动视频,您可以随时暂停视频,编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cD8yKHb源码下载前端日常实战系列完整源码请到github下载:https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom,容器包含一个布告栏、挂布告栏的绳子和3个固定绳子的别针:THANKS

/div>居中显示:html,body{width:100%;高度:100%;显示:弹性;对齐项目:居中;证明内容:居中;background:radial-gradient(circleatcenter60%,white,sandybrown);}定义广告牌广告牌的整体尺寸:.signboard{width:400px;height:300px;}设置板的样式:.signboard{position:relative;}.sign{width:100%;高度:200px;背景:伯莱伍德;边界半径:15px;位置:绝对;bottom:0;}设置带有雕刻效果的文字样式:.sign{color:saddlebrown;字体系列:无衬线;字体粗细:粗体;文本对齐:居中;行高:200px;文字阴影:02px0rgba(255,255,255,0.3),0-2px0rgba(0,0,0,0.7);}绘制字符串:.strings{width:150px;高度:150px;边框:5px实心棕色;位置:绝对;右边界:无;底部边框:无;变换:旋转(45度);顶部:38px;左:122px;图钉:.pin{宽度:25px;高度:25px;边界半径:50%;位置:绝对;}.pin.top{背景:灰色;left:187px;}在板子的左右两侧绘制图钉:.pin.left,.pin.right{背景:棕色;顶部:110px;box-shadow:02px0rgba(255,255,255,0.3);}.pin.left{left:80px;}.pin.right{right:80px;}最后让招牌晃一下:(这个已经根据小雷的建议修改为使用顶针作为旋转轴,比原来的效果更好)。signboard{animation:swing1.5sease-in-outinfinitealternate;transform-origin:200px13px;}@keyframesswing{from{transform:rotate(10deg);}到{变换:旋转(-10deg);}}你完成了!