原生js编写一个虚拟dom效果代码

代码语言:html

所属分类:布局界面

代码描述:原生js编写一个虚拟dom效果代码

代码标签: 一个 虚拟 dom 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

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

<head>

    <meta charset="UTF-8">


    <style>
        html, body {
            font: 15px/1.3 system-ui,sans-serif;
            background: #333;
            overflow: hidden;
        }
        .background {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url(//repo.bfw.wiki/bfwrepo/image/5e965addb956a.png) center/cover #f4f4f4;
            opacity: 0.5;
        }
        #demo {
            width: 280px;
            position: absolute;
            right: 25px;
            top: 50%;
            transform: translateY(-50%);
            padding: 10px;
            background: #f4f4f4;
            border-radius: 5px;
            box-shadow: 0 10px 40px #000;
            z-index: 2;
        }

        * {
            animation: flash 500ms ease;
        }
@keyframes flash {
            from {
                box-shadow: inset 0 0 2px 2px rebeccapurple, 0 0 2px 2px rebeccapurple;
            }
        }


        ul {
            font-size: 90%;
        }

        .kids {
            min-height: 100px;
            background: #eee;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
            margin: 2px 0 0;
            border-radius: 3px;
            .........完整代码请登录后点击上方下载按钮下载查看

网友评论0