CASIO F-91W with Pure CSS!!

效果演示： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b42463ec7934cd184728bd1c7aca948~tplv-k3u1fbpfcp-zoom-1.image) ![](<> "点击并拖拽以移动") > ## 代码目录： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71e1ef255bf049c38f12d246a76618e2~tplv-k3u1fbpfcp-zoom-1.image)![](<> "点击并拖拽以移动") > ## 主要代码实现： ### 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代码 : ``` CASIO F-91W with Pure CSS!!

CASIO

F-91W

◀ LIGHT

ALARM CHRONOGRAPH

24H -- --

-- : -- --

◀ MODE

ALARM ON-OFF/24HR ▶

WATER

RESIST

``` ![](<> "点击并拖拽以移动") 作品来自于网络收集、若有侵权联系作者删除 js文件在上面截图可以看到需要引进来。 > 打卡文章更新 **36** ****/ 100天 > > 大家可以**点赞、收藏、关注、评论**我啦、