Home > Article > Web Front-end > Smart Screen Animation using html css and javascript

Smart Screen Animation using html css and javascript

Linda HamiltonOriginal: 2024-11-21 13:52:35793browse

<!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>

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!

JavaScript css html using pointer location display position overflow margin border viewport background transform transition animation flex

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Why Aren\'t My Local Images Loading in My React App?Next article：Why Aren\'t My Local Images Loading in My React App?

See more

Smart Screen Animation using html css and javascript

Related articles