html超市代码,前端 CSS : 5# 纯 CSS 实现24小时超市
介紹
原文鏈接
感謝 comehope 大佬的 [前端每日實戰(zhàn)]
效果預(yù)覽
源代碼地址
代碼解讀
1. html 結(jié)構(gòu)
命名規(guī)則使用了 BEM
常規(guī)樣式初始化
* {
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. 超市
超市, 首先創(chuàng)建一個長方形代表超市
.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, 并給其添加發(fā)光樣式
.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 扇門, 并基于基礎(chǔ)的樣式
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;
}
門是感應(yīng)門, 當有生物靠近才會打開, 所以打開的動畫等一下完成
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 結(jié)構(gòu), 添加頭, 尾巴, 四肢
然后依次給予其樣式
首先是頭部, 頭部使用偽元素形成耳朵, 并添加頭部晃動效果
.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);
}
}
添加尾巴及動畫效果(尾巴由橢圓形的一半構(gòu)成)
.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
再增加開關(guān)門的效果, 根據(jù)上方貓的花費時間進行計算, 取一樣的時間更方便一些
.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 設(shè)置一個空隙即可
.street {
padding: 0 6vw 115px;
}
感想
最近忙著學(xué)習(xí) Koa, 結(jié)果 CSS 感覺忘得差不多了,唉
總結(jié)
以上是生活随笔為你收集整理的html超市代码,前端 CSS : 5# 纯 CSS 实现24小时超市的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html5 中的 wbe storage
- 下一篇： 前端通过json数据导出excel表格文