使用HTML5 CSS3模仿IOS 10的弹出消息框动画

IOS 10 message popup

html5, template, app

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 5277
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var target = document.getElementById("mesP");
var pdown = 0;

var toblur = document.getElementById("toblur");
var message_panel = document.getElementById("mesP");
var keyb = document.getElementById("keyb");

target.addEventListener("mousedown", function() {
    target.addEventListener("mousemove", function() {
        pdown++;
        if (pdown == 6) {
            message_panel.classList.add("message-popup");
            toblur.classList.add("blur-filter");

setTimeout(function() {
                message_panel.classList.add("message-popup2");
                keyb.style.height = "190px";

}, 500);
        }
    });
});

toblur.addEventListener("click", function() {
    toblur.classList.remove("blur-filter");
    keyb.style.height = "0";

message_panel.classList.remove("message-popup2");

setTimeout(function() {
        message_panel.classList.remove("message-popup");
    }, 500)

setTimeout(function() {
        message_panel.style.transform = "scale(0)";
    }, 700)

});

var scalable = document.getElementById("can-scale");
var width = window.innerWidth;
var height = 500;
var scale = 0;

scale = window.innerHeight / 600;
scalable.style.transform = "scale(" + scale + ")";

window.addEventListener("resize", function() {
    scale = window.innerHeight / 600;
    scalable.style.transform = "scale(" + scale + ")";

})

编译

CSS

/**note:: image on BG is not mine. **/

