如何让吴磊、易烊千玺、肖站等小鲜肉围着你转

最新推荐文章于 2024-07-26 08:00:00 发布

windylimiao

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量226

点赞数

文章标签： css

本文链接：https://blog.csdn.net/miao9999/article/details/112104593

版权

话不多说，先上效果图

在这里插入图片描述

接下来看如何实现。

用到的知识点就是 css 中的 position 属性，以及 transform、transition 属性。

代码不是很多就直接上代码码了，相关的注释也都写了，应该不难懂。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环形旋转</title>


    <style>

        .container {
            margin: 0 auto;
            position: relative;
            width: 50%;
            height: 1000px;
        }

        .circle-box {
            position: absolute;
            top: 36%;
            left: 41%;
        }

        .center-point {
            position: absolute;
            top: 32%;
            left: 32%;
            width: 240px;

        }

        .circle {
            /* 这里一定要绝对定位，这样位置才能铺开来 */
            position: absolute;
            width: 100px;
            height: 50px;

        }


        .circle img {
            border-radius: 50% 50%;
            width: 100px;

        }

    </style>
</head>

<body>


<div class="container">
    <img class="center-point" src="./image/10.jpeg" alt=""/>
    <div class="circle-box">
        <div class="circle circle0">
            <img src="./image/1.jpg" alt="">
        </div>
        <div class="circle circle1">
            <img src="./image/2.jpg" alt="">
        </div>
        <div class="circle circle2">
            <img src="./image/3.jpg" alt="">
        </div>
        <div class="circle circle3">
            <img src="./image/4.jpg" alt="">
        </div>

        <div class="circle circle4">
            <img src="./image/5.jpg" alt="">

        </div>
        <div class="circle circle5">
            <img src="./image/6.jpg" alt="">

        </div>
        <div class="circle circle6">
            <img src="./image/7.jpeg" alt="">

        </div>
        <div class="circle circle7">
            <img src="./image/8.jpg" alt="">

        </div>
        <div class="circle circle8">
            <img src="./image/9.jpg" alt="">

        </div>

    </div>
</div>


<script src="jquery.min.js"></script>
<script>
    var length = $('.circle').length


    for (var i = 0; i < length; i++) {
        $('.circle').eq(i).css({
            'transform': 'rotate(' + (i * 40) + 'deg) ' + 'translateY(260px) ' + 'rotateZ(-' + (i * 40) + 'deg)',
            'transition': 'all 2s'
        })
    }
    var times = 0

    // 鼠标悬浮到图片上面，触发旋转动画
    // $('.circle-box').hover(function () {
    //     for (var i = 0; i < length; i++) {
    //         $('.circle').eq(i).css({
    //             'transform': 'rotate(' + ((i + times) * 40) + 'deg) ' + 'translateY(260px) ' + 'rotateZ(-' + ((i + times) * 40) + 'deg)',
    //             'transition': 'all 2s'
    //         })
    //     }
    // }, function () {
    //     times++
    // })

    // 每隔 2s 执行一次动画

    setInterval(function(){
        times++ 
        for (var i = 0; i < length; i++) {
            $('.circle').eq(i).css({
                'transform': 'rotate(' + ((i + times) * 40) + 'deg) ' + 'translateY(260px) ' + 'rotateZ(-' + ((i + times) * 40) + 'deg)',
                'transition': 'all 2s'
            })
        }
    },2000)


</script>

</body>

</html>

是不是很简单！

windylimiao

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如何让吴磊、易烊千玺、肖站等小鲜肉围着你转

话不多说，先上效果图接下来看如何实现。用到的知识点就是 css 中的 position 属性，以及 transform、transition 属性。代码不是很多就直接上代码码了，相关的注释也都写了，应该不难懂。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
复制链接

扫一扫