使用 html css 和 javascript 的智能屏幕动画-js教程-PHP中文网

使用 html css 和 javascript 的智能屏幕动画
Linda Hamilton
发布： 2024-11-21 13:52:35
原创
872 人浏览过
Smart Screen Animation using html css and javascript
<html lang="zh-cn">
<头>
    
    
    <title>智慧屏菜单</title>
    
        身体 {
            显示：柔性；
            调整内容：居中；
            对齐项目：居中；
            高度：100vh；
            背景颜色：#1c1c1e；
            保证金：0；
            溢出：隐藏；
        }

        .菜单容器{
            位置：相对；
            宽度：250px；
            高度：250 像素；
        }

        .背景圆{
            位置：绝对；
            顶部：50%；
            左：50%；
            变换：平移（-50%，-50%）缩放（0）；
            宽度：200px；
            高度：200px；
            背景颜色：#ffffff30；
            边界半径：50%；
            过渡：变换0.4s缓出；
        }

        .center-btn {
            位置：绝对；
            顶部：50%；
            左：50%；
            变换：翻译（-50%，-50%）；
            宽度：60 像素；
            高度：60 像素；
            背景颜色：#009688； /* 青色 */
            边界半径：50%；
            显示：柔性；
            调整内容：居中；
            对齐项目：居中；
            颜色：#ffffff；
            字体大小：24px；
            光标：指针；
            过渡：变换 0.3s 缓动，背景颜色 0.3s 缓动；
        }

        .center-btn.open-icon::之前{
            内容： '？'; /* 展开图标 */
        }

        .center-btn.close-icon::之前{
            内容： '？'; /* 折叠图标 */
        }

        .center-btn:悬停{
            变换：平移（-50%，-50%）缩放（1.1）；
            背景颜色：#00695c；
        }

        。选项 {
            位置：绝对；
            顶部：50%；
            左：50%；
            变换：平移（-50%，-50%）缩放（0）；
            宽度：50px；
            高度：50px；
            背景颜色：#2c2c2e；
            边界半径：50%；
            显示：柔性；
            调整内容：居中；
            对齐项目：居中；
            颜色：#aaa；
            字体大小：18px；
            光标：指针；
            不透明度：0；
            过渡：全部 0.4s 缓和；
        }

        .option.selected {
            背景颜色：#ffdd59；
            颜色：#000；
        }

        .option.selected::之前{
            内容： '';
            位置：绝对；
            顶部：-15px；
            显示：块；
            宽度：5px；
            高度：5px；
            背景颜色：#ffdd59；
            边界半径：50%；
        }.option.selected::after {
            内容： '';
            位置：绝对；
            顶部：-8px；
            宽度：15 像素；
            高度：3px；
            背景颜色：#ffdd59；
            变换：翻译（-3px，10px）；
        }

        .选项：悬停{
            背景颜色：#ffd93d；
            颜色：#000；
        }

        /* 外圆和从中心开始的动画 */
        .menu-container.open .background-circle {
            变换：平移（-50%，-50%）缩放（1）；
        }

        .menu-container.open .option {
            不透明度：1；
            指针事件：全部；
        }

        /* 图标的单独位置 */
        .brightness { 变换：翻译(-50%, -50%) 翻译(-100px, 0); }
        .wifi { 变换：翻译（-50%，-50%） 翻译（-70px，-70px）; }
        .airplane { 变换：翻译(-50%, -50%) 翻译(0, -100px); }
        .bluetooth { 变换：翻译（-50%，-50%） 翻译（70px，-70px）; }
        .flashlight { 变换：翻译(-50%, -50%) 翻译(100px, 0); }
        .location { 变换：翻译(-50%, -50%) 翻译(70px, 70px); }
        .dnd { 变换：翻译(-50%, -50%) 翻译(0, 100px); }
        .screenshot { 变换：翻译(-50%, -50%) 翻译(-70px, 70px); }

        .menu-container.open .brightness { 变换：翻译(-50%, -50%) 翻译(-100px, 0) 缩放(1); }
        .menu-container.open .wifi { 变换：翻译（-50%，-50%） 翻译（-70px，-70px） 缩放（1）; }
        .menu-container.open .airplane { 变换：翻译(-50%, -50%) 翻译(0, -100px) 缩放(1); }
        .menu-container.open .bluetooth { 变换：翻译（-50%，-50%） 翻译（70px，-70px） 缩放（1）; }
        .menu-container.open .flashlight { 变换：翻译(-50%, -50%) 翻译(100px, 0) 缩放(1); }
        .menu-container.open .location { 变换：翻译(-50%, -50%) 翻译(70px, 70px) 缩放(1); }
        .menu-container.open .dnd { 变换：翻译(-50%, -50%) 翻译(0, 100px) 缩放(1); }
        .menu-container.open .screenshot { 变换：翻译(-50%, -50%) 翻译(-70px, 70px) 缩放(1); }
    </风格>
</头>

    <div>




          </div>
登录后复制
以上是使用 html css 和 javascript 的智能屏幕动画的详细内容。更多信息请关注PHP中文网其他相关文章！