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

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

            border-radius: 6px;
            font-size: 1rem;
            transition: background 0.2s ease;
            outline: none;
        }
        #go:hover
        {
            background: #8ecf68;
        }
        #go:active
        {
            background: #5a9f32;
        }
        .message
        {
            position: absolute;
            top: -200px;
            left: 50%;
            transform: translate(-50%, 0%);
            width: 300px;
            background: white;
            border-radius: 8px;
            padding: 30px;
            text-align: center;
            font-weight: 300;
            color: #2c2928;
            opacity: 0;
            transition: top 0.3s cubic-bezier(0.31, 0.25, 0.5, 1.5), opacity 0.2s ease-in-out;
        }
        .message .check
        {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%) scale(4);
            width: 120px;
            height: 110px;
            background: #71c341;
            color: white;