百度云盘　　传送门　　密码: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. 在Powershell中使用Group-Object和-GroupBy

    使用Group-Object(group)按组统计 PS C:\> Get-Command -Module Microsoft.PowerShell.LocalAccounts | group ...

  2. 安装kubuctl

    安装和设置kubectl 使用Kubernetes命令行工具kubectl在Kubernetes上部署和管理应用程序.使用kubectl,可以检查集群资源; 创建,删除和更新组件. 以下是安装kube ...

  3. with as 语句

    with就是一个sql片段,供后面的sql语句引用. 详情参见:https://www.cnblogs.com/Niko12230/p/5945133.html

  4. Scala新版本学习(2)：

    1.本章要点; (1)if表达式有值: (2)块也有值,是它最后一个表达式的值 (3)Scala的for循环就像是"增强版的"Java for循环 (4)分号不是必须的 (5)vo ...

  5. performance面板使用,以及解决动画卡顿

    https://googlechrome.github.io/devtools-samples/jank//    官方案例 https://juejin.im/post/5b65105f518825 ...

  6. 多个类用@feignclient标注同一个服务,出错问题:Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.Caused by: org.springframework.beans.factory.support.Bea..

    如果标注了两个或以上类 @FeignClient 标注同一个 服务名称 调用方会主配置类启动会报错 测试类报错 java.lang.IllegalStateException: Failed to l ...

  7. 记一次部署PHP遇到的编码问题故障

    php开发给我项目和数据库,我按正常部署流程部署,开始发现之梦的后台登陆不了,后发现是属主属组不对,代码直接解压后是root的,更改后,后台能登陆,但部分显示乱码.后将正常的数据库文件重新导入后,显示 ...

  8. PAT Basic 1014 福尔摩斯的约会 (20 分)

    大侦探福尔摩斯接到一张奇怪的字条:我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm.大侦探很快就明白了,字条上奇 ...

  9. oracle监听启动很慢

    TNS-12531: TNS:cannot allocate memory 首先查看内存,free -m 发现当前的空闲内存还有很多,那就不是内存不足的问题 想到之前重启过数据库服务器,查看主机名ho ...

  10. 〇一——body内标签之交互输入标签一

    今天来搞一下body内的input标签 在一般的网页中,我们经常会遇到一些交互界面,比如注册.登录.评论等环境.在这些交互界面里最常使用的就是input标签. 一.input标签基本使用 input标 ...