旅游网站建设受众分析,外贸网站建设服务,python如何与wordpress,做综合医院网站介绍原文链接感謝 comehope 大佬的 [前端每日实战]效果预览源代码地址代码解读1. html 结构命名规则使用了 BEM常规样式初始化* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;overflow: hidden;}2. 街道背景街道背景分为两部分深蓝色的天空.street {hei…介绍原文链接感謝 comehope 大佬的 [前端每日实战]效果预览源代码地址代码解读1. html 结构命名规则使用了 BEM常规样式初始化* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;overflow: hidden;}2. 街道背景街道背景分为两部分深蓝色的天空.street {height: 100vh;position: relative;display: flex;justify-content: center;align-items: flex-end;background-color: #0b2e4e;overflow: hidden;}黑色的地面.street::before {content: ;position: absolute;bottom: 0;left: 0;right: 0;width: 100%;height: 25vh;background-color: #000000;}3. 超市超市, 首先创建一个长方形代表超市.market {position: relative;display: flex;width: 520px;height: 270px;background-color: #fffecc;border: 4px solid #333333;}接着给超市增加 24 HOURS 的标识, 需要在 market 下增加一个 span 标签24 hours生意好的超市必然亮堂堂.market {box-shadow: 0 22px 110px 12px #f5efa1;}增大超市(正方形的上 border ), 用于存放标识.market {border-top-width: 50px;}将标识定位到上 border, 并给其添加发光样式.market__name {position: absolute;top: -38px;left: 20px;font-family: sans-serif;font-size: 1.4em;letter-spacing: 0.4em;color: #bdf8ff;text-transform: uppercase;text-shadow: 0px 0px 9px #95cfef;}再给该标识添加闪烁动画.market__name {animation: signboardFlashes 5s infinite alternate linear;}/* keyframes */keyframes signboardFlashes {0% {opacity: 1;}35% {opacity: 1;}36% {opacity: 0;}37% {opacity: 1;}70% {opacity: 1;}72% {opacity: 0;}73% {opacity: 1;}74% {opacity: 0;}75% {opacity: 1;}100% {opacity: 1;}}接着需要给超市增加 4 扇门, 并基于基础的样式24 hours.market__fold {position: relative;width: 25%;border: 8px solid #000000;}/* 此处无法在 .market__fold 使用 inset 替代 */.market__fold::before {content: ;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;box-shadow: 0 0 2px 1px #f3f1d5;}门是感应门, 当有生物靠近才会打开, 所以打开的动画等一下完成4. 月亮在 market 中添加 moon通过绝对定位将其移动到超市的上方, 并添加动画效果.moon {position: absolute;top: -125px;left: -50px;width: 40px;height: 40px;background-color: #ffffc9;border-radius: 50%;box-shadow: 0 0 20px 1px #ffffc9;animation: moonMoves 360s infinite alternate linear;}keyframes moonMoves {0% {transform: translate(0, 0);}50% {transform: translate(300px, -10px);}100% {transform: translate(600px, 0);}}5. 原地踏步的猫在 market 添加 cat首先给予一个轮廓方便观察.cat {--cat-color: red;position: absolute;left: -200px;bottom: -24px;width: 46px;height: 30px;margin: auto;color: var(--cat-color);background-color: var(--cat-color);border-radius: 30px;}修改猫的 DOM 结构, 添加头, 尾巴, 四肢然后依次给予其样式首先是头部, 头部使用伪元素形成耳朵, 并添加头部晃动效果.cat__head {position: absolute;right: -10px;top: -8px;width: 24px;height: 24px;background-color: inherit;border-radius: 50%;animation: catMovesHead 0.3s infinite linear;}.cat__head::before, .cat__head::after {content: ;position: absolute;top: 0;width: 10px;height: 10px;background-color: inherit;border-radius: 2px;}.cat__head::before {left: 2px;transform: rotate(16deg);}.cat__head::after {right: 2px;transform: rotate(-16deg);}keyframes catMovesHead {0% {transform: translateY(0);}50% {transform: translateY(2px);}100% {transform: translateY(0);}}添加尾巴及动画效果(尾巴由椭圆形的一半构成).cat__tail {position: absolute;left: -18px;top: -22px;width: 30px;height: 42px;border-radius: 50%;border: 7px solid var(--cat-color);border-left-color: transparent;border-bottom-color: transparent;transform-origin: right;animation: catMovesTail 0.3s infinite linear;}keyframes catMovesTail {0% {transform: rotate(0);}50% {transform: rotate(-3deg);}100% {transform: rotate(0);}}猫咪的四肢.cat__leg {position: absolute;bottom: -12px;width: 6px;height: 20px;background-color: inherit;border-radius: 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: catMovesLegs 0.6s infinite linear;}.cat__leg--2, .cat__leg--4 {transform: rotate(-24deg);animation: catMovesLegs 0.6s infinite -0.3s linear;}keyframes catMovesLegs {0% {transform: rotate(36deg);}50% {transform: rotate(-36deg);}100% {transform: rotate(36deg);}}6. 猫过门开给予猫一个整体的动画.cat {animation: catRuns 20s infinite linear;}keyframes catRuns {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 上的 class再增加开关门的效果, 根据上方猫的花费时间进行计算, 取一样的时间更方便一些.market__fold--left {animation: doorMovesLeft 20s infinite linear;}.market__fold--right {animation: doorMovesRight 20s infinite linear;}keyframes doorMovesLeft {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);}}keyframes doorMovesRight {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);}}最后就这样大功告成了不过记得把猫的颜色改回来/* 猫 */.cat {--cat-color: #000000;}7. 补充最后切换为移动端时注意到 超市会横向占满, 通过 padding 设置一个空隙即可.street {padding: 0 6vw 115px;}感想最近忙着学习 Koa, 结果 CSS 感觉忘得差不多了,唉
