css3如何实现元素环绕中心点布局(代码示例)


当前第2页 返回上一页

代码实现:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

<style>

    *{

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

    .surround-box,

    .center-point{

        position: absolute;

        top:  50%;

        left: 50%;

        width:  20px;

        height:  20px;

        margin-left: -10px;

        margin-top: -10px;

        border-radius: 50%;

        background-color: #000;

    }

    .circle{

        /* 这里一定要绝对定位,这样位置才能铺开来 */

        position: absolute;

        top:  -10px;

        left: -10px;

        width: 40px;

        height:  40px;

        line-height: 40px;

        border-radius:  50%;

        text-align: center;

        color: #fff;

    }

    .circle1{

        background-color: red;

        /* rotateZ控制方向,每个元素旋转30度,12个元素刚好360度。translateY控制每个元素距中心点的距离 */

        transform: rotateZ(30deg) translateY(80px);

    }

    .circle2{

        background-color: orange;

        transform: rotateZ(60deg) translateY(80px);

    }

    .circle3{

        background-color: yellow;

        transform: rotateZ(90deg) translateY(80px);

    }

    .circle4{

        background-color: green;

        transform: rotateZ(120deg) translateY(80px);

    }

    .circle5{

        background-color: seagreen;

        transform: rotateZ(150deg) translateY(80px);

    }

    .circle6{

        background-color: blue;

        transform: rotateZ(180deg) translateY(80px);

    }

    .circle7{

        background-color: purple;

        transform: rotateZ(210deg) translateY(80px);

    }

    .circle8{

        background-color: lightsalmon;

        transform: rotateZ(240deg) translateY(80px);

    }

    .circle9{

        background-color: deeppink;

        transform: rotateZ(270deg) translateY(80px);

    }

    .circle10{

        background-color: lightyellow;

        transform: rotateZ(300deg) translateY(80px);

    }

    .circle11{

        background-color: lightgreen;

        transform: rotateZ(330deg) translateY(80px);

    }

    .circle12{

        background-color: lightslategrey;

        transform: rotateZ(360deg) translateY(80px);

    }

</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<body>

    <div class="center-point"></div>

    <div class="surround-box">

        <div class="circle circle1">1</div>

        <div class="circle circle2">2</div>

        <div class="circle circle3">3</div>

        <div class="circle circle4">4</div>

        <div class="circle circle5">5</div>

        <div class="circle circle6">6</div>

        <div class="circle circle7">7</div>

        <div class="circle circle8">8</div>

        <div class="circle circle9">9</div>

        <div class="circle circle10">10</div>

        <div class="circle circle11">11</div>

        <div class="circle circle12">12</div>

    </div>

</body>

以上就是css3如何实现元素环绕中心点布局(代码示例)的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

如何使用html5中postmessage实现ajax中的post跨域问题的详细介绍

html5触摸事件实现移动端简易进度条的实现方法

如何解决html5微信播放全屏问题的方法

html5 video视频字幕的使用和制作方法

CSS3常见新特性介绍

h5完成多图片上传的实例详解

CSS3 transition-duration属性怎么用

CSS3如何实现聊天气泡效果?(代码示例)

CSS3如何实现图片平移

如何html标签和js中设置CSS3 var变量

更多相关阅读请进入《CSS3》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...