Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaraskan jejari putaran secara dinamik menggunakan CSS?
Dalam artikel sebelumnya "Ajar anda cara melukis bulatan dengan jidar kecerunan menggunakan CSS! 》Memperkenalkan anda cara menggunakan CSS untuk melukis bulatan dengan jidar kecerunan Rakan yang berminat boleh mengetahui lebih lanjut~
Fokus artikel ini adalah untuk mengajar anda cara menggunakan CSS untuk melaraskan putaran. jejari.
Dalam CSS, kita boleh menggunakan sifat tersuai CSS (pembolehubah) untuk melaraskan saiz jejari putaran. Kini penyemak imbas terbaharu Mozilla, Google, Opera, Apple dan Microsoft mempunyai atribut tersuai, jadi mari cuba~
Mari pergi terus ke kod lengkap di bawah:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
background-color: orange;
width: 200px;
height: 200px;
margin: 10px;
transition: transform 1s linear;
transform-origin: bottom left;
}
:root {
--radius: calc(10 * 4.5deg);
}
.box-rotate {
transform: rotate(var(--radius));
}
</style>
</head>
<body>
<h1 style="color: red;">
PHP中文网
</h1>
<button onclick="rotate()">点击我</button>
<div id="box"></div>
<script>
function rotate() {
var element = document.getElementById("box");
element.classList.toggle("box-rotate");
}
</script>
</body>
</html>Kesannya adalah seperti berikut:
Dalam kod di atas:
Mula-mula, tentukan penyesuaian global bernama sifat "-radius" .
Kemudian gunakan fungsi calc() untuk mengira nilai "-radius", iaitu 45deg; kita juga boleh menggunakan mana-mana pembolehubah yang ditentukan untuk mengira jejari jika perlu, yang boleh digunakan untuk melaraskan saiz jejari putaran.
Akhir sekali, gunakan fungsi var() untuk memasukkan nilai atribut tersuai untuk memutar objek.
Nota: Fungsi
calc() digunakan untuk mengira nilai panjang secara dinamik.
Perlu diambil perhatian bahawa ruang perlu ditempah sebelum dan selepas operator, contohnya: lebar: calc(100% - 10px); >
Sebarang nilai panjang boleh dikira menggunakan fungsi calc();calc() menggunakan peraturan keutamaan operasi matematik standard; Jika nilai atribut Kaedah ini berguna jika ia digunakan di banyak tempat. (Versi yang disokong: CSS3)
"!
Atas ialah kandungan terperinci Bagaimana untuk melaraskan jejari putaran secara dinamik menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!