day36-Hoverboard(悬浮滑板)

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

day36-Hoverboard(悬浮滑板)

效果

day36-Hoverboard(悬浮滑板)_第1张图片

index.html

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hoverboardtitle>
    <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)]
}

你可能感兴趣的:(50天50个小demo前端,html5,css3,javascript,前端)