Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Open
Reset
css
#envelope { position: relative; width: 280px; height: 180px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; margin-left: auto; margin-right: auto; top: 150px; background-color: #00334c; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .front { position: absolute; width: 0; height: 0; z-index: 3; } .flap { border-left: 140px solid transparent; border-right: 140px solid transparent; border-bottom: 82px solid transparent; /* a little smaller */ border-top: 98px solid #00334c; /* a little larger */ -webkit-transform-origin: top; transform-origin: top; } .pocket { border-left: 140px solid #0077B2; border-right: 140px solid #0077B2; border-bottom: 90px solid #006da3; border-top: 90px solid transparent; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .letter { position: relative; background-color: #fff; width: 90%; margin-left: auto; margin-right: auto; height: 90%; top: 5%; border-radius: 6px; box-shadow: 0 2px 26px rgba(0, 0, 0, 0.12); } .letter:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(55%, rgba(215, 227, 239, 0.7)), to(#d7e3ef)); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, rgba(215, 227, 239, 0.7) 55%, #d7e3ef 100%); } .words { position: absolute; left: 10%; width: 80%; height: 14%; background-color: #EEEFF0; } .words.line1 { top: 15%; width: 20%; height: 7%; } .words.line2 { top: 30%; } .words.line3 { top: 50%; } .words.line4 { top: 70%; } .open .flap { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); -webkit-transition: z-index .6s, -webkit-transform .4s ease; transition: z-index .6s, -webkit-transform .4s ease; transition: transform .4s ease, z-index .6s; transition: transform .4s ease, z-index .6s, -webkit-transform .4s ease; z-index: 1; } .close .flap { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transition: z-index 1s, -webkit-transform .4s .6s ease; transition: z-index 1s, -webkit-transform .4s .6s ease; transition: transform .4s .6s ease, z-index 1s; transition: transform .4s .6s ease, z-index 1s, -webkit-transform .4s .6s ease; z-index: 5; } .close .letter { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: z-index 1s, -webkit-transform .4s ease; transition: z-index 1s, -webkit-transform .4s ease; transition: transform .4s ease, z-index 1s; transition: transform .4s ease, z-index 1s, -webkit-transform .4s ease; z-index: 1; } .open .letter { -webkit-transform: translateY(-60px); transform: translateY(-60px); -webkit-transition: z-index .6s, -webkit-transform .4s .6s ease; transition: z-index .6s, -webkit-transform .4s .6s ease; transition: transform .4s .6s ease, z-index .6s; transition: transform .4s .6s ease, z-index .6s, -webkit-transform .4s .6s ease; z-index: 2; } .hearts { position: absolute; top: 90px; left: 0; right: 0; z-index: 2; } .heart { position: absolute; bottom: 0; right: 10%; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: #D00000; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .heart:after { left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } .close .heart { opacity: 0; -webkit-animation: none; animation: none; } .a1 { left: 20%; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 1; -webkit-animation: slideUp 4s linear 1, sideSway 2s ease-in-out 4 alternate; -moz-animation: slideUp 4s linear 1, sideSway 2s ease-in-out 4 alternate; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: .7s; animation-delay: .7s; } .a2 { left: 55%; -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-animation: slideUp 5s linear 1, sideSway 4s ease-in-out 2 alternate; -moz-animation: slideUp 5s linear 1, sideSway 4s ease-in-out 2 alternate; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: .7s; animation-delay: .7s; } .a3 { left: 10%; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; -webkit-animation: slideUp 7s linear 1, sideSway 2s ease-in-out 6 alternate; -moz-animation: slideUp 7s linear 1, sideSway 2s ease-in-out 6 alternate; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: .7s; animation-delay: .7s; } @-webkit-keyframes slideUp { 0% { top: 0; } 100% { top: -600px; } } @keyframes slideUp { 0% { top: 0; } 100% { top: -600px; } } @-webkit-keyframes sideSway { 0% { margin-left: 0px; } 100% { margin-left: 50px; } } @keyframes sideSway { 0% { margin-left: 0px; } 100% { margin-left: 50px; } } body { background-color: #a8e2ff; } .envlope-wrapper { height: 380px; } .reset { text-align: center; } .reset button { font-weight: 800; font-style: normal; -webkit-transition: all .1s linear; transition: all .1s linear; -webkit-appearance: none; background-color: transparent; border: solid 2px #0077B2; border-radius: 4px; color: #0077B2; display: inline-block; font-size: 14px; text-transform: uppercase; margin: 5px; padding: 10px; line-height: 1em; text-decoration: none; min-width: 120px; } .reset button:hover { background-color: #0077B2; color: #fff; }
JavaScript
$( document ).ready(function() { var envelope = $('#envelope'); var btn_open = $("#open"); var btn_reset = $("#reset"); envelope.click( function() { open(); }); btn_open.click( function() { open(); }); btn_reset.click( function() { close(); }); function open() { envelope.addClass("open") .removeClass("close"); } function close() { envelope.addClass("close") .removeClass("open"); } });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>带心的信封打开动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号