day36-Hoverboard（悬浮滑板）

最新推荐文章于 2024-08-16 11:28:54 发布

格式化小拓

最新推荐文章于 2024-08-16 11:28:54 发布

阅读量166

点赞数

分类专栏： 50天50个小demo前端文章标签： html5 css3 javascript 前端

本文链接：https://blog.csdn.net/qq_51523316/article/details/131905000

版权

50天50个小demo前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

50 天学习 50 个项目 - HTMLCSS and JavaScript

day36-Hoverboard（悬浮滑板）

效果

在这里插入图片描述

index.html

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hoverboard</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 容器 -->
    <div class="container" id="container"></div>
    <script src="script.js"></script>
</body>

</html>

style.css

* {
    box-sizing: border-box;
}

body {
    background-color: #111;
    /* 子元素居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 容器 */
.container {
    /* 子元素居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 400px;
}

/* 方块 */
.square {
    background-color: #1d1d1d;
    box-shadow: 0 0 2px #000;
    height: 16px;
    width: 16px;
    margin: 2px;
    /* 5s 是过渡的持续时间 也是此时方块的显示颜色时间 */
    transition: all 5s ease;
}

/* 悬浮方块时 */
.square:hover {
    /* 过渡时间为0 */
    transition-duration: 0s;
}

script.js

// 重点 flex  transition
// 1.获取元素节点
const container = document.getElementById('container')//容器
const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']//颜色
const SQUARES = 500 //方块数量
// 2.遍历绑定事件
for (let i = 0; i < SQUARES; i++) {
    // 创建方块
    const square = document.createElement('div')
    // 添加方块样式
    square.classList.add('square')
    // 鼠标经过 设置颜色
    square.addEventListener('mouseover', () => setColor(square))
    // 鼠标移出 去除颜色
    square.addEventListener('mouseout', () => removeColor(square))
    // 将方块添加置容器中
    container.appendChild(square)
}
// 函数：设置元素颜色
function setColor(element) {
    const color = getRandomColor()
    element.style.background = color
    element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
}
// 函数：将元素的颜色恢复为默认效果
function removeColor(element) {
    element.style.background = '#1d1d1d'
    element.style.boxShadow = '0 0 2px #000'
}
// 函数：随机获取颜色值
function getRandomColor() {
    return colors[Math.floor(Math.random() * colors.length)]
}

格式化小拓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day36-Hoverboard（悬浮滑板）

50 天学习 50 个项目 - HTMLCSS and JavaScriptday36-Hoverboard（悬浮滑板）效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
复制链接

扫一扫

专栏目录