使用jQuery.dropdown.js插件实现超酷的自定义下拉列表框动效 - 扇形排列

Simple Effects for Drop-Down Lists 这是一款jQuery插件，把输入选择框变换成自定义风格的下拉列表（自定义间隙、渐变时间和随机角度）。

UI，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2785
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en">

<body>
    <div class="container">
        <header class="clearfix">
            <h1>Simple Effects<span>for Drop-Down Lists</span></h1>
        </header>
        <section class="main clearfix">
            <div class="fleft">
                <p>In this example we use a gutter of 5, stack the items with a slight offset, and expand them with a slight random angle/left values. Each item will have a different animation delay.</p>
            </div>
            <div class="fleft">
                <select id="cd-dropdown" class="cd-select">
                    <option value="-1" selected>Choose a network to add</option>
                    <option value="1" class="icon-google-plus">Google Plus</option>
                    <option value="2" class="icon-facebook">Facebook</option>
                    <option value="3" class="icon-twitter">Twitter</option>
                    <option value="4" class="icon-github">GitHub</option>
                </select>
            </div>
        </section>
    </div>
    
    <script type="text/javascript" src="/libs/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="https://tympanus.net/Development/SimpleDropDownEffects/js/jquery.dropdown.js"></script>
    <script type="text/javascript">
        $( function() {
				
				$( '#cd-dropdown' ).dropdown( {
					gutter : 5,
					delay : 40,
					rotated : 'left'
				} );

});
    </script>
</body>

</html>

Simple Effects for Drop-Down Lists 这是一款jQuery插件，把输入选择框变换成自定义风格的下拉列表（自定义间隙、渐变时间和随机角度）。

UI，教程

编辑器支持Emmet

快捷键

Simple Effects for Drop-Down Lists 这是一款jQuery插件，把输入选择框变换成自定义风格的下拉列表（自定义间隙、渐变时间和随机角度）。

UI，教程

使用jQuery.dropdown.js插件实现超酷的自定义下拉列表框动效 - 散落的选项卡

使用jQuery.PFold.js插件实现的纸张折叠展开效果 - 图片详情

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：