精华内容
下载资源
问答
  • css弹窗动画效果

    千次阅读 2018-11-30 10:30:00
    /*弹层动画(从上往下)*/ .fadeIn { -webkit-animation: fadeInDown .3s; animation: fadeInDown .3s; } @keyframes fadeInDown { 0% { -webkit-transform: translate3d(0, -20%, 0);... ...
    /*弹层动画(从上往下)*/
    
    .fadeIn {
        -webkit-animation: fadeInDown .3s;
        animation: fadeInDown .3s;
    }
    
    @keyframes fadeInDown {
        0% {
            -webkit-transform: translate3d(0, -20%, 0);
            -webkit-transform: translate3d(0, -20%, 0);
            transform: translate3d(0, -20%, 0);
            transform: translate3d(0, -20%, 0);
            opacity: 0;
        }
        100% {
            -webkit-transform: none;
            transform: none;
            opacity: 1;
        }
    }
    
    @-webkit-keyframes fadeInDown {
        0% {
            -webkit-transform: translate3d(0, -20%, 0);
            opacity: 0;
        }
        100% {
            -webkit-transform: none;
            opacity: 1;
        }
    }
    
    
    /*弹层动画(从下往上)*/
    
    .fadelogIn {
        -webkit-animation: fadelogIn .4s;
        animation: fadelogIn .4s;
    }
    
    @keyframes fadelogIn {
        0% {
            -webkit-transform: translate3d(0, 100%, 0);
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
        }
        100% {
            -webkit-transform: none;
            transform: none;
        }
    }
    
    @-webkit-keyframes fadelogIn {
        0% {
            -webkit-transform: translate3d(0, 100%, 0);
        }
        100% {
            -webkit-transform: none;
        }
    }
    
    
    /*弹层动画(从右往左)*/
    
    .fadeleftIn {
        -webkit-animation: fadeleftIn .4s;
        animation: fadeleftIn .4s;
    }
    
    @keyframes fadeleftIn {
        0% {
            -webkit-transform: translate3d(100%, 0, 0);
            -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
        }
        100% {
            -webkit-transform: none;
            transform: none;
        }
    }
    
    @-webkit-keyframes fadeleftIn {
        0% {
            -webkit-transform: translate3d(100%, 0, 0);
        }
        100% {
            -webkit-transform: none;
        }
    }
    
    
    /*弹层动画(放大)*/
    
    .popIn {
        -webkit-animation: fadeleftIn .4s;
        animation: fadeleftIn .4s;
        -webkit-animation-name: popIn;
        animation-name: popIn;
    }
    
    @-webkit-keyframes popIn {
        0% {
            -webkit-transform: scale3d(0, 0, 0);
            transform: scale3d(0.5, 0.5, 0.5);
            opacity: 0;
        }
        50% {
            -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
            animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        }
        100% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            opacity: 1;
        }
    }
    
    @keyframes popIn {
        0% {
            -webkit-transform: scale3d(0, 0, 0);
            transform: scale3d(0.5, 0.5, 0.5);
            opacity: 0;
        }
        50% {
            -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
            animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
        }
        100% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
            -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
            opacity: 1;
        }
    }

     

    转载于:https://www.cnblogs.com/xushengguan/p/10042729.html

    展开全文
  • css弹窗屏幕居中

    千次阅读 2018-08-21 08:18:34
    position:fixed;...transform:translateX(-50%) translateY(-50%)是CSS3的新写法,让元素相对于他自身的宽高反向移动。配合上面的代码就能实现居中定位,而且适用于不确定宽高的元素,但是在低版本IE不兼容。
    position:fixed;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    -ms-transform::translateX(-50%) translateY(-50%);
    -moz-transform::translateX(-50%) translateY(-50%);
    -webkit-transform::translateX(-50%) translateY(-50%);
    -o-transform::translateX(-50%) translateY(-50%);
    

    用top:50% left:50%定位后元素的左上角会处于页面中间。

    transform:translateX(-50%) translateY(-50%)是CSS3的新写法,让元素相对于他自身的宽高反向移动。配合上面的代码就能实现居中定位,而且适用于不确定宽高的元素,但是在低版本IE不兼容。

    展开全文
  • css弹窗制作

    千次阅读 2018-06-21 15:46:34
    关于弹窗的制作这里写的时候出现了很多问题,首先就是对齐的问题,以前我也觉的对比不是挺简单的嘛,真的是完全错了,这是简直是一场噩梦,真的被搞的头大,所以这里我会用两种方式来体现所谓&nbsp的无奈!废话不多...

    关于弹窗的制作这里写的时候出现了很多问题,首先就是对齐的问题,以前我也觉的对比不是挺简单的嘛,真的是完全错了,这是简直是一场噩梦,真的被搞的头大,所以这里我会用两种方式来体现所谓&nbsp的无奈!废话不多说,直接贴代码。

    第一种&nbsp的形式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body{
                background-color: gray;
    
    
            }
            .box form{
                width: 500px;
                height: 300px;
                background-color: white;
                border: 1px solid #000;
                /* 其实在我看来这一类的弹窗制作都可以用固定定位来做,比较方便,容易把握位置 */
                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -151px;
                margin-left: -251px;
            }
            .box h3{
                margin: 5px;
                background: lightgreen;
                height: 40px;
                line-height: 40px;
                text-indent: 10px;
            }
            .box .input{
                width: 460px;
                height: 24px;
                margin: 30px auto 0;
                text-indent: 100px;
            }
            .box label{
                /* 这里用float 是用来lable对齐的,因为label和input都是行元素 为了省事会用&nbsp
                 可是你会发现 有的时候并不能实现对齐需求,反而会把自己搞的头大*/
                /* float: left; */
                width: 100px;
                height: 28px;
                text-align: right;
            }
    
            .box .input01{
                width: 460px;
                height: 24px;
                margin: 40px auto 0;
                text-indent: 180px;
    
            }
            .box input{
                height: 30px;
                width: 250px;
                outline: none;
            }
    
            .box .btn1{
                width: 80px;
            }
    
    
        
        </style>
    </head>
    <body>
        <div class="box">
            <form action="">
            <h3>用户登录</h3>
            <div class="input">
            <label for="">用户名:</label>
            <input type="text">
            </div>
            <div class="input">
            <label for="">&nbsp;&nbsp;&nbsp;&nbsp;密码:</label>
            <input type="password" name="" id="">
            </div>
            <div class="input01">
            <input type="submit" value="提交" class="btn1">
            <input type="reset" name="" id="" value="重置" class="btn1">
            </div>
        </div>
    </form>
    </body>
    </html>

    代码效果图:


    代码码到这里有没有很想骂人,这简直就是噩梦。

    第二种方法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body{
                background-color: gray;
    
    
            }
            .box form{
                width: 500px;
                height: 300px;
                background-color: white;
                border: 1px solid #000;
                /* 其实在我看来这一类的弹窗制作都可以用固定定位来做,比较方便,容易把握位置 */
                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -151px;
                margin-left: -251px;
            }
            .box h3{
                margin: 5px;
                background: lightgreen;
                height: 40px;
                line-height: 40px;
                text-indent: 10px;
            }
            .box .input{
                width: 460px;
                height: 24px;
                margin: 30px auto 0;
            }
            .box label{
                /* 这里用float 是用来lable对齐的,因为label和input都是行元素 为了省事会用&nbsp
                 可是你会发现 有的时候并不能实现对齐需求,反而会把自己搞的头大*/
                float: left;
                width: 100px;
                height: 28px;
                text-align: right;
            }
            .box .input_text{
                width: 240px;
                height: 28px;
                outline: none;
    
            }
            .box .btn1{
                width: 100px;
                height: 28px;
    
            }
            .btn{
                /* 之所以在这里用margin-left,因为这两个按钮使用input写的上面已经定义了input的宽度为460px */
                margin-left: 100px;
                
            }
        
        </style>
    </head>
    <body>
        <div class="box">
            <form action="">
            <h3>用户登录</h3>
            <div class="input">
            <label for="">用户名:</label>
            <input type="text" class="input_text">
            </div>
            <div class="input">
            <label for="">密码:</label>
            <input type="password" class="input_text">
            </div>
            <div class="input">
            <input type="submit" value="提交" class="btn1 btn">
            <input type="reset" name="" id="" value="重置" class="btn1">
            </div>
        </div>
    </form>
    </body>
    </html>

    代码效果图




    展开全文
  • 弹窗的遮罩层,如果直接给filter:blur,模糊效果不会生效。 代码: background-color:rgba(0,0,0,0.5); backdrop-filter:blur(2px);

    弹窗的遮罩层,如果直接给filter:blur,模糊效果不会生效。

    代码:

            background-color: rgba(0,0,0,0.5);

            backdrop-filter: blur(2px);

    展开全文
  • 用到遮罩弹窗时在网上搜索,看到绝大多数都是基于Jquery的。我不想用那么复杂的应用,于是自己写了一个。
  • 19种CSS绚丽弹窗样式

    2013-07-08 16:36:05
    19种CSS绚丽弹窗样式.rar 里面的效果真的很不错 可以试试
  • css实现弹窗效果

    2021-09-02 16:20:22
    css实现弹窗效果有三种情况: 情况一(代码如下): <div className="alert_box"> <div className="alert_bg"></div> <div className="alert_con"> 情况一 </div> <div&...
  • CSS多种弹出窗效果源码
  • css-弹窗内容居中显示

    2021-01-22 14:33:04
    css-弹窗内容居中显示 html结构: <div class="js-mask"> <div class="js-mask-main"> <p class="main-title">弹窗标题</p> <ul class="main-con page-scroll-y"> <li> &...
  • 主要使用的 CSS 属性:position、z-Index 踩坑记录 弹窗出现之后,要求底部内容不滚动,一般可以通过设置 body 的 overflow: hidden; 实现,但是在不同手机系统或一些浏览器(如UC)中,该方法无效;所以最后采用 ...
  • 在写带有遮罩层的弹窗时,弹窗出现时,页面会保持滚动状态,不符合我们的预期 看了些解决方案,大都是改变body的overflow,但是由于滚动条出现和消失,页面也会出现跳动 问题描述: 默认样式下,页面滚动条的父元素...
  • 手写css弹窗遮罩层

    千次阅读 2018-06-06 11:23:46
    项目需要,涉及到弹窗,所以就手写一个,正好,展示一下我的前端能力。下面是代码,简洁,直击要害。效果图:这是CSS代码:.cov{ width:100%; height:100%; background-color:rgba(0, 0, 0, 0.5); z-index:1000;...
  • CSS变形弹窗效果

    2015-02-04 10:56:03
    弹出窗体是网页常用的一个交互设计,在这个注重交互动画体验的时代,网页弹窗也可以来点新鲜的点子,比如今天分享的CSS 变形Modal Window。
  • 1、HTML <div class="container"> <div class="dialog"> <div class="content">内容占位</div> </div> <...2、CSS .container { position: fix...
  • CSS 弹窗居中样式

    千次阅读 2018-10-11 19:33:52
    弹窗居中CSS样式:position: fixed; z-index: 999; top: 0; right: 0; left: 0; bottom: 0; margin: auto; demo如下: &lt;style&gt; .class{width: 400px; height: 250px; position: fixed; z-index: 999...
  • 简单弹窗的设置(CSS方式)

    千次阅读 2018-06-12 18:43:47
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport"...
  • html与css实现弹窗效果

    千次阅读 2018-10-03 10:46:26
    弹窗由html、css组成,通过js控制弹窗 html代码: &amp;lt;div class=&quot;select_sex &quot; id=&quot;pop&quot;&amp;gt;//最外层灰色背景 &amp;lt;div class=&quot;pop_content...
  • CSS设置弹窗引发的思考
  • jquery+css3弹窗插件

    2016-04-02 22:03:44
    清明闲着没事,自己试着写了一个弹窗插件,感觉还是可以简单易用的。有bug之处,请指教!
  • 大家在浏览许多网页时,是否遇到过右下角的弹窗小广告? “大渣好,我系轱天乐,我四渣渣辉,探挽懒月,介四里没有挽过的船新版本,挤需要体验三番钟,里造会干我一样,爱象节款游戏......” 即使我们滚动屏幕,它...
  • 多款css3-弹出窗口弹出效果,文件为DEMO,集合多种弹窗效果。
  • css实现弹窗上下左右居中且背景透明锁定窗口 有一种简单的css方法实现点击之后的弹出框上下左右居中且附加灰色透明遮罩锁定窗口清除滚动条 html代码 <div class="box"> <div class="boxs"> <!-- ...
  • 19种html5 CSS3绚丽的弹出窗口动画过渡效果
  • <!DOCTYPE html> <html> <head> ...meta charset="utf-8" />...css弹窗遮罩效果</title> </head> <style> .main{ margin: 0 auto; width: 1024px; he...
  • html部分: <div class="modal"> <div class="modal__header"> 标题p> <div>div> div> 内容div> <div class="modal__footer"> 确定div> 取消div> div> div> css部分: * { box-sizing: border-box; } /* 外框 */ ....
  • DIV+CSS实现中间弹窗效果

    千次阅读 2018-09-20 14:32:41
    参考:https://blog.csdn.net/qq605053977/article/details/57403364
  • 最终解决方案:使用当弹窗出现的时候将页面body的position设置为fixed并记录此刻滚动的位置,弹窗消失去除position属性 遮罩层显示 onInviteFriendClick() { this.viewState.shareCover.visible =true; //遮罩...
  • 今天给大家推荐一款类似lightbox弹出界面的效果。需要在支持CSS3属性的浏览器下浏览
  • 前端html+css+js弹窗的实现

    万次阅读 多人点赞 2017-10-31 18:46:20
    近期由于项目需要,学习了一下js弹窗的实现,感觉挺简单的。 html代码部分: 弹窗 弹窗 × 弹窗头部 弹窗标题 Lorem ipsum dolor sit amet, consectetur ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,526
精华内容 10,210
关键字:

css弹窗