body {
    background-color: #ffdbdb;
    height: 100%;
    width: 100%;
    font-family: open sans;
}
.panel {
    width: 310px;
    height: 495px;
    background-color: #000;
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 0px 15px 15px 5px rgba(0, 0, 0, 0.3);
}
.time-panel {
    width: 100%;
    position: absolute;
    z-index: 1;
}
.time-panel span {
    color: #fff;
    font-size: 70px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 55px;
    font-weight: 300;
}
.time-panel span:nth-child(2) {
    font-size: 15px;
    top: 140px;
}
.imagebg {
    background-image: url("/uploads/160101/blue-bg.jpg");
    height: 100%;
    width: 100%;
    position: absolute;
    filter: opacity(0.8);
    background-position: 450px 0px;
    background-size: 150% 100%;
}
.message-panel,
.message-popup {
    width: 92%;
    height: 85px;
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
    margin-left: auto;
    margin-right: auto;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.message-panel:before,
.message-popup:before {
    height: 8px;
    width: 80px;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    content: "";
    left: 30px;
    top: 8px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.message-panel:after,
.message-popup:after {
    height: 8px;
    width: 20px;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    content: "";
    left: 254px;
    top: 8px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.message-panel .mes,
.message-popup .mes {
    position: absolute;
    bottom: 0;
    height: 70%;
    background: #eaeaea;
    width: 100%;
    -moz-border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px;
    border-radius: 0px 0px 10px 10px;
}
.message-panel .mes:before,
.message-popup .mes:before {
    background: rgba(0, 0, 0, 0.1);
    height: 10px;
    width: 190px;
    position: absolute;
    content: "";
    left: 10px;
    top: 15px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.message-panel .mes:after,
.message-popup .mes:after {
    background: rgba(0, 0, 0, 0.1);
    height: 10px;
    width: 140px;
    position: absolute;
    content: "";
    left: 10px;
    top: 35px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.message-panel .mes-icon,
.message-popup .mes-icon {
    position: absolute;
    left: 5px;
    top: 5px;
    height: 15px;
    width: 16px;
    background: #42b365;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.message-panel .mes-icon:before,
.message-popup .mes-icon:before {
    height: 9px;
    width: 9px;
    background: #fff;
    content: "";
    position: absolute;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    left: 4px;
    top: 3px;
}
.message-popup {
    height: 400px;
    top: 10%;
    z-index: 2;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.message-popup:after {
    width: 10px;
    height: 10px;
    left: 260px;
    top: 5px;
}
.message-popup .mes {
    height: 93%;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
}
.message-popup .mes:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    background: #ccc;
    top: 43px;
    left: 12px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
.message-popup .mes:after {
    position: absolute;
    content: "";
    height: 30px;
    width: 22px;
    background: #fff;
    top: 38px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    left: 2px;
}
.message-popup .mes div {
    background: #ccc;
    height: 40px;
    width: 140px;
    position: absolute;
    z-index: 2;
    left: 22px;
    top: 20px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
.blur-filter {
    filter: blur(8px);
}
.message-popup2 {
    height: 230px;
    top: 4%;
}
.message-popup2 .mes {
    height: 90%;
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
}
.keyboard {
    position: absolute;
    height: 0;
    background: #dcdfe1;
    width: 100%;
    bottom: 0;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.keyboard .input-field {
    position: absolute;
    width: 100%;
    height: 35px;
    background: #f2f2f2;
    top: 0;
}
.keyboard .input-field:after {
    content: "";
    position: absolute;
    width: 80%;
    left: 15%;
    height: 24px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: #fff;
    top: 4px;
}
.keyboard .input-field:before {
    content: "";
    position: absolute;
    width: 23px;
    height: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #b2b6b9;
    left: 10px;
    top: 8px;
}
.keyboard .input-field button {
    height: 20px;
    width: 20px;
    background: #b2b6b9;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    position: absolute;
    right: 18px;
    z-index: 2;
    border: 0;
    box-shadow: 0;
    top: 7px;
}
.keyboard .keys {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 80%;
    bottom: 0;
}
.keyboard .keys span {
    height: 25px;
    width: 24px;
    background: #fff;
    position: absolute;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.3);
}
.keyboard .keys span:nth-child(1) {
    left: 8px;
    top: 5px;
}
.keyboard .keys span:nth-child(2) {
    left: 38px;
    top: 5px;
}
.keyboard .keys span:nth-child(3) {
    left: 68px;
    top: 5px;
}
.keyboard .keys span:nth-child(4) {
    left: 98px;
    top: 5px;
}
.keyboard .keys span:nth-child(5) {
    left: 128px;
    top: 5px;
}
.keyboard .keys span:nth-child(6) {
    left: 158px;
    top: 5px;
}
.keyboard .keys span:nth-child(7) {
    left: 188px;
    top: 5px;
}
.keyboard .keys span:nth-child(8) {
    left: 218px;
    top: 5px;
}
.keyboard .keys span:nth-child(9) {
    left: 248px;
    top: 5px;
}
.keyboard .keys span:nth-child(10) {
    left: 278px;
    top: 5px;
}
.keyboard .keys:nth-child(3) {
    top: 75px;
}
.keyboard .keys:nth-child(3) span:nth-child(1) {
    left: 20px;
    top: 5px;
}
.keyboard .keys:nth-child(3) span:nth-child(2) {
    left: 50px;
    top: 5px;
}
.keyboard .keys:nth-child(3) span:nth-child(3) {
    left: 80px;
    top: 5px;
}
.keyboard .keys:nth-child(3) span:nth-child(4) {
    left: 110px;
    top: 5px;
}
.keyboard .keys:nth-child(3) span:nth-child(5) {
    left: 140px;
    top: 5px;
}
.keyboard .keys:nth-child(3) span:nth-child(6) {
    left: 170px;
    top: 5px;
}
.keyboard .keys:nth-child(3) span:nth-child(7) {
    left: 200px;
    top: 5px;
}
.keyboard .keys:nth-child(3) span:nth-child(8) {
    left: 230px;
    top: 5px;
}
.keyboard .keys:nth-child(3) span:nth-child(9) {
    left: 260px;
    top: 5px;
}
.keyboard .keys:nth-child(3) span:nth-child(10) {
    left: 290px;
    top: 5px;
}
.keyboard .keys:nth-child(4) {
    top: 112px;
}
.keyboard .keys:nth-child(4) span:nth-child(1) {
    left: 20px;
    top: 5px;
}
.keyboard .keys:nth-child(4) span:nth-child(1) {
    left: 10px;
    width: 30px;
}
.keyboard .keys:nth-child(4) span:nth-child(9) {
    width: 35px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(4) span:nth-child(2) {
    left: 50px;
    top: 5px;
}
.keyboard .keys:nth-child(4) span:nth-child(1) {
    left: 10px;
    width: 30px;
}
.keyboard .keys:nth-child(4) span:nth-child(9) {
    width: 35px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(4) span:nth-child(3) {
    left: 80px;
    top: 5px;
}
.keyboard .keys:nth-child(4) span:nth-child(1) {
    left: 10px;
    width: 30px;
}
.keyboard .keys:nth-child(4) span:nth-child(9) {
    width: 35px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(4) span:nth-child(4) {
    left: 110px;
    top: 5px;
}
.keyboard .keys:nth-child(4) span:nth-child(1) {
    left: 10px;
    width: 30px;
}
.keyboard .keys:nth-child(4) span:nth-child(9) {
    width: 35px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(4) span:nth-child(5) {
    left: 140px;
    top: 5px;
}
.keyboard .keys:nth-child(4) span:nth-child(1) {
    left: 10px;
    width: 30px;
}
.keyboard .keys:nth-child(4) span:nth-child(9) {
    width: 35px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(4) span:nth-child(6) {
    left: 170px;
    top: 5px;
}
.keyboard .keys:nth-child(4) span:nth-child(1) {
    left: 10px;
    width: 30px;
}
.keyboard .keys:nth-child(4) span:nth-child(9) {
    width: 35px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(4) span:nth-child(7) {
    left: 200px;
    top: 5px;
}
.keyboard .keys:nth-child(4) span:nth-child(1) {
    left: 10px;
    width: 30px;
}
.keyboard .keys:nth-child(4) span:nth-child(9) {
    width: 35px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(4) span:nth-child(8) {
    left: 230px;
    top: 5px;
}
.keyboard .keys:nth-child(4) span:nth-child(1) {
    left: 10px;
    width: 30px;
}
.keyboard .keys:nth-child(4) span:nth-child(9) {
    width: 35px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(4) span:nth-child(9) {
    left: 265px;
    top: 5px;
}
.keyboard .keys:nth-child(4) span:nth-child(1) {
    left: 10px;
    width: 30px;
}
.keyboard .keys:nth-child(4) span:nth-child(9) {
    width: 35px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(4) span:nth-child(10) {
    left: 290px;
    top: 5px;
}
.keyboard .keys:nth-child(4) span:nth-child(1) {
    left: 10px;
    width: 30px;
}
.keyboard .keys:nth-child(4) span:nth-child(9) {
    width: 35px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(5) {
    top: 150px;
}
.keyboard .keys:nth-child(5) span:nth-child(1) {
    width: 30px;
}
.keyboard .keys:nth-child(5) span:nth-child(2) {
    width: 30px;
    left: 45px;
}
.keyboard .keys:nth-child(5) span:nth-child(3) {
    width: 26px;
    left: 82px;
}
.keyboard .keys:nth-child(5) span:nth-child(4) {
    width: 110px;
    left: 118px;
}
.keyboard .keys:nth-child(5) span:nth-child(5) {
    width: 62px;
    left: 238px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(5) span:nth-child(1) {
    width: 30px;
}
.keyboard .keys:nth-child(5) span:nth-child(2) {
    width: 30px;
    left: 45px;
}
.keyboard .keys:nth-child(5) span:nth-child(3) {
    width: 26px;
    left: 82px;
}
.keyboard .keys:nth-child(5) span:nth-child(4) {
    width: 110px;
    left: 118px;
}
.keyboard .keys:nth-child(5) span:nth-child(5) {
    width: 62px;
    left: 238px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(5) span:nth-child(1) {
    width: 30px;
}
.keyboard .keys:nth-child(5) span:nth-child(2) {
    width: 30px;
    left: 45px;
}
.keyboard .keys:nth-child(5) span:nth-child(3) {
    width: 26px;
    left: 82px;
}
.keyboard .keys:nth-child(5) span:nth-child(4) {
    width: 110px;
    left: 118px;
}
.keyboard .keys:nth-child(5) span:nth-child(5) {
    width: 62px;
    left: 238px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(5) span:nth-child(1) {
    width: 30px;
}
.keyboard .keys:nth-child(5) span:nth-child(2) {
    width: 30px;
    left: 45px;
}
.keyboard .keys:nth-child(5) span:nth-child(3) {
    width: 26px;
    left: 82px;
}
.keyboard .keys:nth-child(5) span:nth-child(4) {
    width: 110px;
    left: 118px;
}
.keyboard .keys:nth-child(5) span:nth-child(5) {
    width: 62px;
    left: 238px;
    background: #a3a7a9;
}
.keyboard .keys:nth-child(5) span:nth-child(1) {
    width: 30px;
}
.keyboard .keys:nth-child(5) span:nth-child(2) {
    width: 30px;
    left: 45px;
}
.keyboard .keys:nth-child(5) span:nth-child(3) {
    width: 26px;
    left: 82px;
}
.keyboard .keys:nth-child(5) span:nth-child(4) {
    width: 110px;
    left: 118px;
}
.keyboard .keys:nth-child(5) span:nth-child(5) {
    width: 62px;
    left: 238px;
    background: #a3a7a9;
}

HTML

<div class="message-panel" id="mesP">
        <div class="mes-icon"></div>
        <div class="mes">
            <div></div>
        </div>
    </div>

</div>
</div>

IOS 10 message popup

html5, template, app

编辑器支持Emmet

快捷键

IOS 10 message popup

html5, template, app

HTML5 CSS3使用纵向时间轴（时间线）实现的个人简历模板

HTML5 Zepto.js 移动版本（微信H5）的2015春节回家温情动画网页应用模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：