今天为给大家带来一款javascript实现的超炫的下拉选择框。下拉的列表由半用透明的幽灵按钮组成。显示下拉的时候,列表项由左右两侧飞入。消息时飞向左右两侧。一起看下效果图

在线预览   源码下载

实现的代码。

html代码:

 <div class="scifiUI">
<h1>
Scifi Dropdown</h1>
<ul>
<li>Interactive</li>
<li>Animated</li>
<li>Scifi-styled</li>
<li>Maintainable</li>
<li>Scalability</li>
<li>Cool</li>
<li>Fun</li>
</ul>
</div>

css代码:

  html, body
{
overflow: hidden;
background: url(ironwall.jpg) #000 top center no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
font-family: 'Rajdhani' , sans-serif;
font-size: 18px;
letter-spacing: .1em;
} .glow, .scifiUI:hover h1, .scifiUI:hover ul li
{
box-shadow: 0 0 25px #00dcdc, 0 1px 5px #212121;
border-color: #00dcdc;
background: #00dcdc;
color: rgba(33, 33, 33, 0.7);
} .scifiUI
{
width: 300px;
margin: 100px auto;
}
.scifiUI:hover h1:after
{
border-top-color: rgba(33, 33, 33, 0.7);
}
.scifiUI:hover ul li
{
-ms-transform: skew(0);
-webkit-transform: skew(0);
transform: skew(0);
width: 300px;
height: 50px;
}
.scifiUI:hover ul li:nth-child(1)
{
left:;
}
.scifiUI:hover ul li:nth-child(2)
{
left:;
}
.scifiUI:hover ul li:nth-child(3)
{
left:;
}
.scifiUI:hover ul li:nth-child(4)
{
left:;
}
.scifiUI:hover ul li:nth-child(5)
{
left:;
}
.scifiUI:hover ul li:nth-child(6)
{
left:;
}
.scifiUI:hover ul li:nth-child(7)
{
left:;
}
.scifiUI *
{
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.scifiUI h1
{
position: relative;
display: block;
width: 300px;
height: 50px;
line-height: 50px;
border: 1px solid #00bebe;
background: rgba(0, 190, 190, 0.2);
color: #00bebe;
font-size: 1.6em;
text-align: center;
cursor: pointer;
}
.scifiUI h1:after
{
content: '';
display: block;
position: absolute;
top: 20px;
right: 15px;
border-top: 10px solid #00bebe;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom:;
}
.scifiUI ul
{
list-style: none;
position: relative;
top: -20px;
}
.scifiUI ul li
{
-webkit-transform: skew(45deg) scaleY(-3);
-ms-transform: skew(45deg) scaleY(-3);
transform: skew(45deg) scaleY(-3);
box-shadow: 0 3px 0 5px #212121 inset;
position: absolute;
display: block;
width: 200px;
height: 50px;
line-height: 50px;
border: 1px solid #00bebe;
background: #00dcdc;
text-align: center;
font-size: 1.6em;
cursor: pointer;
}
.scifiUI ul li:nth-child(1)
{
top: 0px;
left: -500%;
}
.scifiUI ul li:nth-child(2)
{
top: 50px;
left: 500%;
}
.scifiUI ul li:nth-child(3)
{
top: 100px;
left: -500%;
}
.scifiUI ul li:nth-child(4)
{
top: 150px;
left: 500%;
}
.scifiUI ul li:nth-child(5)
{
top: 200px;
left: -500%;
}
.scifiUI ul li:nth-child(6)
{
top: 250px;
left: 500%;
}
.scifiUI ul li:nth-child(7)
{
top: 300px;
left: -500%;
}
.scifiUI ul li:hover
{
-webkit-transform: scale(1.08);
-ms-transform: scale(1.08);
transform: scale(1.08);
font-size: 1.8em;
}

js这里引用的是angular.min.js

注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/7325

一款javascript实现的超炫的下拉选择框的更多相关文章

  1. 【JavaScript&jQuery】单选框radio,复选框checkbox,下拉选择框select

    HTML: <!DOCTYPE html> <html> <head> <title></title> <meta charset=& ...

  2. JavaScript学习笔记之下拉选择框的操作

    对于下拉框的操作十分繁多,这几天项目须要就总结一下 一.动态构建option 有时候我们须要动态构建下拉选择框里面的值,这里我们就要用到 var varItem = new Option(" ...

  3. css3 炫酷下拉菜单

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 揭秘Amazon反应速度超快的下拉菜单

    揭秘Amazon反应速度超快的下拉菜单 如果你以前觉得Amazon这家公司不太在用户体验上下功夫,这篇文章可能会改变你的看法. Amazon主页的左上角有一个商品分类浏览的下拉菜单.当鼠标从菜单中的选 ...

  5. 第一百四十六节,JavaScript,百度分享保持居中--下拉菜单

    JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...

  6. Javascript -- 示例:多选下拉选框

    1. 示例:多选下拉选框 <html> <head> <meta http-equiv="Content-Type" content="te ...

  7. android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码

    Android精选源码 仿微信打开红包旋转动画 使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...

  8. 二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 原生JavaScript写select下拉选择后跳转页面

    <select name="molsel_oprate" onchange="javascript:var obj = event.target; var inde ...

随机推荐

  1. glusterFS的部署流程

    转自:http://www.cnblogs.com/terrycy/p/5915263.html GlusterFS简单配置   1.准备工作 准备三台机器(物理机或者虚拟机均可)用于安装和测试Glu ...

  2. linux 服务器删除大文件之后不释放存储空间的解决办法

    查看磁盘空间使用情况:df -h 查看根目录下,第一层目录所占空间情况:du -h --max-depth=1 / 找出根目录下大于2000M的文件:find / -size +2000M 找出已删除 ...

  3. 【asp.net Core 2.0 初步探索】

    首先下载 对应的SDK 和runtime https://www.microsoft.com/net/core#linuxubuntu           ---------当前为 1.1 稳定版本 ...

  4. rpcbind服务死活启动不了

    在配置nfs的时候,想要实现nfs共享文件的权限共享,必须保证uid/gid一致,方可权限的传递! 错误提示 rpcbind dead but pid file exists 解决方案 service ...

  5. Android开发之动态检索(Filter)联系人

    1. 将所有联系人都转换为数字串,存到列表中. 将联系人姓名转换为数字串.例如,张丽思创->zlsc->9572. 过程解析: 张 – zhang – z – 9 丽 – li – l – ...

  6. 深入PHP内核之全局变量

    在阅读PHP源码的时候,会遇到很多诸如:CG(),EG() ,PG(),FG()这样的宏,如果不了解这些宏的意义,会给理解源码造成很大困难 EG().这个宏可以用来访问符号表,函数,资源信息和常量 C ...

  7. C# 生成 DataMatrix 格式的二维码

    该文主要是利用OnBarcode.dll 生成 DataMatrix 格式的二维码的一些简单方法和操作技巧.关于QrBarcode的二维码比较常见和简单,网上有很多资源. 1.附件为dll 2.利用上 ...

  8. 简单安装MongoDB

    前言 首先说明一下环境,以免环境的不同造成不必要的影响 本次采用centos6.8版本linux系统 [root@dev1 ~]# cat /etc/redhat-release CentOS rel ...

  9. Oracle JDBC配置

    Oracle数据库是收费的,Oracle的JDBC驱动在Maven仓库中虽有其名,却无法下载到jar包. 这就需要手动下载Oracle JDBC驱动并将其安装到本地Maven仓库中. 如果从官网下载, ...

  10. C#代码规范 程序员必备的秘笈

    1.引言 本文是一套面向C# programmer和C# developer进行开发所应遵循的开发规范 按照此规范来开发C#程序可带来以下益处: 代码的编写保持一致性,提高代码的可读性和可维护性,在团 ...