CSS学习笔记四:下拉选择框以及其动画特效

打开有惊喜

技术分享

二、第二种下拉框

第二种下拉框跟第一种相比,区别在与其动画效果,其他并没有太大的变化

这里的动画是一条一条进入,跟第一种全部进入会有不同,所以这里用到了:nth-child :规定属于其父元素的第一个子元素的每个 li的动画效果;

 1         .content .select.open ul li:nth-child(1){
 2             transition: opacity .3s ease-in .05s,transform .3s ease-in .05s;
 3 
 4         }
 5         .content .select.open ul li:nth-child(2){
 6             transition: opacity .3s ease-in .1s,transform .3s ease-in .1s;
 7 
 8         }
 9         .content .select.open ul li:nth-child(3){
10             transition: opacity .3s ease-in .15s,transform .3s ease-in .15s;
11 
12         }
13         .content .select.open ul li:nth-child(4){
14             transition: opacity .3s ease-in .20s,transform .3s ease-in .20s;
15 
16         }
17         .content .select.open ul li:nth-child(5){
18             transition: opacity .3s ease-in .25s,transform .3s ease-in .25s;
19 
20         }

技术分享技术分享
  1 !DOCTYPE html
  2 html
  3 head
  4     meta charset="UTF-8"
  5     titleDocumnent/title
  6     script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"
  7     /script
  8     
  9     style type="text/css"
 10         body,p,ul{
 11             margin:0;
 12             padding:0;
 13         }
 14         body{
 15             background-color: pink;
 16             color:#333;
 17         }
 18         .content{
 19             padding-top:20%;
 20 
 21         }
 22         .content .select{
 23             width: 300px;
 24             height: 40px;
 25             margin: 0 auto;
 26             font-family: "Microsoft Yahei";
 27             font-size: 16px;
 28             background-color: #fff;
 29             position: relative;
 30 
 31         }
 32         .content .select i{
 33             position: absolute;
 34             top: 12px;
 35             right: 10px;
 36             width: 20px;
 37             height: 11px;
 38             border-top:3px #ccc solid;
 39             border-bottom:3px #ccc solid;
 40         }
 41         .content .select i:after{
 42             content:‘‘;
 43             position: absolute;
 44             top: 4px;
 45             left: 0;
 46             width: 100%;
 47             height: 3px;
 48             background-color: #ccc;
 49         }
 50 
 51         .content .select p{
 52             padding: 0 15px;
 53             line-height: 40px;
 54             cursor: pointer;
 55         }
 56         .content .select ul{
 57             list-style-type:none;
 58             background-color: #fff;
 59             width: 100%;
 60             overflow:hidden;
 61             position: absolute;;
 62             top: 20px;
 63             left: 0;
 64             z-index: 1;
 65             height: 0;
 66             transition: height .3s ease-out,top .3s ease-out;
 67         }
 68         .content .select ul li{
 69             padding: 0 15px;
 70             line-height: 40px;
 71             cursor: pointer;
 72             opacity:0;
 73             transform: translateX(300px);
 74             transition: transfrom .3s ease-out;
 75         }
 76         .content .select ul li:hover{
 77             background-color: #e0e0e0;
 78         }
 79         .content .select ul li.selected{
 80             color: #0c9;
 81         }
 82         
 83         .content .select.open ul{
 84             height: 200px;
 85             top: -80px;
 86             transition: all .2s ease-in;
 87         }
 88         .content .select.open ul li{
 89             opacity: 1;
 90             transform:translateX(0);
 91 
 92         }
 93         .content .select.open ul li:nth-child(1){
 94             transition: opacity .3s ease-in .05s,transform .3s ease-in .05s;
 95 
 96         }
 97         .content .select.open ul li:nth-child(2){
 98             transition: opacity .3s ease-in .1s,transform .3s ease-in .1s;
 99 
100         }
101         .content .select.open ul li:nth-child(3){
102             transition: opacity .3s ease-in .15s,transform .3s ease-in .15s;
103 
104         }
105         .content .select.open ul li:nth-child(4){
106             transition: opacity .3s ease-in .20s,transform .3s ease-in .20s;
107 
108         }
109         .content .select.open ul li:nth-child(5){
110             transition: opacity .3s ease-in .25s,transform .3s ease-in .25s;
111 
112         }
113         
114 
115     /style
116 /head
117 body
118     div class="content"
119         div class="select"
120             p所有选项/p
121             i/i
122             ul
123                 li data-value="所有选项" class="selected"所有选项/li
124                 li data-value="html"html/li
125                 li data-value="css"css/li
126                 li data-value="javascript"js/li
127                 li data-value="jquery"jq/li
128             /ul
129             
130         /div
131         
132     /div
133     script type="text/javascript"
134         $(function(){
135             $(.select  p).on(click,function(e){
136                 $(.select).toggleClass(open);
137                 e.stopPropagation();
138             });
139             // 检查是否由这个属性,没就添加样式
140             // 绑定单击事件e.stopPropagation();加了以后四处点击都i回收
141             $(.select  ul li).on(click,function(e){
142                 var _this = $(this);
143                 $(.select  p).text(_this.attr(data-value));
144                 _this.addClass(selected).siblings().removeClass(selected);
145                 $(.select).removeClass(open);
146                 e.stopPropagation();
147             });
148             $(documnent).on(click,function(){
149                 $(.select).removeClass(open);
150             });
151         });
152     /script
153 
154 /body
155 /html

打开有惊喜

技术分享

CSS学习笔记四:下拉选择框以及其动画特效

原文地址:http://www.cnblogs.com/skylarzhan/p/7255925.html


最新回复(0)
/jishu70c0oOXMs_2FtED09IrKrJmSJpLxbE_2FZog_2B9vN8Q_3D_3D4719397
8 简首页