开信封效果

最新推荐文章于 2022-08-13 12:32:05 发布
最新推荐文章于 2022-08-13 12:32:05 发布
阅读量405 收藏 3
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/mbyund/p/6908936.html
版权 
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <script src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
    <title>留声卡</title>
    <script>
        document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+'px';
        $(function(){
            $('.lock-btn').on('click',function(){
                $('.shell-li').addClass('open');
                $('.li-hand').addClass('li-hand-show');
                $(this).fadeOut(500);
        });
        })
    </script>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        html {
            height: 100%;
        }
        body {
            min-height: 100%;
            background-color: #54586c;
            margin: 0 auto;
        }

        .icons {
            display: inline-block;
            background-image: url(http://s0.ifengimg.com/2017/05/26/card3_icons-93dc5a1c12_8cceaf27.png);
            background-repeat: no-repeat;
            background-size: 2.6rem 2.1rem;
        }
        .relative {
            position: relative;
        }
        .arrow {
            width: .13rem;
            height: 0.07rem;
            margin-top: 0.07rem;
            vertical-align: top;
            background-position: -1.62rem -1.58rem;
        }
        .li-hand {
            position: absolute;
            width: .44rem;
            height: .22rem;
            bottom: 0.03rem;
            left: 0;
            right: 0;
            margin: auto;
            -webkit-border-radius: 0 0 0.225rem 0.225rem;
            border-radius: 0 0 0.225rem 0.225rem;
            line-height: .22rem;
            font-size: 0.15rem;
            color: #fff;
            text-align: center;
            background-color: #3e6b94;
            -webkit-transition: all 0.7s;
            transition: all 0.7s;
        }
        .li-hand-show {
            -webkit-transform: translateY(.22rem);
            transform: translateY(.22rem);
        }
        .cd-li {
            background-image: url(http://s0.ifengimg.com/2017/05/26/card3_cd-43c5fdcb7f_7f6fb734.jpg);
            background-size: 100% 100%;
            background-position: 0 0;
            -webkit-transform: translate3d(0,0,1px);
            transform: translate3d(0,0,1px);
            width: 2.5rem;
            height: 2.5rem;
        }
        #list > .shell-li {
            background-color: transparent;
        }
        #list {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 2.5rem;
            margin-top: 200px;
            margin-left: 30px;
            font-size: .11rem;
            color: #303340;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-perspective: 13.5rem;
            perspective: 13.5rem;
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation: list-show linear 2s;
            animation: list-show linear 2s;
        }
        @-webkit-keyframes list-show {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        @keyframes list-show {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        .shell-li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-transform: translate3d(0,0,2px);
            transform: translate3d(0,0,2px);
            z-index: 2;
        }
        .open {
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
            -webkit-animation: openli linear 1.5s;
            animation: openli linear 1.5s;
            -webkit-transform: rotateX(200deg) translate3d(0,0,2px);
            transform: rotateX(200deg) translate3d(0,0,2px);
        }
        @-webkit-keyframes openli {
            0% {
                -webkit-transform: rotateX(0) translate3d(0,0,2px);
                transform: rotateX(0) translate3d(0,0,2px);
            }
            33.333% {
                -webkit-transform: rotateX(60deg) translate3d(0,0,2px);
                transform: rotateX(60deg) translate3d(0,0,2px);
            }
            50% {
                -webkit-transform: rotateX(100deg) translate3d(0,0,2px);
                transform: rotateX(100deg) translate3d(0,0,2px);
            }
            66.666% {
                -webkit-transform: rotateX(100deg) translate3d(0,0,2px);
                transform: rotateX(100deg) translate3d(0,0,2px);
            }
            100% {
                -webkit-transform: rotateX(100deg) translate3d(0,0,2px);
                transform: rotateX(100deg) translate3d(0,0,2px);
            }
        }
        @keyframes openli {
            0% {
                -webkit-transform: rotateX(0) translate3d(0,0,2px);
                transform: rotateX(0) translate3d(0,0,2px);
            }
            33.333% {
                -webkit-transform: rotateX(60deg) translate3d(0,0,2px);
                transform: rotateX(60deg) translate3d(0,0,2px);
            }
            50% {
                -webkit-transform: rotateX(100deg) translate3d(0,0,2px);
                transform: rotateX(100deg) translate3d(0,0,2px);
            }
            66.666% {
                -webkit-transform: rotateX(140deg) translate3d(0,0,2px);
                transform: rotateX(140deg) translate3d(0,0,2px);
            }
            100% {
                -webkit-transform: rotateX(200deg) translate3d(0,0,2px);
                transform: rotateX(200deg) translate3d(0,0,2px);
            }
        }
        .cd-shell {
            display: block;
            width: 2.5rem;
            height: 1.3rem;
            margin: -0.15rem auto 0;
            background-position: 0 0;
            z-index: 2;
        }
        .lock-btn {
            position: absolute;
            bottom: -.33rem;
            left: 0;
            right: 0;
            display: block;
            width: .66rem;
            height: .66rem;
            margin: 0 auto;
            background-position: 0 -1.35rem;
            -webkit-transition: all 0.7s;
            transition: all 0.7s;
            z-index: 3;
        }
    </style>
</head>
<body>
<ul id="list" class="relative">
    <li class="shell-li">
        <div class="li-hand"><span class="icons arrow"></span></div>
        <span class="icons cd-shell relative"></span>
        <span class="icons lock-btn"></span>
    </li>
    <li class="relative cd-li">
    </li>
</ul>
</body>
</html>

　　

转载于:https://www.cnblogs.com/mbyund/p/6908936.html

weixin_30778805
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
复古信封效果网页模板
01-14
【复古信封效果网页模板】是一种独特的网页设计风格，它将传统的信封元素与现代网页技术相结合，创造出一种富有怀旧情怀的用户体验。这种设计通常适用于那些希望传达温馨、个性化或者具有历史感的品牌或项目。复古...
爱心信封打开ui动画特效
W Y L
10-06 1781
jQuery css3制作一封情书打开爱心冒泡动画，打开信封爱心跑出来动画特效。 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-co
android 信封打开动画,打开信封动画效果
weixin_42601608的博客
05-25 631
css@import url("https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css");.bg-wrapper {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #D46466;}.b...
七夕节，我用代码制作了表白信封
热门推荐
很高兴你能看到这里
08-03 2万+
大家好，我是小周，明天就是七夕了，这么浪漫的节日，自然少不了我这个浪漫博主，本次为大家贡献表白信封的制作，其他的就看缘分啦，哈哈，最后会放上资源包，需要的小伙伴自取就可以了，999............
基于HTML+CSS+JS实现七夕情人节表白代码【含代码】
weixin__BJ050106的博客
08-13 1220
七夕情人节，这么浪漫的节日，自然少不了我这个浪漫博主，本次为大家贡献表白信封的制作，其他的就看缘分啦，哈哈，最后会放上资源包，需要的小伙伴自取就可以了。
原生js + 后端nodejs实现邮箱信封表白程序
花子占爷的博客
05-20 5474
邮箱信封表白程序 前端原生js + 后端nodejs（express框架）
jQuery点击打开爱心信封特效
07-24
在这个特效中，CSS3的主要作用在于创建爱心冒泡动画和信封打开的过渡效果。我们可以利用`transition`属性来定义元素状态变化时的过渡效果，如`transition: all 0.5s ease;`表示所有属性在0.5秒内平滑过渡。另外，`...
jQuery打开信封爱心动画
05-01
在本文中，我们将深入探讨如何使用jQuery来实现一个生动有趣的“打开信封”并展示“红色爱心动画”的效果。这个效果通常被用作网站的互动元素，为用户提供一种新颖的视觉体验，尤其适用于情人节或者浪漫主题的网页...
css3 3d信封翻转效果特效代码
03-20
"css3 3d信封翻转效果特效代码"就是一个利用CSS3技术实现的创新性设计，它能够模拟一个真实的3D信封，允许用户通过翻转动作来展示信封内部的内容，如同打开一封真实的信件一般，为网站增添了一种动态和趣味性的互动...
HTML5 SVG信封弹出动画特效
07-24
4. **增强动画效果**：为了使动画更有趣，我们还可以添加一些额外的效果，比如让信封旋转或改变大小。通过修改`transform`属性中的`rotate`或`scale`值，可以实现这些效果。 ```javascript envelope.style....
CSS3 jQuery打开信封动画效果.rar
07-10
CSS3 打开信封动画效果，HTML5 jQuery设计的一个发邮件的界面，有趣的是，打开页面后，发送邮件的表单（信纸）会从信封中向上滑出，当点击空白处时会再次滑入信封内，动画效果很流畅，你可认真研究下用CSS3、HTML5是如何实现的这种效果 。
js 特效 html 特效 打开窗口居中
06-13
js 特效 html 特效 打开窗口居中js 特效 html 特效 打开窗口居中
CSS3按钮发送信封动画特效特效代码
03-20
CSS3按钮发送信封动画特效是一款js基于css3提交按钮动画，邮件发送按钮点击信封飞入动画特效。
css3 3d信封翻转效果.zip
07-04
css3 3d信封翻转效果是一款可翻转的3d信封特效，打开信封，展开纸张，可填写留言。 css3 3d信封翻转
H5拆红包效果H5拆红包效果
10-06
H5拆红包效果，按钮一直变动大小，点击后翻转，然后弹出红包内容
html5请柬制作原理,HTML5请柬（或信封、卡片、纸张）展开动画
weixin_28728715的博客
06-04 823
CSS语言：CSSSCSS确定* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;overflow: hidden;background: rgba(17, 126, 104, 1);background: -moz-radial-gradient(center, ellipse cover, rgba(17, 126, 104...
css常见效果——信封效果
qq_40566547的博客
08-27 2052
需求，我们需要实现如图所示的信封效果 相信大部分人都会再网上找，在这里我们来剖析其原理。 45°折角的解决方案 折角我想大多数人都会想到用伪元素或者一个真实的dom，但是那样开销大。这里我是用渐变来实现折角效果。 div { width: 12em; background: #58a; /* Fallback */ bac...
【Android】打开红包、信封动画
moy1995的博客
02-05 1650
git地址:https://github.com/may1112/openRedPacket 如果你觉得有用麻烦点个赞，dva爱你哟 先看效果，可以用来打开红包，打开信封。里面的内容可以修改成自己想要的。 使用的dialogFragment，为了展示这种弹窗效果。 使用方法：就是new Dialog。 要把activity移动初始点的view传过去。 这是在网上copy的动画放...
html实现信封效果,CSS3 带简单动画效果的信封
weixin_32440261的博客
06-09 1526
CSS语言：CSSSCSS确定@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700);body {background-color: #EA4C89;font-family: "Playfair Display", serif;}body .container {position: relative...
如何制作一个自动打开信封效果的html页面
最新发布
06-01
下面是一个简单的使用 CSS 和 JavaScript 实现自动打开信封效果的示例： ```html <!DOCTYPE html> /* 设置信封的样式 */ .envelope { position: relative; width: 300px; height: 200px; background-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值