用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - css代码库

css格式的漂亮时钟

2017-11-22 作者： 云代码会员举报

[css]代码库

<html>
<head>
<title>css格式的漂亮时钟</title>

<style>
  	.box1{
  	height: 750px;
    width: 845px;
  		}
  	.img{float:none;margin:center;text-align:center;}
#grad1 {
    height: 750px;
    width: 845px;
    background: -webkit-linear-gradient(top, rgba(29,150,250,250), rgba(250,250,250,250)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom, rgba(29,150,250,250), rgba(250,250,250,250)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom, rgba(29,150,250,250), rgba(250,250,250,250)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom, rgba(29,150,250,250), rgba(250,250,250,250)); /* 标准的语法（必须放在最后） */
    margin:center; top:80px;
}

.clock_t {
  width: 98%;
  height: 98vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-image: -webkit-linear-gradient(left, #a9d4d5 10%, #b2e6e7 10%, 12%, #a9d4d5 12%, #a9d4d5 20%, #b2e6e7 20%, 22%, #a9d4d5 22%, #a9d4d5 30%, #b2e6e7 30%, 32%, #a9d4d5 32%, #a9d4d5 40%, #b2e6e7 40%, 42%, #a9d4d5 42%, #a9d4d5 50%, #b2e6e7 50%, 52%, #a9d4d5 52%, #a9d4d5 60%, #b2e6e7 60%, 62%, #a9d4d5 62%, #a9d4d5 70%, #b2e6e7 70%, 72%, #a9d4d5 72%, #a9d4d5 80%, #b2e6e7 80%, 82%, #a9d4d5 82%, #a9d4d5 90%, #b2e6e7 90%, 92%, #a9d4d5 92%);
  background-image: linear-gradient(to right, #a9d4d5 10%, #b2e6e7 10%, 12%, #a9d4d5 12%, #a9d4d5 20%, #b2e6e7 20%, 22%, #a9d4d5 22%, #a9d4d5 30%, #b2e6e7 30%, 32%, #a9d4d5 32%, #a9d4d5 40%, #b2e6e7 40%, 42%, #a9d4d5 42%, #a9d4d5 50%, #b2e6e7 50%, 52%, #a9d4d5 52%, #a9d4d5 60%, #b2e6e7 60%, 62%, #a9d4d5 62%, #a9d4d5 70%, #b2e6e7 70%, 72%, #a9d4d5 72%, #a9d4d5 80%, #b2e6e7 80%, 82%, #a9d4d5 82%, #a9d4d5 90%, #b2e6e7 90%, 92%, #a9d4d5 92%);
}

.face {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100px;
  height: 100px;
  background: #eee;
  background-image: -webkit-linear-gradient(top left, #eee, #f5f5f5);
  background-image: linear-gradient(to bottom right, #eee, #f5f5f5);
  border-radius: 50%;
  padding: 5px;
  border: 5px solid #d9d9d9;
  box-shadow: 5px 5px 7px -10px rgba(0, 0, 0, 0.4), inset 3px 3px 5px rgba(0, 0, 0, 0.2);
}
.face:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 50%;
  z-index: 9999;
  background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, 59%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 80%), -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, 30%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 45%);
  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 0%, 59%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 80%), linear-gradient(to bottom right, rgba(255, 255, 255, 0) 0%, 30%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 45%);
}

.numbers {
  position: relative;
}

.number {
  position: absolute;
  height: 50px;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  font-size: 16px;
}
.number:nth-child(1) {
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
}
.number:nth-child(1) span {
  display: block;
  -webkit-transform: rotate(-25deg);
          transform: rotate(-25deg);
}
.number:nth-child(2) {
  -webkit-transform: rotate(55deg);
          transform: rotate(55deg);
}
.number:nth-child(2) span {
  display: block;
  -webkit-transform: rotate(-55deg);
          transform: rotate(-55deg);
}
.number:nth-child(3) {
  -webkit-transform: rotate(85deg);
          transform: rotate(85deg);
}
.number:nth-child(3) span {
  display: block;
  -webkit-transform: rotate(-85deg);
          transform: rotate(-85deg);
}
.number:nth-child(4) {
  -webkit-transform: rotate(115deg);
          transform: rotate(115deg);
}
.number:nth-child(4) span {
  display: block;
  -webkit-transform: rotate(-115deg);
          transform: rotate(-115deg);
}
.number:nth-child(5) {
  -webkit-transform: rotate(145deg);
          transform: rotate(145deg);
}
.number:nth-child(5) span {
  display: block;
  -webkit-transform: rotate(-145deg);
          transform: rotate(-145deg);
}
.number:nth-child(6) {
  -webkit-transform: rotate(175deg);
          transform: rotate(175deg);
}
.number:nth-child(6) span {
  display: block;
  -webkit-transform: rotate(-175deg);
          transform: rotate(-175deg);
}
.number:nth-child(7) {
  -webkit-transform: rotate(205deg);
          transform: rotate(205deg);
}
.number:nth-child(7) span {
  display: block;
  -webkit-transform: rotate(-205deg);
          transform: rotate(-205deg);
}
.number:nth-child(8) {
  -webkit-transform: rotate(235deg);
          transform: rotate(235deg);
}
.number:nth-child(8) span {
  display: block;
  -webkit-transform: rotate(-235deg);
          transform: rotate(-235deg);
}
.number:nth-child(9) {
  -webkit-transform: rotate(265deg);
          transform: rotate(265deg);
}
.number:nth-child(9) span {
  display: block;
  -webkit-transform: rotate(-265deg);
          transform: rotate(-265deg);
}
.number:nth-child(10) {
  -webkit-transform: rotate(295deg);
          transform: rotate(295deg);
}
.number:nth-child(10) span {
  display: block;
  -webkit-transform: rotate(-295deg);
          transform: rotate(-295deg);
}
.number:nth-child(11) {
  -webkit-transform: rotate(325deg);
          transform: rotate(325deg);
}
.number:nth-child(11) span {
  display: block;
  -webkit-transform: rotate(-325deg);
          transform: rotate(-325deg);
}
.number:nth-child(12) {
  -webkit-transform: rotate(355deg);
          transform: rotate(355deg);
}
.number:nth-child(12) span {
  display: block;
  -webkit-transform: rotate(-355deg);
          transform: rotate(-355deg);
}

