Bagaimana untuk melaraskan jejari putaran secara dinamik menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk melaraskan jejari putaran secara dinamik menggunakan CSS?

藏色散人

Lepaskan： 2021-08-30 11:34:48

asal

2018 orang telah melayarinya

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>

Salin selepas log masuk

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!