css 高度塌陷_菜鸟前端学习之路--纯CSS实现计时器(带毫秒)

最新推荐文章于 2023-12-06 10:45:24 发布

嘉禾博研左方程

最新推荐文章于 2023-12-06 10:45:24 发布

阅读量230

点赞数

文章标签： css 高度塌陷

本文链接：https://blog.csdn.net/weixin_30930625/article/details/112077412

版权

今天刚写完js的作业,赶紧来写这个,不然后面学了又把前面的忘了.在之前模拟小米页面的过程中就发现,如果在html的主题代码中放入太多div等块级元素,会让整个html代码显得冗余,所以伪元素真的是个好东西,放在css里又不碍事,又能使html页面好看一点,所以今天我就想好好说一下伪元素,伪元素其实在html中有很多用处,我自己用过的就是清除浮动,做那种简单的星级评价,模拟小米商城,再加上这个简单计时器.

当然伪元素的用法肯定不止这些,我这周末好好补一补伪元素的用法,这里待更新.

惯例,上代码

html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="simple-counter.css">
</head>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<form action="form_action.asp">
  <section>
    <input type=checkbox name="zj" id="stop">
    <input type="reset" id="reset">
    <label for="stop">暂停/开始</label>
    <label for="reset">重置</label>
  <div class="seconds">
  </div>
  <div class="minutes">
  </div>
  <div class="hours">
  </div>
  <div class="mileseconds">
  </div>
    </section>
</form>
</body>
</html>
</body>
</html>

css部分

input {
  visibility: hidden;
}

input:nth-of-type(1):checked ~ div::before {
  animation-play-state: running;
}

input:nth-of-type(2):active ~ div::before {
  animation: none;
}

label {
  position: absolute;
  z-index: 333;
  font-size: 50px;
  width: 250px;
  text-align: center;
  line-height: 100px;
  height: 100px;
  border: solid;
  background-color: lightgreen;
  top: 350px;
}

label:nth-of-type(1) {
  left: 10px;
}

label:nth-of-type(2) {
  left: 400px;
}

label:hover {
  margin: 2px;
}

section {
  position: relative;
  width: 800px;
  margin: auto;
  height: 1000px;
  top: 100px;
}

section div {
 
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid;
  overflow: hidden;
}

section .seconds {
  left: 480px;
}

section .minutes {
  left: 240px;
}
section .mileseconds {
  left: 720px;
}
section div.seconds::before {
  width: 200px;
  
  height: 200px;
  /* border:solid; */
  margin-top: 0%;
  content: ' 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59';
  display: inline-block;
  font-size: 100px;
  text-align: center;
  line-height: 200px;
  animation: rotate 60s steps(60) infinite;
  animation-play-state: paused;
}

section div.minutes::before {
  width: 200px;
  height: 200px;
  /* border:solid; */
  margin-top: 0%;
  content: ' 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59';
  display: inline-block;
  font-size: 100px;
  text-align: center;
  line-height: 200px;
  animation: rotate 3600s steps(60) infinite;
  animation-play-state: paused;
}
section div.mileseconds::before {
  width: 200px;
  height: 200px;
  /* border:solid; */
  margin-top: 0%;
  content: ' 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99';
  display: inline-block;
  font-size: 100px;
  text-align: center;
  line-height: 200px;
  animation: mileseconds 1s steps(100) infinite;

  animation-play-state: paused;
}

section div.hours::before {
  width: 200px;
  height: 200px;
  /* border:solid; */
  margin-top: 0%;
  content: ' 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23';
  display: inline-block;
  font-size: 100px;
  text-align: center;
  line-height: 200px;
  animation: hours 86400s steps(24) infinite;
  animation-play-state: paused;
}

@keyframes hours {
  to {
    margin-top: -2400%;
  }
}

@keyframes rotate {
  to {
    margin-top: -6000%;
  }
}
@keyframes mileseconds {
  to {
    margin-top: -10000%;
  }
}