用CSS与jQuery打造很炫的切换效果

      今天为大家分享一套用CSS与jQuery打造很炫的切换效果模版，它是一个精心设计的切换过度的动画特效，如果您的网站有很多布局相同的内容，它们都有着相同的模块分布在不同的类别，那么这套模版非常适合您。对于一个电商网站，您可能希望用户能快速的找到所希望的产品，这套模版也具有搜索功能，能帮助用户快速找到自己所需要的产品。它利用CSS转换和jQuery的滑动来实现的，还具有响应式功能，希望对您的项目有所帮助。

演示效果

用CSS与jQuery打造很炫的切换效果.rar

1. <header class="cd-header">
   
2.         <h1>Content Filter</h1>
   
3. </header>
   
4. 
   
5. <main class="cd-main-content">
   
6.         <div class="cd-tab-filter-wrapper">
   
7.                 <div class="cd-tab-filter">
   
8.                         <ul class="cd-filters">
   
9.                                 <li class="placeholder">
   
10.                                         <a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
    
11.                                 </li>
    
12.                                 <li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
    
13.                                 <li class="filter" data-filter=".color-1"><a href="#0" data-type="color-1">Color 1</a></li>
    
14.                                 <li class="filter" data-filter=".color-2"><a href="#0" data-type="color-2">Color 2</a></li>
    
15.                         </ul> <!-- cd-filters -->
    
16.                 </div> <!-- cd-tab-filter -->
    
17.         </div> <!-- cd-tab-filter-wrapper -->
    
18. 
    
19.         <section class="cd-gallery">
    
20.                 <ul>
    
21.                         <li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
    
22.                         <li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
    
23.                         <li><!-- ... --></li>
    
24.                         <li class="gap"></li>
    
25.                 </ul>
    
26.                 <div class="cd-fail-message">No results found</div>
    
27.         </section> <!-- cd-gallery -->
    
28. 
    
29.         <div class="cd-filter">
    
30.                 <form>
    
31.                         <div class="cd-filter-block">
    
32.                                 <h4>Block title</h4>
    
33.                                
    
34.                                 <div class="cd-filter-content">
    
35.                                         <!-- filter content -->
    
36.                                 </div> <!-- cd-filter-content -->
    
37.                         </div> <!-- cd-filter-block -->
    
38.                 </form>
    
39. 
    
40.                 <a href="#0" class="cd-close">Close</a>
    
41.         </div> <!-- cd-filter -->
    
42. 
    
43.         <a href="#0" class="cd-filter-trigger">Filters</a>
    
44. </main> <!-- cd-main-content -->

复制代码

1. .cd-tab-filter-wrapper {
   
2.   background-color: #ffffff;
   
3.   z-index: 1;
   
4. }
   
5. 
   
6. .cd-filter {
   
7.   position: absolute;
   
8.   top: 0;
   
9.   left: 0;
   
10.   width: 280px;
    
11.   height: 100%;
    
12.   background: #ffffff;
    
13.   z-index: 2;
    
14.   transform: translateX(-100%);
    
15.   transition: transform 0.3s, box-shadow 0.3s;
    
16. }
    
17. 
    
18. .cd-filter-trigger {
    
19.   position: absolute;
    
20.   top: 0;
    
21.   left: 0;
    
22.   height: 50px;
    
23.   width: 60px;
    
24.   z-index: 3;
    
25. }
    
26. 
    
27. .cd-main-content.is-fixed .cd-tab-filter-wrapper {
    
28.   position: fixed;
    
29.   top: 0;
    
30.   left: 0;
    
31.   width: 100%;
    
32. }
    
33. 
    
34. .cd-main-content.is-fixed .cd-filter {
    
35.   position: fixed;
    
36.   height: 100vh;
    
37.   overflow: hidden;
    
38. }
    
39. 
    
40. .cd-main-content.is-fixed .cd-filter-trigger {
    
41.   position: fixed;
    
42. }

复制代码

via:http://www.yunrui.co/22245.html

【用CSS与jQuery打造很炫的切换效果】相关文章

1. 用CSS与jQuery打造很炫的切换效果

2. 用CSS和jQuery打造3D窗帘切换特效

3. 用纯CSS3实现图片幻灯片切换效果

4. HTML5和jQuery打造的3D相册

5. 随机字符变换效果的jQuery插件开发教程

6. 随机字符变换效果的jQuery插件开发教程

7. HTML5与jQuery实现渐变绚丽网页图片效果

8. 用CSS3打造一组闪亮的半透明按钮效果

9. 10款超炫的开源jquery的源码预览效果

10. 利用HTML5与jQuery技术创建一个简单的自动表单完成

本文来源：https://www.51html5.com/a1475.html