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

前端日常实践:49#视频演示了如何用纯CSS制作出诱人的冰棒

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

效果预览。按右边的“点击预览”按钮可以在当前页面进行预览,点击链接可以全屏预览。https://codepen.io/comehop??e/pen/vrxzMw交互式视频教程本视频是交互式的,您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cnpZEAZ源码下载日常前端实战系列完整源码请到github下载:https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom,容器包含2个元素:

居中显示:body{margin:0;高度:100vh;显示:弹性;对齐项目:居中;证明内容:居中;background-color:darkslategray;}绘制冰棒的形状:.flavors{width:19em;高度:26em;字体大小:10px;border-radius:8em8em1em1em;}给冰棒上色:.flavors{position:relative;溢出:隐藏;}.flavors::before{内容:'';位置:绝对;宽度:140%;高度:120%;背景:线性渐变(hotpink0%,hotpink25%,deepskyblue25%,deepskyblue50%,gold50%,gold75%,lightgreen75%,lightgreen100%);z-指数:-1;左:-20%;transform:rotate(-25deg);}一点灯光效果:.flavors::在{内容:''之后;位置:绝对;宽度:2em;高度:17em;背景颜色:rgba(255,255,255,0.5);左:2em;底部:2em;border-radius:1em;}绘制冰棒筷子:.stick{position:relative;宽度:6em;高度:8em;背景色:沙褐色;左:计算(50%-6em/2);border-radius:003em3em;}给冰棒筷子加一点阴影,增加立体感:.stick::after{content:'';位置:绝对;宽度:继承;高度:2.5em;background-color:sienna;}让冰棒的颜色卷起来:.flavors::before{animation:moving100slinearinfinite;}@keyframesmoving{to{background-position:01000vh;}}最后,添加交互效果,在鼠标悬停时播放动画:;}你完成了!