HTML——2022年超好看的元旦倒计时

最新推荐文章于 2024-04-30 14:53:19 发布

木易学长~

最新推荐文章于 2024-04-30 14:53:19 发布

阅读量1.5k

点赞数

分类专栏：干货文章标签： html css3 javascript

本文链接：https://blog.csdn.net/qq_39985125/article/details/122192661

版权

2022即将到来，快来一起做一个元旦倒计时分享给自己喜欢的人吧~

PC效果图：
在这里插入图片描述
手机效果图：

html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新年快乐</title><!-- 这是网页标题 -->
<style>
<audio autoplay="autoplay" loop="loop" preload="auto"     src="http://music.163.com/song/media/outer/url?id=1811921555.mp3">       
</audio>
</body>
</html>

部分CSS：

<style>
body{
   
  overflow: hidden;
  margin: 0;
}
h1{
   
  position: fixed;
  top: 30%;
  left: 0;
  width: 100%;
  text-align: center;
  transform:translateY(-50%);
  font-family: 'Love Ya Like A Sister', cursive;
  font-size: 60px;
  color: #c70012;
  padding: 0 20px;
}
h1 span{
   
  position: fixed;
  left: 0;
  width: 100%;
  text-align: center;