Smart Screen Animation using html css and javascript-JS Tutorial-php.cn

Smart Screen Animation using html css and javascript
Linda Hamilton
Release： 2024-11-21 13:52:35
Original
793 people have browsed it
Smart Screen Animation using html css and javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Screen Menu</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #1c1c1e;
            margin: 0;
            overflow: hidden;
        }

        .menu-container {
            position: relative;
            width: 250px;
            height: 250px;
        }

        .background-circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 200px;
            height: 200px;
            background-color: #ffffff30;
            border-radius: 50%;
            transition: transform 0.4s ease-out;
        }

        .center-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-color: #009688; /* Teal color */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            font-size: 24px;
            cursor: pointer;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        .center-btn.open-icon::before {
            content: '?'; /* Expand icon */
        }

        .center-btn.close-icon::before {
            content: '?'; /* Collapse icon */
        }

        .center-btn:hover {
            transform: translate(-50%, -50%) scale(1.1);
            background-color: #00695c;
        }

        .option {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 50px;
            height: 50px;
            background-color: #2c2c2e;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #aaa;
            font-size: 18px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.4s ease;
        }

        .option.selected {
            background-color: #ffdd59;
            color: #000;
        }

        .option.selected::before {
            content: '';
            position: absolute;
            top: -15px;
            display: block;
            width: 5px;
            height: 5px;
            background-color: #ffdd59;
            border-radius: 50%;
        }.option.selected::after {
            content: '';
            position: absolute;
            top: -8px;
            width: 15px;
            height: 3px;
            background-color: #ffdd59;
            transform: translate(-3px, 10px);
        }

        .option:hover {
            background-color: #ffd93d;
            color: #000;
        }

        /* Outer circle and animation from center */
        .menu-container.open .background-circle {
            transform: translate(-50%, -50%) scale(1);
        }

        .menu-container.open .option {
            opacity: 1;
            pointer-events: all;
        }

        /* Individual positions of icons */
        .brightness { transform: translate(-50%, -50%) translate(-100px, 0); }
        .wifi { transform: translate(-50%, -50%) translate(-70px, -70px); }
        .airplane { transform: translate(-50%, -50%) translate(0, -100px); }
        .bluetooth { transform: translate(-50%, -50%) translate(70px, -70px); }
        .flashlight { transform: translate(-50%, -50%) translate(100px, 0); }
        .location { transform: translate(-50%, -50%) translate(70px, 70px); }
        .dnd { transform: translate(-50%, -50%) translate(0, 100px); }
        .screenshot { transform: translate(-50%, -50%) translate(-70px, 70px); }

        .menu-container.open .brightness { transform: translate(-50%, -50%) translate(-100px, 0) scale(1); }
        .menu-container.open .wifi { transform: translate(-50%, -50%) translate(-70px, -70px) scale(1); }
        .menu-container.open .airplane { transform: translate(-50%, -50%) translate(0, -100px) scale(1); }
        .menu-container.open .bluetooth { transform: translate(-50%, -50%) translate(70px, -70px) scale(1); }
        .menu-container.open .flashlight { transform: translate(-50%, -50%) translate(100px, 0) scale(1); }
        .menu-container.open .location { transform: translate(-50%, -50%) translate(70px, 70px) scale(1); }
        .menu-container.open .dnd { transform: translate(-50%, -50%) translate(0, 100px) scale(1); }
        .menu-container.open .screenshot { transform: translate(-50%, -50%) translate(-70px, 70px) scale(1); }
    </style>
</head>
<body>
    <div>
Copy after login
The above is the detailed content of Smart Screen Animation using html css and javascript. For more information, please follow other related articles on the PHP Chinese website!