.arms {
  position: absolute;
  top: 50%;
  left: 50%;
}
.arms:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  content: "";
  background: #ccc;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 999;
}

.arm {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 25px;
  width: 5px;
  content: "";
  background: black;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  border-radius: 0 0 10px 10px;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  z-index: 4;
  -webkit-animation: count 3600s linear  infinite;
          animation: count 3600s linear  infinite;
}
.arm:after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80%;
  height: calc(100% + 25px);
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent 70%);
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 70%);
  z-index: 1;
  -webkit-animation: moveShadow 3600s linear infinite;
          animation: moveShadow 3600s linear infinite;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.arm:before {
  display: block;
  position: absolute;
  top: -25px;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  border-width: 3px 2px 10px;
  border-bottom-color: black;
  content: "";
}
.arm.arm-hour {
  height: 6px;
  -webkit-transform: translate(-50%, -100%) rotate(30deg);
          transform: translate(-50%, -100%) rotate(30deg);
  -webkit-animation: count 216000s linear infinite;
          animation: count 216000s linear infinite;
}
.arm.arm-hour:after {
  -webkit-animation: moveShadow 216000s linear infinite;
          animation: moveShadow 216000s linear infinite;
}
.arm.arm-second {
  height: 30px;
  width: 3px;
  -webkit-transform: translate(-50%, -100%) rotate(60deg);
          transform: translate(-50%, -100%) rotate(60deg);
  z-index: 3;
  background: red;
  -webkit-animation: count 60s linear infinite;
          animation: count 60s linear infinite;
}
.arm.arm-second:after {
  -webkit-animation: moveShadow 60s linear infinite;
          animation: moveShadow 60s linear infinite;
}
.arm.arm-second .body {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: red;
  z-index: 4;
}
.arm.arm-second:before {
  border-width: 3px 2px 10px;
  border-bottom-color: red;
  z-index: -1;
}

@-webkit-keyframes count {
  0%, 100% {
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
  }
  25% {
    -webkit-transform: translate(-50%, -100%) rotate(90deg);
            transform: translate(-50%, -100%) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-50%, -100%) rotate(180deg);
            transform: translate(-50%, -100%) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(-50%, -100%) rotate(270deg);
            transform: translate(-50%, -100%) rotate(270deg);
  }
}

@keyframes count {
  0%, 100% {
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
  }
  25% {
    -webkit-transform: translate(-50%, -100%) rotate(90deg);
            transform: translate(-50%, -100%) rotate(90deg);
  }
  50% {
    -webkit-transform: translate(-50%, -100%) rotate(180deg);
            transform: translate(-50%, -100%) rotate(180deg);
  }
  75% {
    -webkit-transform: translate(-50%, -100%) rotate(270deg);
            transform: translate(-50%, -100%) rotate(270deg);
  }
}
@-webkit-keyframes moveShadow {
  0%, 100%, 5% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  10% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  40%, 90% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  70% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
@keyframes moveShadow {
  0%, 100%, 5% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  10% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  40%, 90% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  70% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
</style>

<!-- html调用代码：-->


  <meta charset="UTF-8">

</head>
<body>

<div class="watch" style="margin:0 auto;">
  <div class="face">
    <div class="numbers">
      <div class="number number-1"> <span>1</span></div>
      <div class="number number-2"> <span>2</span></div>
      <div class="number number-3"> <span>3</span></div>
      <div class="number number-4"> <span>4</span></div>
      <div class="number number-5"> <span>5</span></div>
      <div class="number number-6"> <span>6</span></div>
      <div class="number number-7"> <span>7</span></div>
      <div class="number number-8"> <span>8</span></div>
      <div class="number number-9"> <span>9</span></div>
      <div class="number number-10"> <span>10</span></div>
      <div class="number number-11"> <span>11</span></div>
      <div class="number number-12"> <span>12</span></div>
    </div>
    <div class="arms">
      <div class="arm arm-hour"></div>
      <div class="arm arm-minute"></div>
      <div class="arm arm-second">
      <div class="clock_t"></div>
   </div>
 </div>
</div>

</body>
</html>


网友评论    (发表评论)


发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...