CSS 实现自动等分圆效果

女爷i 2023-09-30 16:14 10阅读 0赞

本实例通过css和js实现等分圆的效果

<!DOCTYPE html>
    <html>
    <head>
        <title>CSS等分圆</title>
        <meta charset="utf-8">
        <style type="text/css">
            .container{
                position: relative;
                width: 200px;
                height: 200px;
                overflow: hidden;
                border: 2px outset deeppink;
                border-radius: 50%;
                margin: 5em auto;
            }
            .layer{
                position: absolute;
                transform-origin: left top;
                left: 100px;
                top: 100px;
                width: 100px;
                height: 100px;
                border: 1px solid white;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="layer layer5"></div>
        <div class="layer layer5"></div>
        <div class="layer layer5"></div>
        <div class="layer layer5"></div>
        <div class="layer layer5"></div>
        <div class="layer layer5"></div>
        <div class="layer layer5"></div>
    </div>
    <script type="text/javascript">
        var b_len = document.getElementsByClassName("layer5").length;
        document.querySelectorAll('.layer5').forEach(function (item, i) {
            item.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
            item.style.transform = 'rotate(' + 360 / b_len * (i + 1) + 'deg)skewX('+ (90 - 360 / b_len ) +'deg)';
        });
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 html+css+js实现自动敲文字效果

html+css+js实现自动敲文字效果简介：本文是一个前端案例的讲解，关于如何用html+css+js制作出逐渐显示出文字的效果，这个效果可以帮助大家在新人面前装一波

た入场券/ 2024年03月29日 16:17/ 0 赞/ 87 阅读

相关 css 自动打字效果的实现

阅读目录最终效果 index.html index.js index.css 最终效果 ![在这里插入图片描述][

拼搏现实的明天。/ 2023年10月07日 20:16/ 0 赞/ 63 阅读

相关 CSS 实现自动等分圆效果

本实例通过css和js实现等分圆的效果 <!DOCTYPE html> <html> <head> <title>CSS等分圆</ti

女爷i/ 2023年09月30日 16:14/ 0 赞/ 11 阅读

相关 css画圆、半圆、椭圆、圆环

css画圆在css中利用border-radius可以画出我们想要的圆 border-radius属性可以设置盒子四边的圆弧。从上左，上右，下右，下左顺时针依

╰+哭是因爲堅強的太久メ/ 2023年08月17日 16:53/ 0 赞/ 134 阅读

相关自适应 && 等分 flex 【angular flexLayout】CSS

需求： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0

今天药忘吃喽~/ 2023年06月30日 10:48/ 0 赞/ 15 阅读

相关 css如何实现画圆

css如何实现画圆 css代码 .circle_process { position: relativ

迷南。/ 2023年06月12日 04:12/ 0 赞/ 17 阅读

相关 css实现三个DIV完美等分样式

css实现三个DIV完美等分样式 html代码： <div class="aa"> <div style="background:red; h

太过爱你忘了你带给我的痛/ 2022年09月16日 04:57/ 0 赞/ 246 阅读

相关只用css实现图片自动轮播效果

css实现图片自动轮播只用css实现图片轮播效果代码 // An highlighted block <!DOCTYPE html> <htm

淡淡的烟草味﹌/ 2022年01月23日 01:53/ 0 赞/ 329 阅读

相关 css实现半圆和圆

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

￡神魔★判官ぃ/ 2021年07月26日 14:47/ 0 赞/ 352 阅读

相关 CSS实现橡皮筋效果

![在这里插入图片描述][2020051309320223.gif] HTML代码： <body> <div class="container">

电玩女神/ 2021年07月26日 11:54/ 0 赞/ 686 阅读