jquery制作漂亮的弹出层提示消息特效

2020-05-22 17:11:41易采站长站整理

            font-size: 3.8rem;
            padding-top: 10px;
            border-radius: 50%;
            opacity: 0;
            transition: transform 0.2s 0.25s cubic-bezier(0.31, 0.25, 0.5, 1.5), opacity 0.1s 0.25s ease-in-out;
        }
        .message .scaledown
        {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
        .message p
        {
            font-size: 1.1rem;
            margin: 25px 0px;
            padding: 0;
        }
        .message p:nth-child(2)
        {
            font-size: 2.3rem;
            margin: 40px 0px 0px 0px;
        }
        .message #ok
        {
            position: relative;
            color: white;
            border: 0;
            background: #71c341;
            width: 100%;
            height: 50px;
            border-radius: 6px;
            font-size: 1.2rem;
            transition: background 0.2s ease;
            outline: none;
        }
        .message #ok:hover
        {
            background: #8ecf68;
        }
        .message #ok:active