当前位置：文江博客话题详情

JavaScript HTML5 CSS3 Vue.js

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

发布于 2022-09-13 00:07:53 字数 136 浏览 15 评论 0

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

如此安好 2022-09-20 00:07:53

<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>

类似这样？

~没有更多了~

关于作者

暂无简介

文章

评论

24 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

情深如许

文章 0 评论 0

小镇女孩

文章 0 评论 0

谁的年少不轻狂

文章 0 评论 0

见鹿。

文章 0 评论 0

atoothache

文章 0 评论 0

github_Ya3wWzbdC

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文