Rumah > Artikel > hujung hadapan web > Menganimasikan sifat kiraan lajur CSS
Menganimasikan sifat kiraan lajur CSS
- WBOYke hadapan
- 2023-08-31 13:37:17527semak imbas
Untuk menggunakan sifat column-count untuk mencapai kesan animasi dalam CSS, anda boleh cuba jalankan kod berikut # 🎜🎜 #
ContohDemo Langsung<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 300px;
background: white;
border: 10px solid red;
animation: myanim 3s infinite;
bottom: 30px;
position: absolute;
}
@keyframes myanim {
20% {
bottom: 100px;
box-shadow: 30px 45px 70px orange;
column-count: 4;
}
}
</style>
</head>
<body>
<h2>Performing Animation on column-count property</h2>
<div>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text!</div>
</body>
</html>Atas ialah kandungan terperinci Menganimasikan sifat kiraan lajur CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Apakah yang berlaku apabila menukar 1 kepada boolean dalam JavaScript?Artikel seterusnya：Apakah yang berlaku apabila menukar 1 kepada boolean dalam JavaScript?