效果如图所示
倒计时
代码分享:
<div class="bubble-container">
<div class="bubble bubble-1"></div>
<div class="bubble bubble-2"></div>
<div class="bubble bubble-3"></div>
<div class="bubble bubble-4"></div>
<div class="bubble bubble-5"></div>
<div class="bubble bubble-6"></div>
<div class="bubble bubble-7"></div>
<div class="bubble bubble-8"></div>
</div>
<div class="container">
<div class="content">
<h1>coming soon</h1>
<p>we will be celebrating in the launch of our new site vuer soon</p>
<div class="counter">
<div class="days">
<div class="number"></div>
<div class="title">Days</div>
</div>
<div class="hours">
<div class="number"></div>
<div class="title">Hours</div>
</div>
<div class="minutes">
<div class="number"></div>
<div class="title">Minutes</div>
</div>
<div class="seconds">
<div class="number"></div>
<div class="title">Seconds</div>
</div>
</div>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Poppins", sans-serif;
font-size: 62.5%;
font-weight: 400;
}
body {
position: relative;
height: 100vh;
/*从左上到右下,起始颜色,终止颜色*/
background: linear-gradient(to bottom right, #50a3a2, #78cc6d 100%);
}
.bubble-container {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
top: 0;
left: 0;
}
.bubble-container .bubble {
position: absolute;
bottom: -10rem;
width: 4ren;
height: 4rem;
background: #f1f1f1;
border-radius: 50%;
opacity: .5;
/*动画:Keyframs名字 持续10s 无线循环播放 动画以低速开始*/
animation: rise 10s infinite ease-in;
}
.bubble-container .bubble-1 {
width: 4rem;
height: 4rem;
left: 20%;
animation: 8s;
}
.bubble-container .bubble-2 {
width: 2rem;
height: 2rem;
left: 20%;
animation-duration: 5s;
/*延迟开始动画*/
animation-delay: 1s;
}
.bubble-container .bubble-3 {
width: 5rem;
height: 5rem;
left: 35%;
animation-duration: 7s;
animation-delay: 2s;
}
.bubble-container .bubble-4 {
width: 8rem;
height: 8rem;
left: 50%;
animation-duration: 11s;
animation-delay: 0s;
}
.bubble-container .bubble-5 {
width: 3.5rem;
height: 3.5rem;
left: 55%;
animation-duration: 6s;
animation-delay: 1s;
}
.bubble-container .bubble-6 {
width: 4.5rem;
height: 4.5rem;
left: 65%;
animation-duration: 8s;
animation-delay: 3s;
}
.bubble-container .bubble-7 {
width: 9rem;
height: 9rem;
left: 75%;
animation-duration: 12s;
animation-delay: 2s;
}
.bubble-container .bubble-8 {
width: 2.5rem;
height: 2.5rem;
left: 80%;
animation-duration: 6s;
animation-delay: 2s;
}
@keyframes rise {
0% {
bottom: -10rem;
transform: translateX(0);
}
50% {
transform: translate(10rem);
}
100% {
bottom: 1080px;
transform: translateX(-20rem);
}
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/*媒体查询*/
@media(min-width:576px) {
.container {
width: 540px;
}
}
@media(min-width:768px) {
.container {
width: 720px;
}
}
@media(min-width:992px) {
.container {
width: 960px;
}
}
@media(min-width:1200px) {
.container {
width: 1170px;
}
}
@media(min-width:1400px) {
.container {
width: 1320px;
}
}
.container .content {
color: #fff;
text-align: center;
}
.container .content h1 {
font-size: 3rem;
/*文本转换,定义仅有大写字母*/
text-transform: uppercase;
/*元素字母间距*/
letter-spacing: .5rem;
}
.container .content p {
font-size: 1.6rem;
}
@media(min-width:768px) {
.container .content h1 {
font-size: 6rem;
}
.container .content p {
font-size: 1.8rem;
}
}
.container .content .counter {
margin-top: 2rem;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
/*行列之间的间隙*/
gap: 2rem;
}
.container .content .counter>div {
width: 10rem;
height: 10rem;
border-radius: .5rem;
border: .1rem solid #fff;
font-size: 3rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1rem;
}
.container .content .counter>div .title {
width: 100%;
text-align: center;
font-size: 1.6rem;
border-top: .1rem solid #fff;
}
</style>
<script>
let days = document.querySelector(".days .number"),
hours = document.querySelector(".hours .number"),
minutes = document.querySelector(".minutes .number"),
seconds = document.querySelector(".seconds .number"),
countDownDate = new Date("Apr 1,2023 23:59:59").getTime();
let counter = setInterval(() => {
let dateNow = new Date().getTime();
let dateDiff = countDownDate - dateNow;
let day = Math.floor(dateDiff / (1000 * 60 * 60 * 24));
let hour = Math.floor((dateDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minute = Math.floor((dateDiff % (1000 * 60 * 60)) / (1000 * 60));
let second = Math.floor((dateDiff % (1000 * 60)) / 1000);
days.innerHTML = day < 10 ? `0${day}` : day;
hours.innerHTML = hour < 10 ? `0${hour}` : hour;
minutes.innerHTML = minute < 10 ? `0${minute}` : minute;
seconds.innerHTML = second < 10 ? `0${second}` : second;
if (dateDiff == 0) {
clearInterval(counter)
}
})
</script>