css实现6种食物卡车效果代码-html代码-BFW代码库

代码语言：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);
}

..........完整代码请登录后点击上方下载按钮下载查看