圆环

思路:div套div的形式,这样transform-origin就不会变

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background: red;
        }
        .box1
        {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background:blue;
            transform: scale(0.5,0.5);
        }
        .box2{
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background:#f60;
            transform: scale(.8,0.8);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">
        <div class="box2">
        
    </div>
    </div>
    
</div>

</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 效果展示 没掌握上传动图的操作,这里就先截静态图吧 实现思路 自己的思路 一开始看到这个图的时候,想着应该不难 外...
    半生不熟_阅读 5,947评论 5 19
  • 本文主要想谈一谈前端关于渐变圆环的制作,效果图如下: 注意:部分iphone 不支持css3旋转大于等于90度,故...
    花伊侬阅读 6,020评论 0 2
  • 作者:黄铭峰 木桶原理应该是大家比较熟悉的例子,木桶里的水所承载的量取决于那块最短的短板的高度,而不是其他更高的板...
    通识智库阅读 745评论 0 1
  • 我想你,直道相思了无益,特别的惦念,仅仅是一天,竟然难以忍受,心情莫名的烦躁,想借酒浇愁,奈何无人共饮?心里的情意...
    岁月静好7812阅读 210评论 0 0
  • 我 知晓未来 所以 每一次与你的擦肩而过 我都知晓 可你精致的无辜的眼神 告诉我 什么是无疾而终 你不知道我有多么...
    江行攸阅读 160评论 0 1

友情链接更多精彩内容