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;
}

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