百度云盘　　传送门　　密码:afdo

3D对话框窗口插件效果：

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery点击按钮弹出3D对话框窗口插件</title>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">

<link rel="stylesheet" type="text/css" href="css/popup.css" />

</head>

<body>

    <div class="container center-block">

        <h1>Popup 3D jQuery</h1>

        <a id="tst" rel="popup_name" class="btn btn-success btn-lg" href="#" role="button">3D对话框</a>

        <div class="popup">

            <div id="popup_name" class="popup_block">

                <div class="popup_head">

                    <h2>Popup 3D</h2>

                </div>

                <div class="popup_body">

                    <p>Gary.</p>

                </div>

            </div>

        </div>

    </div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="js/popup.js"></script>

<script src="js/script.js"></script>

</body>

</html>

index.html

.popup{

    position: absolute;

    top:50%;

    left:50%;

}

.popup_block{

    display: none;

    position: absolute;

    width:300px;

    margin:-150px;

    box-sizing: border-box;

    border-radius: 20px;

    border-style:solid;

    border-color:coral;

    cursor: pointer;

    transform-style: preserve-3d;

    box-shadow: 0px 20px 100px #aaa;

}

.close{

    padding:10px;

}

.popup_head{

    background-color:coral;

    padding:10px;

    border-radius: 10px 10px 0 0;

    transition-duration:0.2s;

}

.popup_body{

    padding:20px;

}

.popup_head > h1, h2, h3, h4, h5{

    margin-top:0px;

    color:white;

}

.popup_head:hover{

    padding-left:20px;

}

popup.css

实现过程

popup.js：jQuery和CSS3制作并可以使用鼠标进行互动的3D弹出窗口插件

CSS

设置弹出窗口模式快

.popup_block{

    display: none;

    position: absolute;

    width:300px;

    margin:-150px;

    box-sizing: border-box;

    border-radius: 20px;

    border-style:solid;

    border-color:coral;

    cursor: pointer;

    transform-style: preserve-3d;

    box-shadow: 0px 20px 100px #aaa;

}

box-sizing：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

border-radius：向 div 元素添加圆角边框

border-style：设置 4 个边框的样式　　传送门

1个参数

border-style:dotted;

所有 4 个边框都是点状

2个参数

border-style:dotted solid;

上边框和下边框是点状

右边框和左边框是实线

3个参数

border-style:dotted solid double;

上边框是点状

右边框和左边框是实线

下边框是双线

4个参数

border-style:dotted solid double dashed;

上边框是点状

右边框是实线

下边框是双线

左边框是虚线

border-style：参数

cursor ：规定要显示的光标的类型（形状）

　　pointer 光标呈现为指示链接的指针　　其他参数：传送门

transform-style：被转换的子元素保留其 3D 转换

　　flat 子元素将不保留其 3D 位置。

　　preserve-3d 子元素将保留其 3D 位置。

box-shadow:：设置一个或多个下拉阴影的框

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow    ：必需的。水平阴影的位置。允许负值

v-shadow    ：必需的。垂直阴影的位置。允许负值

blur    ：可选。模糊距离

spread    ：可选。阴影的大小

color    ：可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

inset    ：可选。从外层的阴影（开始时）改变阴影内侧阴影

box-shadow：参数

设置弹出框头部

.popup_head{

    background-color:coral;

    padding:10px;

    border-radius: 10px 10px 0 0;

    transition-duration:0.2s;

}

transition-duration：规定完成过渡效果需要花费的时间（以秒或毫秒计）

DOM

加载popup.js，写入对话框标题和对话框内容

<div class="popup">

            <div id="popup_name" class="popup_block">

                <div class="popup_head">

                    <h2>Popup 3D</h2>

                </div>

                <div class="popup_body">

                    <p>Gary.</p>

                </div>

            </div>

        </div>

JS框架_(Popup.js)3D对话框窗口插件的更多相关文章

  1. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  2. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  3. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  4. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  5. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  6. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  7. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  8. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

  9. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

随机推荐

  1. python中进程的几种创建方式

    在新创建的子进程中,会把父进程的所有信息复制一份,它们之间的数据互不影响. 使用os.fork()创建 该方式只能用于Unix/Linux操作系统中,在windows不能用. import os # ...

  2. 滚动页面产生动画WOW.js的用法

    简介 在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件.WOW.js 依赖 animate.css,所以它支持 an ...

  3. RabbitMQ 示例-生产者-消费者-direct-topic-fanout

    这是生产者和消费者2个项目, 包含 direct,topic,fanout模式下的消费,springboot + rabbitmq 代码地址:https://github.com/duende99/R ...

  4. mysql设计与优化以及数据库表设计与表开发规范

    一.设计问题? 1.主键是用自增还是UUID ? Innodb 中的主键是聚簇索引. 如果主键是自增的,那么每次插入新的记录,记录就会顺序添加到当前索引节点的后续位置,当一页写满,就会自动开辟一个新的 ...

  5. cookie和session的详解和区别

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...

  6. jQuery效果--淡入和淡出

    jQuery Fading 方法 通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fa ...

  7. java 语言多线程可见性（synchronized 和 volatile 学习）

    共享变量可见性实现的原理 java 语言层面支持的可见性实现方式: synchronized volatile 1. synchronized 的两条规定: 1 线程解锁前,必须把共享变量的最新值刷新 ...

  8. python 安装时，为何pip install不是内部或者外部命令错误解决办法

    新安装的python 环境,第一次pip  install 却报不是内部或者外部命令错误 首先检查一下环境变量,可能时你没有设置环境变量 再说一遍,安装python环境时,记得出了python.exe ...

  9. 【异常】org.apache.hadoop.hdfs.server.common.InconsistentFSStateException

    1 异常信息 - ::, INFO org.apache.hadoop.hdfs.server.namenode.FSNamesystem: Maximum size of an xattr: -- ...

  10. MixNet学习笔记

    最近,谷歌使用了AutoML,推出了一种新网络:MixNet,其论文为<MixNet: Mixed Depthwise Convolutional Kernels>.其主要创新点是,研究不 ...