【CSS3+JQuery】实现万花筒旋转效果

最新推荐文章于 2023-02-04 09:09:26 发布

夹心776655

最新推荐文章于 2023-02-04 09:09:26 发布

阅读量292

点赞数

分类专栏：代码实例 js交互设计文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/qq_37086980/article/details/111573821

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

描述:使用css3动画使四个盒子旋转,每隔500ms随机一个div改变成随机背景色, 利用 rgb(255, 255, 255)

在这里插入图片描述

技术点

1.CSS3旋转

2.随机改变颜色

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子旋转变色</title>
    <style>
        #wrap {
            width: 500px;
            height: 500px;
            margin: 10px auto;
            position: relative;
        }

        #wrap .position {
            position: absolute;
            left: 50%;
            top: 50%;
        }

        #wrap .box4 {
            width: 400px;
            height: 400px;
            background-color: #DB4A82;
            margin-top: -200px;
            margin-left: -200px;
            animation: clockwise 3s linear infinite;
        }

        #wrap .box3 {
            width: 300px;
            height: 300px;
            background-color: #E1EEBD;
            margin-top: -150px;
            margin-left: -150px;
            animation: anticlockwise 3s linear infinite;
        }

        #wrap .box2 {
            width: 200px;
            height: 200px;
            background-color: #C46DBE;
            margin-top: -100px;
            margin-left: -100px;
            animation: clockwise1 3s linear infinite;
        }

        #wrap .box1 {
            width: 100px;
            height: 100px;
            background-color: #C7CB8E;
            margin-top: -50px;
            margin-left: -50px;
            animation: anticlockwise 3s linear infinite;
        }

        /* 定义动画 */
        @keyframes clockwise {
            0% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(180deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes clockwise1 {
            0% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(360deg);
            }

            100% {
                transform: rotate(720deg);
            }
        }

        @keyframes anticlockwise {
            0% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(-360deg);
            }

            100% {
                transform: rotate(-720deg);
            }
        }
    </style>
</head>

<body>
    <!-- 1.布局 -->
    <div id="wrap">
        <div class="box4 position">
            <div class="box3 position">
                <div class="box2 position">
                    <div class="box1 position"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 2.改变背景色 -->
    <script src="./jquery.js"></script>
    <script>
        // 设置背景色
        setInterval(function () {
            // 用随机数取数a,b,c三个值, 都在0-255之间
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            var bgColor = "rgb(" + r + "," + g + "," + b + ")";
            // 在1-4之间
            var index = Math.floor(Math.random() * ($('div').length - 1) + 1);
            // console.log(index);
            // console.log(bgColor);
            // box.style.background = bgColor;
            $('div').eq(index).css('background', bgColor);
        }, 500);
    </script>
</body>

</html>

夹心776655

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS3+JQuery】实现万花筒旋转效果

描述:使用css3动画使四个盒子旋转,每隔500ms 随机一个div 改变成随机背景色 rgb(255, 255, 255)技术点1.CSS3旋转2.随机改变颜色代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫

专栏目录