下拉式的表单作品合集，点击任意区域，结束上方加载动画
Created
June 21, 2017 03:17
-
-
Save wangyongjie2017/63ab8797fc98e421e1042cbae39994e6 to your computer and use it in GitHub Desktop.
My Works
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul class="zzc-ul"> | |
| <li class="zzc-li tomato"></li> | |
| <li class="zzc-li orange"></li> | |
| <li class="zzc-li gold"></li> | |
| <li class="zzc-li green"></li> | |
| <li class="zzc-li steelblue"></li> | |
| </ul> | |
| <div class="meteor"></div> | |
| <div class="sidebar"> | |
| <ul class="level-1"> | |
| <li> | |
| <h3><i class="fa fa-check-square-o"></i>表单相关</h3> | |
| <ul class="level-2"> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/ozzEXw" target=_blank>去除字符串左右的空格</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/kkkKWy" target=_blank>函数接受参数并且弹出</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/XjBKqX" target=_blank>提示可输入剩余的文字</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/VKBOVL" target=_blank>级联菜单</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| <h3><i class="fa fa-picture-o"></i>图片相关</h3> | |
| <ul class="level-2"> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/KgRYkq" target=_blank>鼠标移入移出改变透明度</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/ozBZAb" target=_blank>透镜CSS实现</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/bZJmLw" target=_blank>透镜CSS实现</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/jrpGKz" target=_blank>透镜JS实现</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="active"> | |
| <h3><i class="fa fa-code"></i>内容展示</h3> | |
| <ul class="level-2"> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/wzxbNq" target=_blank>可拖动弹出层</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/ZpJYrK" target=_blank>滑动门</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/qaavLw" target=_blank>js控制div的属性</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/qaavLw" target=_blank>js更换整体背景</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/WxWKBY" target=_blank>sideBar控制</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/XjYkPL" target=_blank>js-Tooltips提示框-0</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/amjqGx" target=_blank>js-Tooltips提示框-1</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/PGpyAZ" target=_blank>固定边栏滚动</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/vXaKoA" target=_blank>CSS模拟顶端加载进度条</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| <h3><i class="fa fa-css3"></i>CSS动画相关</h3> | |
| <ul class="level-2"> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/KgWJXx" target=_blank>CSS-3D 旋转立方体</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/ozEjGm" target=_blank>CANVAS 绘图</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/qaqdwx" target=_blank>正在加载动画</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/BLRxXL" target=_blank>CSS-3D投影墙</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/QEXNpb" target=_blank>卫星</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/YWrbOm" target=_blank>旋转</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| <h3><i class="fa fa-camera"></i>图片轮转</h3> | |
| <ul class="level-2"> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/ozGYgr" target=_blank>焦点图轮转-附带缓冲效果</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/NRvAwB" target=_blank>焦点图轮转-JS</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| <h3><i class="fa fa-sitemap"></i>TAB选项卡</h3> | |
| <ul class="level-2"> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/ALRNPz" target=_blank>TAB选项卡</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/XKQBQJ" target=_blank>ToolTips CSS实现</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| <h3><i class="fa fa-clock-o"></i>时间日期</h3> | |
| <ul class="level-2"> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/ZpBpBm" target=_blank>JS简易本地时钟</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/dXBGYp" target=_blank>CSS模拟时钟</a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| <h3><i class="fa fa-fire"></i>其他</h3> | |
| <ul class="level-2"> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/JRbdqr" target=_blank>jQ-计算器</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/EyJqpm" target=_blank>CSS镜面效果</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/zBXPmx" target=_blank>FCC相关作品-个人主页设计</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/qNZwyb" target=_blank>FCC相关作品随机诗词推文发送</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/pbBWVd" target=_blank>FCC相关作品致敬页</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/oLOrqL" target=_blank>CSS阴影集合</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/YGYoKR" target=_blank>响应式媒体查询检测</a> | |
| </li> | |
| <li> | |
| <a href="https://s.codepen.io/suxiesumiao/debug/dpVNaO" target=_blank>照片墙</a> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ | |
| $("h3").on("click",function(){ | |
| $("ul ul").slideUp(300); | |
| if(!$(this).next().is(":visible")){ | |
| $(this).next().slideDown(300); | |
| } | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
| <script src="https://codepen.io/suxiesumiao/pen/WGxwjv.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html,body { | |
| position: relative; | |
| overflow: hidden; | |
| background-image: url("http://p4.music.126.net/tTcOL9gTspHmxji3BaXCrg==/1376588571286814.jpg?param=1000y1000"); | |
| background-repeat: no-repeat; | |
| background-size: 100% 100vh; | |
| } | |
| li { | |
| list-style-type: none; | |
| } | |
| a { | |
| text-decoration: none; | |
| display: block; | |
| color: #233; | |
| } | |
| .sidebar { | |
| width: 300px; | |
| /*自适应 不要设定高度*/ | |
| position: relative; | |
| display: block; | |
| box-shadow: 20px -20px 60px rgba(255, 255, 255, .3); | |
| border-radius: .2em; | |
| /*只对box-shadow起作用*/ | |
| margin: 60px auto; | |
| } | |
| @media screen and (max-width: 768px){ | |
| .sidebar{ | |
| width: 80%; | |
| } | |
| } | |
| .sidebar h3 { | |
| color: rgb(85, 85, 85); | |
| text-shadow: 0 0 10px; | |
| font-size: 16px; | |
| font-weight: 500; | |
| letter-spacing: 2px; | |
| line-height: 6vh; | |
| cursor: pointer; | |
| } | |
| i { | |
| margin-right: 10px; | |
| color: rgb(52,73,93); | |
| text-shadow: none; | |
| } | |
| .level-2 { | |
| display: none; | |
| } | |
| .active ul { | |
| display: block; | |
| } | |
| .sidebar h3, | |
| .level-2>li { | |
| padding-left: 10px; | |
| } | |
| h3, | |
| ul, | |
| li { | |
| display: block; | |
| list-style-type: none; | |
| } | |
| .level-1 h3{ | |
| background: rgb(244, 244, 244); | |
| } | |
| .level-1>li:hover h3 { | |
| color: rgb(255, 255, 255); | |
| background: rgb(218,89,97); | |
| } | |
| .level-2>li { | |
| margin: 2px 0; | |
| background: rgb(0,250,250); | |
| transition: all .3s ease-in-out; | |
| } | |
| .level-2>li:hover { | |
| background: transparent; | |
| box-shadow: 0 0 0 2px rgb(218,89,97); | |
| } | |
| .level-2>li:hover a { | |
| color: #EEE; | |
| text-align: center; | |
| } | |
| /* 流星*/ | |
| .meteor { | |
| position: absolute; | |
| width: 2px; | |
| height: 100px; | |
| border-top-left-radius: 100%; | |
| background: linear-gradient(transparent,white); | |
| transform: translateY(0) translateX(101vw) rotate(60deg); | |
| animation: iMetor 3s ease-out infinite; | |
| } | |
| @keyframes iMetor { | |
| to { | |
| transform: translateY(60vh) translateX(0) rotate(45deg) scale(.2); | |
| opacity: 0; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet" /> | |
| <link href="https://codepen.io/suxiesumiao/pen/WGxwjv.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment