HTML旋转照片盒子

效果图

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>旋转小方块</title>
        <link rel="stylesheet" href="css.css">
</head>
<body>
        <div class="wrapper">
                <div class="item1"></div>
                <div class="move1"><img src="img/1.png" alt=""></div>
                <div class="item2"></div>
                <div class="move2"><img src="img/2.png" alt=""></div>
                <div class="item3"></div>
                <div class="move3"><img src="img/3.png" alt=""></div>
                <div class="item4"></div>
                <div class="move4"><img src="img/4.png" alt=""></div>
                <div class="item5"></div>
                <div class="move5"><img src="img/5.png" alt=""></div>
                <div class="item6"></div>
                <div class="move6"><img src="img/6.png" alt=""></div>
        </div>
        <script>
                var wra = document.getElementsByClassName('wrapper')[0];
                var move1 = document.getElementsByClassName('move1')[0];
                var move2 = document.getElementsByClassName('move2')[0];
                var move3 = document.getElementsByClassName('move3')[0];
                var move4 = document.getElementsByClassName('move4')[0];
                var move5 = document.getElementsByClassName('move5')[0];
                var move6 = document.getElementsByClassName('move6')[0];
                console.log(move5);
                var key = true;
                wra.onmouseenter = function(e){
                        // wra.style.animationPlayState = 'paused';
                        move1.style.animation = 'move1 2s linear infinite';
                        move2.style.animation = 'move2 2s linear infinite';
                        move3.style.animation = 'move3 2s linear infinite';
                        move4.style.animation = 'move4 2s linear infinite';
                        move5.style.animation = 'move5 2s linear infinite';
                        move6.style.animation = 'move6 2s linear infinite';
                  
                }
                wra.onmouseleave = function(e){
                        // wra.style.animationPlayState = 'paused';
                        move1.style.animation = '';
                        move2.style.animation = '';
                        move3.style.animation = '';
                        move4.style.animation = '';
                        move5.style.animation = '';
                        move6.style.animation = '';
                }
        </script>
</body>
</html>

CSS样式代码私聊有偿获取昂

相关推荐
web守墓人35 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L41 分钟前
CSS知识复习5
前端·css
许白掰42 分钟前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir8 小时前
vue3.2 前端动态分页算法
前端·算法