Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaraskan jejari putaran secara dinamik menggunakan CSS?

Bagaimana untuk melaraskan jejari putaran secara dinamik menggunakan CSS?

藏色散人asal: 2021-08-30 11:34:481984semak imbas

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:

GIF 2021-8-30 星期一上午 11-27-50.gif

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();
Fungsi calc() menyokong operasi " ", "-", "*", "/" ;
calc() menggunakan peraturan keutamaan operasi matematik standard; Jika nilai atribut Kaedah ini berguna jika ia digunakan di banyak tempat. (Versi yang disokong: CSS3)
tutorial video css
"!

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!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Sangat praktikal! Gunakan CSS3 untuk menindih dua imej dan memaparkannya bersama-samaArtikel seterusnya：Sangat praktikal! Gunakan CSS3 untuk menindih dua imej dan memaparkannya bersama-sama

Artikel berkaitan

Lihat lagi