一. 简单的CSS摩天轮

最新推荐文章于 2023-03-28 20:24:45 发布

BLUE卡比

最新推荐文章于 2023-03-28 20:24:45 发布

阅读量280

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_42104282/article/details/111245835

版权

body代码

<body>
  <div id="d1">1
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

css代码

<style>
    #d1{
      width: 400px ;
      height: 400px;
      border-radius: 200px;
      background-color: lightblue;
      position:relative;
      line-height: 400px; /*文本居中*/
      text-align: center; /*文本居中*/
      animation: a 10s linear infinite;
    }
    #d1 div{
      width: 100px;height: 100px;
      border:1px solid red;
      position: absolute;
      text-align: center;
      line-height: 100px;
      animation: b 10s linear infinite;
    }

    div:nth-child(1){
      left:300px;
      top:0px;
    }
    div:nth-child(2){
      left:0px;
      top:0px
    }
    div:nth-child(3){
      left:150px;
      top:350px;
    }
    @keyframes a { /*父元素顺时针旋转*/
      from { transform: rotate(0deg);}
      to { transform: rotate(360deg);}
    }
    @keyframes b {/*子元素逆时针旋转，抵消父元素影响，视觉形成子元素自身不变的效果*/
      from { transform: rotate(0deg);}
      to { transform: rotate(-360deg);}
    }
  </style>

效果图

在这里插入图片描述

BLUE卡比

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一. 简单的CSS摩天轮

body代码<body> <div id="d1">1 <div>2</div> <div>3</div> <div>4</div> </div>css代码<style> #d1{ width: 400px ; height: 400px; border-radius: 200px; backg
复制链接

扫一扫