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

前端CSS：5#纯CSS实现24小时超市

时间：2023-04-05 19:44:04 HTML5

引入原链接感谢comehop??e的【前端日常实战】效果预览github.io浏览源码地址https://github.com/shanyuhai1...代码解读1.html结构命名规则使用BEM

通用样式初始化*{margin:0;填充：0；box-sizing:border-box;}body{height:100vh;溢出：隐藏；}2。街道背景街道背景分为深蓝色两部分sky.street{height:100vh;位置：相对；显示：弹性；证明内容：居中；对齐项目：flex-end；背景色：#0b2e4e；溢出：隐藏；}黑色ground.street::before{内容：“”；位置：绝对；底部：0；左：0；右：0；宽度：100%；高度：25vh；背景颜色：#000000；}3。超市supermarket，首先创建一个矩形代表supermarket.market{position:relative;显示：弹性；宽度：520px；高度：270px；背景颜色：#fffecc；border:4pxsolid#333333;}然后在超市添加24HOURSlogo，需要在market下面添加span标签24hours

生意好的超市一定是亮的。市场{箱影：022px110px12px#f5efa1;}增加超市尺寸（正方形上边框）存放logo.market{border-top-width:50px;}将logo定位到上边框，添加发光样式it.market__name{位置：绝对；顶部：-38px；左：20px；字体系列：无衬线；字体大小：1.4em；字母间距：0.4em；颜色：#bdf8ff；0px9px#95cfef;}为logo添加闪烁动画。market__name{animation:signboardFlashes5sinfinitealternatelinear;}/*keyframes*/@keyframessignboardFlashes{0%{opacity:1;}35%{不透明度：1；}36%{不透明度：0；}37%{不透明度：1；}70%{不透明度：1；}72%{不透明度：0；}73%{不透明度：1；{不透明度：1;}100%{不透明度：1;}}然后需要给超市增加4个门，并且在基础样式的基础上24小时<spanclass="market__fold">

.market__fold{位置：相对；宽度：25%；border:8pxsolid#000000;}/*你不能在这里使用inset而不是.market__fold*/.market__fold::before{content:"";位置：绝对；顶部：0；左：0；底部：0；右：0；宽度：100%；高度：100%；box-shadow:002px1px#f3f1d5;}门是感应门，只有有生物靠近才会打开，所以开门动画会在后面完成4.月亮添加月亮到市场

通过绝对定位将其移动到超市上方，并添加动画效果。moon{position:absolute;顶部：-125px；左：-50px；宽度：40px；高度：40px；背景色：#ffffc9；边界半径：50%；框阴影：0020px1px#ffffc9；动画：moonMoves360s无限交替线性；}@keyframesmoonMoves{0%{transform:translate(0,0);}50%{转换：翻译（300px，-10px）；}100%{转换：翻译（600px，0）；}}5.为standingcat添加cattomarket先给个轮廓，方便观察。猫{--猫颜色：红色；位置：绝对；左：-200px；底部：-24px；宽度：46px；高度：30px；保证金：自动；颜色：var（--猫颜色）；背景颜色：var（--猫颜色）；border-radius:30px;}修改猫的DOM结构，添加头、尾、四肢然后依次给它一个样式。首先是头部，使用伪元素构成耳朵，并添加摇头效果.cat__head{position:absolute;右：-10px；顶部：-8px；宽度：24px；高度：24px；背景色：继承；边界半径：50%；：之前，.cat__head::after{内容：“”；位置：绝对；顶部：0；宽度：10px；高度：10px；背景色：继承；边界半径：2px;}.cat__head::before{左：2px；变换：旋转（16度）；}.cat__head::after{右：2px；变换：旋转（-16deg）；}@keyframescatMovesHead{0%{变换：translateY（0）；}50%{转换：translateY(2px);}100%{转换：translateY(0);}}添加尾巴和动画（尾巴由椭圆的一半组成）。cat__tail{position:absolute;左：-18px；顶部：-22px；宽度：30px；高度：42px；边界半径：50%；border:7pxsolidvar(--cat-color);左边框颜色：透明；-来源：对；动画：catMovesTail0.3s无限线性；}@keyframescatMovesTail{0%{变换：旋转（0）；}50%{变换：旋转（-3deg）；}100%{变换：旋转（0）；}}猫的limbs.cat__leg{position:absolute;底部：-12px；宽度：6px；高度：20px；背景色：继承；边界半径：3px；transform-origin:top;}分离并添加四肢动画

.cat__leg--1,.cat__leg--2{left:5px;}.cat__leg--3,.cat__leg--4{right:5px;}.cat__leg--1,.cat__leg--3{transform:rotate(24deg);animation:catMovesLegs0.6sinfinitelinear;}.cat__leg--2,.cat__leg--4{transform:rotate(-24deg);animation:catMovesLegs0.6sinfinite-0.3slinear;}@keyframescatMovesLegs{0%{transform:rotate(36deg);}50%{transform:rotate(-36deg);}100%{transform:rotate(36deg);}}6.猫过门给猫整体动画cat{animation:catRuns20sinfinitelinear;}@keyframescatRuns{0%{transform:translateX(0)rotateY(0);}70%{transform:translateX(800px)rotateY(0);}71%{transform:translateX(1000px)rotateY(180deg);}100%{transform:translateX(0)rotateY(180deg);}}修改超市门口DOM上的类

增加开门关门效果，根据给上面的猫需要时间来计算，取同样的时间比较方便{0%{transform:translateX(0);}28%{transform:translateX(0);}30%{transform:translateX(-90%);}54%{transform:translateX(-90%);}56%{transform:translateX(0);}83%{transform:translateX(0);}85%{transform:translateX(-90%);}97%{transform:translateX(-90%);}99%{transform:translateX(0);}100%{transform:translateX(0);}}@keyframesdoorMovesRight{0%{transform:translateX(0);}28%{transform:translateX(0);}30%{transform:translateX(90%);}54%{transform:translateX(90%);}56%{转换：translateX(0)；}83%{转换：translateX(0);}85%{转换：translateX(90%);}97%{转换：translateX(90%);}99%{转换：translateX(0);}100%{转换：translateX(0);}}终于大功告成了，不过记得把猫的颜色改回来/*cat*/.cat{--cat-color:#000000;}7.补充最后切换到移动端的时候，我注意到超市会被横着放满。只需通过填充设置一个间隙即可。

上一篇：走进前端开发——框架的演进

下一篇：MEVN架构（MongoDB+Express+Vue+NODEJS）搭建

前端CSS：5#纯CSS实现24小时超市相关文章

最新推荐

猜你喜欢