Bagaimana untuk menetapkan masa dalam css

CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk reka bentuk gaya halaman web dan memainkan peranan yang sangat penting dalam reka bentuk web. Selain memainkan peranan dalam gaya dan susun atur halaman web, CSS juga boleh dengan mudah menetapkan pelbagai kesan temporal dan animasi dalam halaman web. Artikel ini akan memperkenalkan secara terperinci cara menggunakan CSS untuk menetapkan kesan berkaitan masa.

1. Kesan jam CSS

Jam ialah kesan masa yang biasanya digunakan pada pelbagai tapak web dan aplikasi. Menggunakan CSS, anda boleh mencipta kesan jam yang bukan sahaja cantik tetapi juga tepat. Berikut ialah contoh kod cara mencipta gaya jam ringkas:

Kod HTML:

<div class="clock">
  <div class="hour"></div>
  <div class="minute"></div>
  <div class="second"></div>
</div>

Kod CSS:

.clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.hour {
  width: 6px;
  height: 50px;
  background-color: #000;
  position: absolute;
  left: calc(50% - 3px);
  top: calc(50% - 50px);
  transform-origin: bottom center;
  transform: rotate(90deg);
}
.minute {
  width: 4px;
  height: 80px;
  background-color: #000;
  position: absolute;
  left: calc(50% - 2px);
  top: calc(50% - 80px);
  transform-origin: bottom center;
  transform: rotate(180deg);
}
.second {
  width: 2px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: calc(50% - 1px);
  top: calc(50% - 100px);
  transform-origin: bottom center;
  transform: rotate(270deg);
  animation: move 60s linear infinite;
}
@keyframes move {
  0% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(630deg);
  }
}

Dalam kod di atas, kami akan div Teg diberikan kelas .clock, menjadikannya bingkai luar jam. Kelas hour, minute dan second masing-masing digunakan untuk memaparkan jarum jam, minit dan detik. Dengan atribut position dan atribut transform dalam CSS, kami boleh meletakkannya dengan mudah pada kedudukan yang betul dan menjadikannya berputar untuk menunjukkan masa semasa. Selain itu, kita boleh menggunakan animasi CSS untuk membuat tangan kedua bergerak dengan lancar.

2. Gunakan CSS untuk melaksanakan kesan kira detik

Kesan kira detik digunakan secara meluas dalam banyak situasi, seperti kira detik tawaran istimewa produk pada halaman web atau kira detik masa tamat acara, dsb. Menggunakan CSS, kami boleh menambah kesan undur ini dengan mudah pada tapak web kami. Berikut ialah contoh kod yang menggunakan CSS untuk menetapkan kesan kira detik:

Kod HTML:

<div class="countdown">
  <div class="days">00</div>
  <div class="hours">00</div>
  <div class="minutes">00</div>
  <div class="seconds">00</div>
</div>

Kod CSS:

.countdown {
  font-family: monospace;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
  margin: 50px 0;
}
.countdown div {
  width: 60px;
  height: 60px;
  margin: 0 10px;
  border-radius: 10px;
  background-color: #fff;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

Dalam kod di atas, kami menggunakan <div> Label untuk mewakili nombor kira detik. Menggunakan atribut display dan nilai atribut flex dalam CSS, kami menyusun elemen nombor ini dalam baris. Kita boleh mengubah saiz elemen nombor dengan mudah dengan menetapkan lebar dan ketinggian tag <div>. Menggayakan elemen digital, seperti menukar warna latar belakang melalui atribut background-color dan menambah kesan bayangan menggunakan atribut box-shadow model kotak CSS.

3. Cipta kesan kelipan dan kesan animasi dengan CSS

Selain daripada kesan jam dan kira detik yang diperkenalkan pada masa ini, CSS juga boleh mencipta banyak kesan berkaitan masa lain, seperti kelipan, penskalaan, putaran dan perubahan warna. Berikut ialah beberapa contoh penggunaan CSS untuk mencapai kesan masa tertentu:

1. Kesan Kelip CSS

Kesan kelipan sering digunakan untuk menekankan elemen tertentu pada tapak web, melalui animationAtribut dan bingkai utama, kami boleh menambahkan kesan kelipan pada teks atau imej dengan mudah. Berikut ialah contoh kod kesan kilat CSS ringkas:

Kod HTML:

<h1 class="blink">Hello World!</h1>

Kod CSS:

.blink {
  animation: blink 1s linear infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Dalam kod di atas, kami menggunakan <h1> teg dan kelas .blink untuk mencipta elemen teks dan menggunakan sifat animation CSS dan peraturan @keyframes untuk menjadikan elemen teks berkelip. Dalam peraturan @keyframes, kami mentakrifkan kesan animasi elemen teks daripada 100% kelegapan kepada 50% kelegapan dan kembali kepada 100% kelegapan.

2. Kesan Animasi CSS

CSS juga boleh mencipta pelbagai animasi kompleks menggunakan bingkai utama dan atribut animation. Berikut ialah contoh animasi CSS mudah:

Kod HTML:

<div class="animated">
  <img src="image.jpg">
</div>

Kod CSS:

.animated {
  animation: animated 2s ease-out;
}
@keyframes animated {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.5) rotate(45deg);
  }
  50% {
    transform: scale(0.5) rotate(-45deg);
  }
  75% {
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

Dalam kod di atas, kami menggunakan teg <div> dan kelas .animated untuk mencipta elemen yang mengandungi imej, dan gunakan sifat CSS animation dan peraturan @keyframes untuk mencipta animasi untuk elemen tersebut. Dalam peraturan @keyframes, kami mentakrifkan peralihan unsur daripada perkadaran biasa, kepada pembesaran dengan putaran 45 darjah, untuk mengecilkan dan putaran kembali kepada perkadaran asal.

Dalam CSS, kita boleh menggunakan pelbagai sifat dan nilai untuk menetapkan kesan dan animasi berkaitan masa. Semoga contoh yang dibentangkan dalam artikel ini akan membantu anda menjadi kreatif dan menambah kesan masa yang hebat dan pelbagai kesan animasi ke tapak web anda.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan masa dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!