Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencipta kesan undur yang cantik dengan Three Musketeers bahagian hadapan
Bagaimana untuk mencipta kesan undur yang cantik dengan Three Musketeers bahagian hadapan
- 藏色散人asal
- 2021-08-19 14:14:392255semak imbas
Dalam artikel sebelumnya "Gunakan CSS untuk mencipta imej latar belakang kabur lanjutan", saya memperkenalkan anda cara menggunakan CSS untuk mencipta imej latar belakang kabur lanjutan Kesannya sangat keren berminat boleh belajar mengenainya~
Tumpuan artikel ini adalah untuk memperkenalkan kepada anda bagaimana untuk mencapai kesan kira detik yang sangat cantik dan praktikal melalui tiga pendekar pedang bahagian hadapan (HTML, css, javascript).
Jika anda memerlukan halaman undur, jangan lepaskan artikel ini~
Jom terus ke kod lengkap:
Kod untuk mencapai kesan undur adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
body, html {
height: 100%;
margin: 0;
}
.bgimg {
background-image: url('003.jpg');
height: 100%;
width:100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
}
.topleft {
background-image: url('logo.png');
position: absolute;
width:100%;
height:100%;
background-repeat: no-repeat;
top: 2px;
left: 16px;
}
.bottomleft {
position: absolute;
bottom: 0;
left: 16px;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: auto;
width: 40%;
}
</style>
</head>
<body>
<div class="bgimg">
<div class="topleft">
<div id="color-overlay"></div>
</div>
<div class="middle">
<h1>距离2022年春节还有：</h1>
<hr>
<p id="demo" style="font-size:30px"></p>
</div>
<div class="bottomleft">
<p>www.php.cn</p>
</div>
</div>
<script>
// 设定我们倒计时的日期
var countDownDate = new Date("2022,2,1").getTime();
// 每1秒更新一次计数
var countdownfunction = setInterval(function() {
// 获取今天的日期和时间
var now = new Date().getTime();
// 找出现在与倒数日期之间的差
var distance = countDownDate - now;
// 时间计算为天，小时，分和秒
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 在id="demo"的元素中输出结果
document.getElementById("demo").innerHTML = days + "天" + hours + "时"
+ minutes + "分" + seconds + "秒";
// 如果倒计时结束了，写一些文字
if (distance < 0) {
clearInterval(countdownfunction);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>Jalankan fail ini, kesannya adalah seperti berikut:
(Imej latar belakang datang dari Internet, maaf atas pelanggaran atau pemadaman)
Untuk mencapai kesan kira detik, fungsi ini dilaksanakan terutamanya melalui javascript Gaya sudah tentu ditetapkan melalui html/css Untuk penjelasan kod tertentu, saya telah mencatatkan maksud setiap langkah melalui komen dalam kod di atas. Saya percaya anda boleh Sekilas pandang~
Anda juga boleh terus menyalin kod di atas dan mengujinya secara setempat Imej latar belakang atau kandungan teks boleh diganti dengan mudah untuk mencapai kesan undur yang berbeza, maka anda boleh mengembangkannya berdasarkan kandungan artikel ini! Mempelajari dan menguasai idea pelaksanaan adalah perkara yang paling penting!
Akhir sekali, jika anda mempunyai sebarang soalan, sila tinggalkan komen!
Platform tapak web PHP Cina mempunyai banyak sumber pengajaran video Semua orang dialu-alukan untuk mempelajari "tutorial video css" dan "tutorial asas javascript"!
Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan undur yang cantik dengan Three Musketeers bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!