块状带阴影数字时钟效果代码-html代码-BFW代码库

块状带阴影数字时钟效果代码

代码语言：html

代码描述：块状带阴影数字时钟效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}

:root {
  --purple-dark: #5F546E;
  --purple-light: #827593;
  --gray-light: #E5E3E8;
  --gray-dark: #A5A2A9;
  --light: #fcf8fb;
  --transition: all 150ms cubic-bezier(.46,1.13,.67,.87);
}

.clock-container {
  width: 405px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 35px 50px;
  background-color: var(--purple-dark);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.825);
}
.clock-container span {
  text-transform: uppercase;
  font-size: 10px;
  text-align: right;
  display: block;
}
.clock-container p {
  font-size: 60px;
  color: var(--light);
  font-weight: 100;
}
.clock-container p:first-letter {
  letter-spacing: 5px;
}

.container {
  width: 560px;
  height: 320px;
  display: block;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.215), -5px -5px 25px rgba(0, 0, 0, 0.125);
  background-color: var(--gray-light);
  position: relative;
}
.container .top {
  width: 215px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.container .top p {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
  color: var(--purple-dark);
  letter-spacing: .5px;
  cursor: pointer;
}
.container .bottom {
  height: 7px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: #aaa4b2;
}
.container .bottom .progress-bar {
  width: 240px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 9;
  background-color: #615770;
  transition: var(--transition);
}

.colon {
  --size: 3px;
  width: var(--size);
  height: 15px;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}
.colon::before {
  content: '';
  width: 100%;
  height: var(--size);
  background-color: #9892a3;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.colon::after {
  content: '';
  width: 100%;
  height: var(--size);
  background-color: #9892a3;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 50%;
}

.toast {
  width: 405px;
  color: var(--light);
  padding: 15px 24px;
  background-color: var(--purple-dark);
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  transition: var(--transition);
  z-index: 99;
}
.toast p {
  font-weight: 400;
  font-size: 18px;
}
.toast p:first-letter {
  text-transform: uppercase;
}
.toast.show {
  bottom: 50px;
}
.toast span {
  align-self: center;
  font-weight: 500;
  cursor: pointer;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  color: var(--purple-light);
  background-color: var(--purple-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto'.........完整代码请登录后点击上方下载按钮下载查看