css实现6种食物卡车效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现6种食物卡车效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Holtwood+One+SC&family=Megrim&family=Oleo+Script+Swash+Caps&family=Rye&family=Russo+One&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
overflow: hidden;
background-color: #1a1a1a;
padding: 2rem;
font-family: sans-serif;
font-size: 1.2rem;
}
.title {
position: fixed;
top: 0;
left: 0;
display: grid;
place-content: center;
width: 100%;
height: 100%;
color: white;
pointer-events: none;
font-size: max(8vmin, 100%);
font-family: "Russo One", serif;
font-weight: 600;
text-align: center;
}
.title span {
font-family: "Oleo Script Swash Caps", sans-serif;
font-size: 2em;
transform: rotate(-5deg);
letter-spacing: -0.25rem;
}
input[name=select-truck] {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
input[name=select-truck] + label {
display: inline-flex;
position: relative;
cursor: pointer;
padding: 0.5rem 1.25rem;
font-weight: 600;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: white;
}
input[name=select-truck]:checked + label {
color: yellow;
-webkit-text-decoration: underline wavy;
text-decoration: underline wavy;
}
input[name=select-truck]:checked + label::before, input[name=select-truck]:checked + label::after {
content: "→";
position: absolute;
top: 0.2em;
-webkit-animation: 500ms linear infinite;
animation: 500ms linear infinite;
}
input[name=select-truck]:checked + label::before {
left: -0.3em;
transform: rotate(30deg);
-webkit-animation-name: point-start;
animation-name: point-start;
}
input[name=select-truck]:checked + label::after {
right: -0.3em;
transform: rotate(-30deg) scaleX(-1);
-webkit-animation-name: point-end;
animation-name: point-end;
}
.scene {
position: fixed;
top: 0;
left: 0;
display: grid;
place-items: center;
grid-template-areas: "trucks";
width: 100%;
height: 100%;
pointer-events: none;
}
.truck {
--color: hsl(0 0% 0%);
--color-accent: hsl(0 0% 10%);
--color-raised: hsla(0 0% 100% / 0.1);
--color-window: linear-gradient(
25deg,
hsl(0 0% 0% / 0.4) 55%,
hsl(0 0% 0% / 0.3) 55%
);
--tagline-font: "Russo One", serif;
grid-area: trucks;
display: grid;
grid-template-areas: "body front hood bumper";
grid-template-columns: [side-start] auto auto auto [side-end] auto;
align-items: center;
font-family: var(--main-font);
transform-style: preserve-3d;
}
.truck::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
transform: translateX(5%) translateZ(-20vmin);
filter: blur(3vmin);
}
[id=taco-truck] {
--color: hsl(33 88% 54%);
--color-accent: hsl(33 88% 5%);
--name: "Taco Time";
--main-font: "Rye", sans-serif;
--tagline: "Nacho average taco truck";
--icon: "🌮";
--wrap-graphic: url("https://assets.codepen.io/225363/skull-hero-pattern.svg")
center left / 10%;
}
[id=pizza-truck] {
--color: hsl(0 75% 55%);
--color-accent: hsl(0 0% 100%);
--main-font: "Megrim", sans-serif;
--font-size: 3.25vmin;
--name: "a pizza my heart";
--tagline: "a reeeal pizza work";
--icon: "🍕";
--wrap-graphic: repeating-conic-gradient(
var(--color-accent) 0% 25%,
transparent 0% 50%
)
50% / 4vmin 4vmin;
}
[id=calzones-truck] {
--color: hsl(30 80% 60%);
--color-accent: hsl(44 72% 10%);
--main-font: "Holtwood One SC", sans-serif;
--font-size: 3vmin;
--name: "the low-cal calzone zone";
--tagline: "Pizza? Never heard of it!";
--icon: "🍕";
--icon-alt: "🚫";
}
[id=burgers-truck] {
--color: hsl(0 0% 100%);
--color-accent: hsl(0 80% 60%);
--main-font: "Russo One", sans-serif;
--font-size: 3.25vmin;
--name: "Paunch Burger";
--tagline: "Put it in your body";
--icon: "🍔";
--wrap-graphic: url("https://assets.codepen.io/225363/food-hero-pattern.svg")
top left / 25%;
}
[id=ice-cream-truck] {
--color: hsl(0 0% 100%);
--color-accent: hsl(229 74% 33%);
--main-font: "Oleo Script Swash Caps", sans-serif;
--name: "Scoops Ahoy";
--tagline: "Set sail on an ocean of flavor";
--icon: "🍦";
--wrap-graphic: url("https://assets.codepen.io/225363/anchor-hero-pattern.svg")
top left / 15%;
}
[id=cornballs-truck] {
--color: hsl(62 75% 63%);
--color-accent: hsl(62 75% 18%);
--image: url("https://assets.codepen.io/225363/cornballer-logo.png");
--icon: "🌽";
--tagline: "¡Soy loco por los cornballs!";
}
.cuboid {
--unit: 1vmin;
height: calc(var(--depth) * var(--unit));
width: calc(var(--width) * var(--unit));
transform-style: preserve-3d;
transform: translate3d(calc(var(--x, 0) * var(--unit)), calc(var(--y, 0) * var(--unit)), calc(var(--z, 0) * var(--unit)));
}
.cuboid .side {
display: grid;
place-content: center;
position: absolute;
top: 50%;
left: 50%;
color: var(--color-accent);
background-color: var(--color);
box-shadow: inset 2vmin -2vmin 6vmin rgba(0, 0, 0, 0.2);
transform-style: preserve-3d;
}
.cuboid .side.right {
height: calc(var(--height) * var(--unit));
width: 100%;
transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc((var(--depth) / 2) * var(--unit)));
filter: brightness(80%);
}
.cuboid .side.left {
height: calc(var(--height) * var(--unit));
width: 100%;
transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translateZ(calc((var(--depth) / 2) * var(--unit))) scaleX(-1);
filter: brightness(80%);
}
.cuboid .side.front {
height: calc(var(--height) * var(--unit));
width: calc(var(--depth) * var(--unit));
transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translateZ(calc((var(--width) / 2) * var(--unit)));
filter: brightness(90%);
}
.cuboid .side.back {
height: calc(var(--height) * var(--unit));
width: calc(var(--depth) * var(--unit));
transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translateZ(calc((var(--width) / 2) * var(--unit)));
}
.cuboid .side.top {
height: calc(var(--depth) * var(--unit));
width: calc(var(--width) * var(--unit) + 1px);
transform: translate(-50%, -50%) translateZ(calc((var(--height) / 2) * var(--unit)));
}
.cuboid .side.bottom {
height: calc(var(--depth) * var(--unit));
width: calc(var(--width) * var(--unit));
transform: translate(-50%, -50%) translateZ(calc((var(--height) / 2) * (var(--unit) * -1))) rotateX(180deg);
}
..........完整代码请登录后点击上方下载按钮下载查看
网友评论0