CSS 怎么实现这样的轮播图效果?

aaup
  • 0
新手上路,请多包涵

image.png

像是一个圆形环绕一样,但是要是轮播图的效果,有没有遇到过这种需求,求一份demo或者解决思路,我主要是做后端开发,前端比较菜。。

回复
阅读 184
1 个回答
<html>
    <head>
        <title>option chain</title>
        <meta charset="utf-8" />
        <style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            div{
                height: 50px;
                aspect-ratio: 1;
                line-height: 50px;
                text-align: center;
                border: 1px solid red;
                transform: rotate(var(--rotate)) translateX(100px);
                position: absolute;
                top: 400px;
                left: 400px;
            }
            div:nth-of-type(1) {
                --rotate: -50deg; 
            }
            div:nth-of-type(2) {
                --rotate: -80deg; 
            }
            div:nth-of-type(3) {
                --rotate: -110deg; 
            }
            div:nth-of-type(4) {
                --rotate: -140deg; 
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </body>
</html>

类似这样?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