块状带阴影数字时钟效果代码-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: .........完整代码请登录后点击上方下载按钮下载查看