HTML+CSS+JS实现 ❤️ 卡西欧手表图形特效❤️

代码目录：

主要代码实现：

css样式：

@import url('https://fonts.googleapis.com/css2?family=Gidugu&family=Michroma&display=swap');
@font-face {font-family: "DSEG7 Classic";src: url(https://manzdev.github.io/twitch-casio/dseg7-bold.woff2) format("woff2"), url(https://manzdev.github.io/twitch-casio/dseg7-bold.woff) format("woff");font-display: swap;
}@font-face {font-family: "DSEG14 Classic";src: url(https://manzdev.github.io/twitch-casio/dseg14-bold.woff2) format("woff2"), url(https://manzdev.github.io/twitch-casio/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 {transform: scaleY(-1);
}.casio-f91w .bracelet .band.first {height: 45px;box-shadow: 0 3px 8px 3px #111;
}.casio-f91w .bracelet .band.second {height: 10px;background: linear-gradient(#111, transparent, #444);transform: translateY(45px);position: relative;display: flex;justify-content: center;
}.casio-f91w .bracelet .band.second::after {content: "";display: block;background: linear-gradient(#111 10%, #222 23%, #333 50%, #444 75%, #555 95%);width: 50%;height: 20px;position: absolute;transform: translateY(-5px);border-radius: 25px;
}.casio-f91w .bracelet.top {background: #555;
}.casio-f91w .bracelet.top .band.first {box-shadow: 0 3px 3px 3px #666;background: #444;
}.casio-f91w .bracelet.top .band.second {background: linear-gradient(#444 0 30%, #111 75% 100%);
}.casio-f91w .bracelet.top .band.second::after {background-color: #444;transform: scaleY(0.8) translateY(-6px);background-image: linear-gradient(#444 0 30%, #333 60%, #111 75% 100%);
}.casio-f91w .core-watch-container {display: flex;justify-content: center;align-items: center;width: calc(var(--width) * 1.1);
}.casio-f91w .core-watch-container .button-notch {width: 8px;height: 60px;background: #262626;-webkit-clip-path: var(--button-notch-shape);clip-path: var(--button-notch-shape);
}.casio-f91w .core-watch-container .button-notch+.button {width: 18px;height: 20px;border: 1px solid #989f7c;border-radius: 2px;position: absolute;z-index: -1;background: linear-gradient(to bottom, #fbfbfa 30%, #4f4a42 60%, #aea084);pointer-events: all;
}.casio-f91w .core-watch-container .button-notch.right+.button {transform: translate(0, -40px);
}.casio-f91w .core-watch-container .button-notch.left+.button {transform: translate(-12px, -40px);
}.casio-f91w .core-watch-container .button-notch.left {transform: translateX(1px);
}.casio-f91w .core-watch-container .button-notch.right {transform: translateX(-1px) scaleX(-1);
}.casio-f91w .core-watch-container .space {height: 15px;
}.casio-f91w .core-watch {width: var(--width);height: var(--height);background-color: var(--model-color);-webkit-clip-path: var(--casio-shape);clip-path: var(--casio-shape);display: flex;justify-content: center;align-items: center;box-shadow: 0 -2px 0 0 #555 inset, 0 -3px 0 1px #222 inset, 0 2px 0 0 #222 inset, 0 3px 0 1px #555 inset;
}.casio-f91w .crystal-screen {width: calc(var(--width) * 0.85);height: calc(var(--height) * 0.85);background: #111;border-radius: var(--casio-border-radius);display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;box-shadow: 0 0 2px 2px #444, 0 0 0 5px #222, 0 0 7px 7px #111;
}.casio-f91w .crystal-screen::after {content: "";display: block;background: var(--shine-gradient);width: 100%;height: 100%;position: absolute;
}.casio-f91w .color-border {width: calc(var(--width) * 0.8);height: calc(var(--height) * 0.8);border-radius: var(--casio-border-radius);box-shadow: 0 0 0 4px var(--band-color) inset, 0 0 0 8px #000 inset, 0 0 0 10px #eee inset;
}.casio-f91w .lcd-screen {display: flex;flex-direction: column;align-items: center;
}.casio-f91w .lcd-screen .top {margin-top: 12px;display: flex;justify-content: space-evenly;align-items: center;width: calc(var(--width) * 0.7);border-bottom: 2px solid var(--band-color);padding-bottom: 4px;
}.casio-f91w .lcd-screen .center {display: flex;flex-direction: column;align-items: center;width: calc(var(--width) * 0.65);
}.casio-f91w .lcd-screen .center .inner-top {display: flex;justify-content: space-between;padding-top: 4px;width: 90%;
}.casio-f91w .lcd-screen .center .inner-center {font-family: var(--lcd-font);font-size: 38px;width: calc(var(--width) * 0.6);height: 75px;background: var(--lcd-background-color);color: var(--lcd-color);border-radius: 10px;box-shadow: 0 0 0 4px #000, 0 0 0 5px var(--white-color);margin: 10px 0;padding-top: 10px;display: flex;flex-direction: column;transition: background-image 0.25s;position: relative;
}.casio-f91w .lcd-screen .center .inner-center::before {content: "";display: block;background: linear-gradient(#292928 50%, transparent);border-radius: 8px 8px 0 0;width: 100%;height: 10px;position: absolute;top: 0;
}.casio-f91w .lcd-screen .center .inner-center.on {background: radial-gradient(circle at 0 50%, var(--led-color) 40%, transparent 60%), linear-gradient(#999 8%, var(--lcd-background-color) 11%);
}.casio-f91w .lcd-screen .center .inner-center .lcd-top {display: flex;justify-content: space-around;
}.casio-f91w .lcd-screen .center .inner-center .lcd-top .timemode {font-family: sans-serif;font-size: 10px;align-self: flex-end;transform: translate(20px);
}.casio-f91w .lcd-screen .center .inner-center .lcd-top .weekday {font-family: "DSEG14 Classic", monospace;
}.casio-f91w .lcd-screen .center .inner-center .lcd-top .day {transform: translateX(5px);
}.casio-f91w .lcd-screen .center .inner-center .lcd-bottom {display: flex;justify-content: center;padding-top: 5px;
}.casio-f91w .lcd-screen .center .inner-center .lcd-bottom .time {display: flex;
}.casio-f91w .lcd-screen .center .inner-center .lcd-bottom .seconds {align-self: flex-end;
}.casio-f91w .lcd-screen .center .inner-bottom {display: flex;justify-content: space-evenly;width: calc(var(--width) * 0.8);
}.casio-f91w .lcd-screen .bottom {display: flex;justify-content: space-around;width: calc(var(--width) * 0.7);
}.casio-f91w .lcd-screen .bottom .water,
.casio-f91w .lcd-screen .bottom .resist {align-self: flex-end;
}.casio-f91w .lcd-screen .bottom .water::before,
.casio-f91w .lcd-screen .bottom .resist::before {content: "";display: block;border-top: 2px solid var(--band-color);width: 130%;transform: translate(-8px, 0);
}.casio-f91w .lcd-screen .bottom .resist::before {transform: translate(-10px, 0);
}.casio-f91w .lcd-screen .bottom .wr-box {letter-spacing: -3px;border: 2px solid var(--band-color);padding: 0 16px 0 10px;border-radius: 5px 5px 20px 20px / 5px 5px 30px 30px;transform: translate(0, 8px);
}.casio-f91w .lcd-screen .bottom .wr-box>span {display: inline-block;transform: translate(0, -2px);
}.casio-f91w .lcd-screen .bottom .wr-box .r {font-style: italic;
}.buttons-container {position: relative;z-index: 10;
}

html代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title> CASIO F-91W with Pure CSS!!</title><link rel="stylesheet" href="css/style.css"></head><body><div class="container"><div class="casio-f91w"><div class="top bracelet"><div class="first band"></div><div class="second band"></div></div><div class="core-watch-container"><div class="buttons-container"><div class="left top button-notch"></div><div class="button"></div><div class="space"></div><div class="left bottom button-notch"></div><div class="button"></div></div><div class="core-watch"><div class="crystal-screen"><div class="color-border"><div class="lcd-screen"><div class="top"><div class="brand text-white">CASIO</div><div class="model text-yellow font-cursive">F-91W</div></div><div class="center"><div class="inner-top"><div class="action text-white font-small"><span class="left arrow">◀</span> LIGHT</div><div class="chronograph text-yellow font-small">ALARM CHRONOGRAPH</div></div><div class="inner-center"><div class="lcd-top"><span class="timemode">24H</span><span class="weekday mini">--</span><span class="day mini">--</span></div><div class="lcd-bottom"><span class="time"><span class="hours">--</span><span class="sep">:</span><span class="minutes">--</span></span><span class="seconds mini">--</span></div></div><div class="inner-bottom"><div class="mode text-white font-small"><span class="left arrow">◀</span> MODE</div><div class="alarm text-white font-small">ALARM ON-OFF/24HR <span class="right arrow">▶</span></div></div></div><div class="bottom"><div class="water text-white font-medium">WATER</div><div class="wr-box text-red"><span>W<span class="r">R</span></span></div><div class="resist text-white font-medium">RESIST</div></div></div></div></div></div><div class="buttons-container"><div class="right top button-notch"></div><div class="space"></div><div class="right bottom button-notch"></div><div class="button"></div></div></div><div class="bottom bracelet"><div class="first band"></div><div class="second band"></div></div></div></div><script src="js/script.js"></script></body></html>

js文件在上面截图可以看到需要引进来。