css布局实现一个逼真的卡西欧手表效果代码-html代码-BFW代码库

css布局实现一个逼真的卡西欧手表效果代码

代码语言：html

代码描述：css布局实现一个逼真的卡西欧手表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    @import url('https://fonts.googleapis.com/css2?family=Gidugu&family=Michroma&display=swap');
@font-face {
  font-family: "DSEG7 Classic";
  src:
    url(//repo.bfw.wiki/bfwrepo/font/dseg7-bold.woff2) format("woff2"),
    url(//repo.bfw.wiki/bfwrepo/font/dseg7-bold.woff) format("woff");
  font-display: swap;
}

@font-face {
  font-family: "DSEG14 Classic";
  src:
    url(//repo.bfw.wiki/bfwrepo/font/dseg14-bold.woff2) format("woff2"),
    url(//repo.bfw.wiki/bfwrepo/font/dseg14-bold.woff) format("woff");
  font-display: swap;
}

:root {
  --model-color: #333;
  --band-color: #3475b1;
  --white-color: #d3d2d4;
  --yellow-color: #cca25d;
  --lcd-background-color: #dededc;
  --lcd-color: #181921;
  --red-color: #7d3925;
  --led-color: #84fd03;
  --lcd-font: "DSEG7 Classic", monospace;
  --shine-gradient: linear-gradient(40deg, #fff0 15%, #fff2 30%, #fff6 50%, #fff2 70%, #fff0 85%);
  --casio-border-radius: 11% / 25%;
  --casio-shape: polygon(0 20%, 10% 0, 90% 0, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0 80%);
  --button-notch-shape: polygon(100% 0, 100% 100%, 0 90%, 0 10%);
}

body {
  margin: 0;
  font-family: Michroma, sans-serif;
  font-weight: bold;
  transition: background 0.2s ease;
}

body.off {
  background: #111;
}

.casio-f91w, .container {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.container {
  display: flex;
  justify-content: center;
}

/* Utility classes */

.text-white {
  color: var(--white-color);
}

.text-yellow {
  color: var(--yellow-color);
}

.text-red {
  color: var(--red-color);
}

.font-cursive {
  font-family: sans-serif;
  font-style: italic;
  font-weight: bolder;
  font-size: 15px;
  letter-spacing: 1px;
  transform: scale(1, 0.8);
}

.font-small {
  font-size: 6px;
  letter-spacing: 1px;
}

.font-medium {
  font-size: 11px;
}

span.arrow {
  display: inline-block;
  color: var(--red-color);
  transform: scale(2, 0.75) translateX(var(--x));
}

span.arrow.left {
  --x: -1px;
}

span.arrow.right {
  --x: 1px;
}

.mini {
  font-size: 23px;
}

.casio-f91w {
  --width: 320px;
  --height: 270px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.casio-f91w .bracelet {
    width: 73%;
    height: 150px;
    background: #333;
    -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
            clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  }

.casio-f91w .bracelet.top {
   .........完整代码请登录后点击上方下载按钮下载查看