今天为给大家带来一款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. HTTP头返回码分析

    http协议通讯时,在客户端发送请求后(request),服务器端返回的状态码解释(response) http状态码 1**:请求收到,继续处理 2**:操作成功收到,分析.接受           ...

  2. Python 的 pandas 实践

    Python 的 pandas 实践: # !/usr/bin/env python # encoding: utf-8 __author__ = 'Administrator' import pan ...

  3. Java虚拟机学习 - 内存调优 ( 9 )

    JVM调优主要是针对内存管理方面的调优,包括控制各个代的大小,GC策略.由于GC开始垃圾回收时会挂起应用线程,严重影响了性能,调优的目是为了尽量降低GC所导致的应用线程暂停时间. 减少Full GC次 ...

  4. RabbitMQ与.net core(二)Producer与Exchange

    Producer:消息的生产者,也就是创建消息的对象 Exchange:消息的接受者,也就是用来接收消息的对象,Exchange接收到消息后将消息按照规则发送到与他绑定的Queue中.下面我们来定义一 ...

  5. 《java设计模式》之责任链模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述责任链(Chain of Responsibility)模式的: 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其 ...

  6. JMeter学习笔记--使用HTTP信息头管理器

    使用HTTP信息头管理,可以帮助测试人员设定JMeter发送的HTTP请求头所包含的信息.HTTP信息头中包含有”User-Agent".“Pragma".”Referer&quo ...

  7. ASM_Oracle ASM的常用命令(汇总)

    2014-07-02 Created By BaoXinjian

  8. lua——元表、元方法、继承

    [元表] 元表中的键为事件(event),称值为元方法(metamethod). 通过函数getmetatable查询不论什么值的元表,通过函数setmetatable替换表的元表. setmetat ...

  9. SICP 习题 (2.8) 解题总结:区间的减法

    SICP 习题 2.8 须要我们完毕区间运算的减法.区间运算的加法书中已经有了,代码例如以下: (define (add-interval x y) (make-interval (+ (lower- ...

  10. 基于配置的Spring MVC3

    网上查找的spring mvc3大部分都是基于注射的方式,总感觉注射有点怪怪.不利于后期扩展和项目管理,于是特意写下这篇基于xml配置的Spring MVC3.以供大家參考. 怎么建立web项目和下载 ...