Animated Weather Icons
17 | 18 |
19 |
20 |
25 |
26 |
21 |
22 |
23 |
24 |
27 |
28 |
33 |
34 |
29 |
30 |
31 |
32 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
46 |
47 |
42 |
43 |
44 |
45 |
48 |
52 |
53 |
49 |
50 |
51 |
54 |
55 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/3D radio form/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
86 |
89 |
93 |
94 |
95 |
--------------------------------------------------------------------------------
/Waterfalls Flow/css/Sortable.css:
--------------------------------------------------------------------------------
1 | :root{--main-bg-color: #FF7675}
2 | *,*::after,*::before{box-sizing: border-box}
3 | html{font-size: .625em; font-size: calc(1em * .625); -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%}
4 | body{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; font: normal 300 1.4em/1.2 'Open-sans', helvetica, sans-serif; color: #111; background-color: #2d2d2d}
5 | a{text-decoration: none; color: #111; cursor: pointer}
6 | ol,ul{list-style: none; margin: 0; padding: 0}
7 | img{max-width: 100%}
8 | b,strong{font-weight: 600}
9 | hr{background: #111; box-shadow: none; border: none; height: 1px; width: 100%; margin: 10px 0}
10 | ::selection{background: var(--main-bg-color); color: #fff}
11 | ::-moz-selection{background: var(--main-bg-color); color: #fff}
12 |
13 | .container{width: 100%; max-width: 980px; margin: 0 auto; padding: 0 10px}
14 | .container .wrapper{padding: 40px 0}
15 |
16 | .container .wrapper .sortable__nav{display: flex; justify-content: center; margin-bottom: 20px}
17 | .container .wrapper .sortable__nav .nav__link{padding: 0 20px 4px; color: #fff; font-size: 1.4rem; font-weight: 300; display: block; border-bottom: 2px solid transparent}
18 | .container .wrapper .sortable__nav .nav__link.is-active{border-color: var(--main-bg-color)}
19 |
20 | .container .wrapper .sjs-default{position: relative; padding: 0; margin: 0; opacity: 0; transition: height .2s ease-out, opacity .2s ease-out .2s}
21 | .container .wrapper [data-sjsel]{opacity: 0; position: absolute; top: 0; left: 0; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out}
22 | .container .wrapper [data-sjsel] .card{background: #fff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .1); display: flex; flex-direction: column; transition: box-shadow .2s ease-in-out}
23 | .container .wrapper [data-sjsel] .card .card__picture{display: block; width: 100%; height: auto; border-top-left-radius: 6px; border-top-right-radius: 6px}
24 | .container .wrapper [data-sjsel] .card .card-infos{padding: 20px; background: #fff; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px}
25 | .container .wrapper [data-sjsel] .card .card-infos .card__title{font-family: hind; font-size: 1.8rem; font-weight: 600; line-height: 1.4; margin: 0 0 10px}
26 | .container .wrapper [data-sjsel] .card .card-infos .card__text{font-size: 1.4rem; font-weight: 300; margin: 0; color: #86888a}
27 |
--------------------------------------------------------------------------------
/Message/readme.md:
--------------------------------------------------------------------------------
1 | # Qmsg 消息提示插件
2 |
3 | ## 使用
4 |
5 | 兼容IE>=9。
6 |
7 | ```html
8 |
9 |
10 |
11 |
12 |
13 |
14 |
19 |
20 | ```
21 |
22 | ## 全局配置
23 | 在引入message.js之前可以通过全局变量 QMSG_GLOBALS.DEFAULTS 来进行配置
24 | ```javascript
25 | window.QMSG_GLOBALS = {
26 | DEFAULTS:{
27 | showClose:true,
28 | timeout:5000
29 | }
30 | }
31 | ```
32 | 或者通过`Qmsg.config({})`来动态修改全局配置:
33 | ```js
34 | Qmsg.config({
35 | showClose:true,
36 | timeout:5000
37 | })
38 | ```
39 | 所有支持的配置信息如下:
40 | |参数名|类型|描述|默认|
41 | | ---- | ---- | ---- | ---- |
42 | |position|String|消息显示的位置,居于顶部的左中右,'left','right','center'可选|'center'|
43 | |showClose|Boolean|是否显示关闭图标|false|
44 | |timeout|Number|多久后自动关闭，单位ms|2000|
45 | |autoClose|Boolean|是否自动关闭|true|
46 | |content|String|提示的内容|''|
47 | |onClose|Function|关闭的回调函数|null|
48 | |html|Boolean|是否将内容作为html渲染|false|
49 | |maxNums|Number|最多显示消息(autoClose:true)的数量|5|
50 |
51 | ## Qmsg支持的方法
52 | ### Qmsg.info()
53 | ### Qmsg.warning()
54 | ### Qmsg.error()
55 | ### Qmsg.success()
56 | ### Qmsg.loading()
57 | 以上方法均可传递1-2个参数，如下：
58 | ```js
59 | Qmsg.loading("我是加载条");
60 | Qmsg.info("给你个眼神，你懂得",{
61 | showClose:true,
62 | onClose:function(){
63 | console.log('我懂了')
64 | }
65 | })
66 | Qmsg.error({
67 | content:"1+1=3",
68 | timeout:5000
69 | })
70 | //...
71 |
72 | ```
73 | 注意：`Qmsg.loading()`默认修改`autoClose=false`,一般来说需要手动关闭：
74 | ```js
75 | var loadingMsg = Qmsg.loading('我是加载条');
76 | //do something
77 | loadingMsg.close();
78 | ```
79 | 如需要自动关闭则需要如下调用:
80 | ```js
81 | Qmsg.loading("我是加载条",{
82 | autoClose:true
83 | })
84 | //或者
85 | Qmsg.loading({
86 | autoClose:true,
87 | content:"我是加载条"
88 | })
89 | ```
90 | ### Qmsg.closeAll()
91 | 关闭所有消息，包括`autoClose=false`的消息
92 |
93 | ## 消息实例支持的方法和属性
94 | ```js
95 | var aMsg = Qmsg.info("这是个info消息")
96 | ```
97 | ### close()
98 | 关闭当前消息,会触发`onClose`回调函数。
99 | ```
100 | aMsg.close()
101 | ```
102 | ### destroy()
103 | 销毁消息，不会触发`onClose`回调函数。
104 | ```js
105 | aMsg.destroy()
106 | ```
107 |
108 | ### timeout
109 |
110 | 多久后关闭，单位ms,设置该值可动态修改该消息实例的关闭时间，前提是该消息实例的`autoClose==true`。
111 |
112 |
--------------------------------------------------------------------------------
/Swipe left and right/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Day
(initial)
87 | (initial)
Day
(changes in light scheme)
88 | (changes in light scheme)
Day
(changes in dark scheme)
(changes in dark scheme)
89 |
Night
(initial)
90 | (initial)
Night
(changes in light scheme)
91 | (changes in light scheme)
Night
(changes in dark scheme)
92 | (changes in dark scheme)
左右滑动查看效果
30 |
31 |
32 |
33 |
34 |
35 |
54 |
55 |
56 |
57 |
122 |
123 |
124 |
125 |
126 |
127 |
--------------------------------------------------------------------------------
/Form placeholder/css/placeholder.css:
--------------------------------------------------------------------------------
1 | body {
2 | align-items: center;
3 | background-color: #000;
4 | display: flex;
5 | justify-content: center;
6 | height: 100vh;
7 | }
8 |
9 | .form {
10 | background-color: #15172b;
11 | border-radius: 20px;
12 | box-sizing: border-box;
13 | height: 500px;
14 | padding: 20px;
15 | width: 320px;
16 | }
17 |
18 | .title {
19 | color: #eee;
20 | font-family: sans-serif;
21 | font-size: 36px;
22 | font-weight: 600;
23 | margin-top: 30px;
24 | }
25 |
26 | .subtitle {
27 | color: #eee;
28 | font-family: sans-serif;
29 | font-size: 16px;
30 | font-weight: 600;
31 | margin-top: 10px;
32 | }
33 |
34 | .input-container {
35 | height: 50px;
36 | position: relative;
37 | width: 100%;
38 | }
39 |
40 | .ic1 {
41 | margin-top: 40px;
42 | }
43 |
44 | .ic2 {
45 | margin-top: 30px;
46 | }
47 |
48 | .input {
49 | background-color: #303245;
50 | border-radius: 12px;
51 | border: 0;
52 | box-sizing: border-box;
53 | color: #eee;
54 | font-size: 18px;
55 | height: 100%;
56 | outline: 0;
57 | padding: 4px 20px 0;
58 | width: 100%;
59 | }
60 |
61 | .cut {
62 | background-color: #15172b;
63 | border-radius: 10px;
64 | height: 20px;
65 | left: 20px;
66 | position: absolute;
67 | top: -20px;
68 | transform: translateY(0);
69 | transition: transform 200ms;
70 | width: 76px;
71 | }
72 |
73 | .cut-short {
74 | width: 50px;
75 | }
76 |
77 | .input:focus ~ .cut,
78 | .input:not(:placeholder-shown) ~ .cut {
79 | transform: translateY(8px);
80 | }
81 |
82 | .placeholder {
83 | color: #65657b;
84 | font-family: sans-serif;
85 | left: 20px;
86 | line-height: 14px;
87 | pointer-events: none;
88 | position: absolute;
89 | transform-origin: 0 50%;
90 | transition: transform 200ms, color 200ms;
91 | top: 20px;
92 | }
93 |
94 | .input:focus ~ .placeholder,
95 | .input:not(:placeholder-shown) ~ .placeholder {
96 | transform: translateY(-30px) translateX(10px) scale(0.75);
97 | }
98 |
99 | .input:not(:placeholder-shown) ~ .placeholder {
100 | color: #808097;
101 | }
102 |
103 | .input:focus ~ .placeholder {
104 | color: #dc2f55;
105 | }
106 |
107 | .submit {
108 | background-color: #08d;
109 | border-radius: 12px;
110 | border: 0;
111 | box-sizing: border-box;
112 | color: #eee;
113 | cursor: pointer;
114 | font-size: 18px;
115 | height: 50px;
116 | margin-top: 38px;
117 | // outline: 0;
118 | text-align: center;
119 | width: 100%;
120 | }
121 |
122 | .submit:active {
123 | background-color: #06b;
124 | }
125 |
126 |
--------------------------------------------------------------------------------
/Adaptive Banner/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
25 | 
31 |
32 |
40 |
41 |
48 |
49 |
50 |
61 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/navfix/navfix.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
51 |
60 | -
52 |
- Semporia/Quantumult-X 53 |
- Semporia/clash-X 54 |
- Semporia/Gallery 55 |
- Semporia/TikTok-Unlock 56 |
- Semporia/Surge 57 |
- Semporia/Injection-House 58 |
93 |
95 |
102 | 置顶导航菜单,随滚动条浮动定位菜单,固定菜单到顶部
94 |
103 |
105 | $('#mynav').navfix(0,999);
106 | });
107 | //第一个值： 你期望导航在距离顶部多少的位置浮动
108 | //第二个值： 导航zindex
109 |
110 |
111 |
112 |
123 |
124 |
125 |
126 |
127 |
--------------------------------------------------------------------------------
/404/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | 使用方式：
104 | $(document).ready(function(e) {105 | $('#mynav').navfix(0,999);
106 | });
107 | //第一个值： 你期望导航在距离顶部多少的位置浮动
108 | //第二个值： 导航zindex
109 |
47 |
13 |
36 |
37 |
101 |
102 |
103 |
--------------------------------------------------------------------------------
/Liquid UI elements/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
13 |
21 |
29 |
37 |
44 |
51 |
59 |
79 |
95 |
96 |
97 |
--------------------------------------------------------------------------------
/Media query/README.md:
--------------------------------------------------------------------------------
1 | # prefers-color-scheme
2 |
3 | ```
4 | If you have set privacy.resistFingerprinting to true, prefers-color-scheme preference is overridden to light.
5 | Alternately, users can create the numeric preference ui.systemUsesDarkTheme to override the default behavior and return light (value: 0), dark (value: 1), or no-preference (value: 2). (Any other value causes Firefox to return light.)
6 | ```
7 |
8 | The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme.
9 |
10 | ### Syntax
11 |
12 | * light
13 | Indicates that user has notified the system that they prefer an interface that has a light theme, or has not expressed an active preference.
14 |
15 | * dark
16 | Indicates that user has notified the system that they prefer an interface that has a dark theme.
17 |
18 | ### Examples
19 |
20 | The elements below have an initial color theme. They can be further themed according to the user's color scheme preference.
21 |
22 | ### HTML
23 |
24 | ```
25 |
60 |
77 |
78 | Day (initial)
26 | Day (changes in light scheme)
27 | Day (changes in dark scheme)
28 | 29 |
Night (initial)
30 | Night (changes in light scheme)
31 | Night (changes in dark scheme)
32 | ```
33 |
34 | ### CSS
35 |
36 | ```
37 | .day { background: #eee; color: black; }
38 | .night { background: #333; color: white; }
39 |
40 | @media (prefers-color-scheme: dark) {
41 | .day.dark-scheme { background: #333; color: white; }
42 | .night.dark-scheme { background: black; color: #ddd; }
43 | }
44 |
45 | @media (prefers-color-scheme: light) {
46 | .day.light-scheme { background: white; color: #555; }
47 | .night.light-scheme { background: #eee; color: black; }
48 | }
49 |
50 | .day, .night {display: inline-block; padding: 1em; width: 7em; height: 2em; vertical-align: middle; }
51 | ```
52 |
53 |
54 | ### Result
55 |
56 | ```html
57 |
58 |
59 |
60 |
61 |
62 |
63 |
95 |
138 | Day (initial)
143 | Day (changes in light scheme)
144 | Day (changes in dark scheme)
145 |
Night (initial)
146 | Night (changes in light scheme)
147 | Night (changes in dark scheme)
148 |
149 |
150 |
151 | ```
152 |
--------------------------------------------------------------------------------
/Mobile phone sliding box/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | 拖拽看看效果
78 |
79 |
120 |
121 |
122 |
123 |
147 |
148 |
149 |
--------------------------------------------------------------------------------
/Bootstrap stencil/assets/scripts/vlt-helpers.js:
--------------------------------------------------------------------------------
1 | /***********************************************
2 | * VLThemes
3 | ***********************************************/
4 |
5 | 'use strict';
6 |
7 | /**
8 | * Initialize main helper object
9 | */
10 | var VLTJS = {
11 | window: jQuery(window),
12 | document: jQuery(document),
13 | html: jQuery('html'),
14 | body: jQuery('body'),
15 | is_safari: /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
16 | is_firefox: navigator.userAgent.toLowerCase().indexOf('firefox') > -1,
17 | is_chrome: /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor),
18 | is_ie10: navigator.appVersion.indexOf('MSIE 10') !== -1,
19 | transitionEnd: 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
20 | animIteration: 'animationiteration webkitAnimationIteration oAnimationIteration MSAnimationIteration',
21 | animationEnd: 'animationend webkitAnimationEnd',
22 | getMousePos: function (e) {
23 | var posx = 0;
24 | var posy = 0;
25 | if (!e) e = window.event;
26 | if (e.pageX || e.pageY) {
27 | posx = e.pageX;
28 | posy = e.pageY;
29 | } else if (e.clientX || e.clientY) {
30 | posx = e.clientX + VLTJS.body.scrollLeft() + VLTJS.document.scrollLeft();
31 | posy = e.clientY + VLTJS.body.scrollTop() + VLTJS.document.scrollTop();
32 | }
33 | return {
34 | x: posx,
35 | y: posy
36 | }
37 | }
38 | };
39 |
40 | /**
41 | * Detects whether user is viewing site from a mobile device
42 | */
43 | VLTJS.isMobile = {
44 | Android: function () {
45 | return navigator.userAgent.match(/Android/i);
46 | },
47 | BlackBerry: function () {
48 | return navigator.userAgent.match(/BlackBerry/i);
49 | },
50 | iOS: function () {
51 | return navigator.userAgent.match(/iPhone|iPad|iPod/i);
52 | },
53 | Opera: function () {
54 | return navigator.userAgent.match(/Opera Mini/i);
55 | },
56 | Windows: function () {
57 | return navigator.userAgent.match(/IEMobile/i);
58 | },
59 | any: function () {
60 | return (VLTJS.isMobile.Android() || VLTJS.isMobile.BlackBerry() || VLTJS.isMobile.iOS() || VLTJS.isMobile.Opera() || VLTJS.isMobile.Windows());
61 | }
62 | };
63 |
64 | /**
65 | * Debounce resize
66 | */
67 | var resizeArr = [];
68 | var resizeTimeout;
69 | VLTJS.window.on('load resize orientationchange', function (e) {
70 | if (resizeArr.length) {
71 | clearTimeout(resizeTimeout);
72 | resizeTimeout = setTimeout(function () {
73 | for (var i = 0; i < resizeArr.length; i++) {
74 | resizeArr[i](e);
75 | }
76 | }, 250);
77 | }
78 | });
79 |
80 | VLTJS.debounceResize = function (callback) {
81 | if (typeof callback === 'function') {
82 | resizeArr.push(callback);
83 | } else {
84 | window.dispatchEvent(new Event('resize'));
85 | }
86 | }
87 |
88 | VLTJS.addLedingZero = function (number) {
89 | return ('0' + number).slice(-2);
90 | }
91 |
92 | /**
93 | * Throttle scroll
94 | */
95 | var throttleArr = [];
96 | var didScroll;
97 | var delta = 5;
98 | var lastScrollTop = 0;
99 |
100 | VLTJS.window.on('load resize scroll orientationchange', function () {
101 | if (throttleArr.length) {
102 | didScroll = true;
103 | }
104 | });
105 |
106 | function hasScrolled() {
107 |
108 | var scrollTop = VLTJS.window.scrollTop(),
109 | windowHeight = VLTJS.window.height(),
110 | documentHeight = VLTJS.document.height(),
111 | scrollState = '';
112 |
113 | // Make sure they scroll more than delta
114 | if (Math.abs(lastScrollTop - scrollTop) <= delta) {
115 | return;
116 | }
117 |
118 | if (scrollTop > lastScrollTop) {
119 | scrollState = 'down';
120 | } else if (scrollTop < lastScrollTop) {
121 | scrollState = 'up';
122 | } else {
123 | scrollState = 'none';
124 | }
125 |
126 | if (scrollTop === 0) {
127 | scrollState = 'start';
128 | } else if (scrollTop >= documentHeight - windowHeight) {
129 | scrollState = 'end';
130 | }
131 |
132 | for (var i in throttleArr) {
133 | if (typeof throttleArr[i] === 'function') {
134 | throttleArr[i](scrollState, scrollTop, lastScrollTop, VLTJS.window);
135 | }
136 | }
137 |
138 | lastScrollTop = scrollTop;
139 | }
140 |
141 | setInterval(function () {
142 | if (didScroll) {
143 | didScroll = false;
144 | window.requestAnimationFrame(hasScrolled);
145 | }
146 | }, 250);
147 |
148 | VLTJS.throttleScroll = function (callback) {
149 | if (typeof callback === 'function') {
150 | throttleArr.push(callback);
151 | }
152 | }
153 |
154 | /**
155 | * VAR polyfill
156 | */
157 | if (typeof cssVars !== 'undefined') {
158 | cssVars({
159 | onlyVars: true,
160 | });
161 | }
--------------------------------------------------------------------------------
/Bootstrap stencil/assets/vendors/jquery-numerator.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery Numerator Plugin 0.2.1
3 | * https://github.com/garethdn/jquery-numerator
4 | *
5 | * Copyright 2015, Gareth Nolan
6 | * http://ie.linkedin.com/in/garethnolan/
7 |
8 | * Based on jQuery Boilerplate by Zeno Rocha with the help of Addy Osmani
9 | * http://jqueryboilerplate.com
10 | *
11 | * Licensed under the MIT license:
12 | * http://www.opensource.org/licenses/MIT
13 | */
14 |
15 | ;(function (factory) {
16 | 'use strict';
17 | if (typeof define === 'function' && define.amd) {
18 | // AMD is used - Register as an anonymous module.
19 | define(['jquery'], factory);
20 | } else if (typeof exports === 'object') {
21 | factory(require('jquery'));
22 | } else {
23 | // Neither AMD nor CommonJS used. Use global variables.
24 | if (typeof jQuery === 'undefined') {
25 | throw 'jquery-numerator requires jQuery to be loaded first';
26 | }
27 | factory(jQuery);
28 | }
29 | }(function ($) {
30 |
31 | var pluginName = "numerator",
32 | defaults = {
33 | easing: 'swing',
34 | duration: 500,
35 | delimiter: undefined,
36 | rounding: 0,
37 | toValue: undefined,
38 | fromValue: undefined,
39 | queue: false,
40 | onStart: function(){},
41 | onStep: function(){},
42 | onProgress: function(){},
43 | onComplete: function(){}
44 | };
45 |
46 | function Plugin ( element, options ) {
47 | this.element = element;
48 | this.settings = $.extend( {}, defaults, options );
49 | this._defaults = defaults;
50 | this._name = pluginName;
51 | this.init();
52 | }
53 |
54 | Plugin.prototype = {
55 |
56 | init: function () {
57 | this.parseElement();
58 | this.setValue();
59 | },
60 |
61 | parseElement: function () {
62 | var elText = $.trim($(this.element).text());
63 |
64 | this.settings.fromValue = this.settings.fromValue || this.format(elText);
65 | },
66 |
67 | setValue: function() {
68 | var self = this;
69 |
70 | $({value: self.settings.fromValue}).animate({value: self.settings.toValue}, {
71 |
72 | duration: parseInt(self.settings.duration, 10),
73 |
74 | easing: self.settings.easing,
75 |
76 | start: self.settings.onStart,
77 |
78 | step: function(now, fx) {
79 | $(self.element).text(self.format(now));
80 | // accepts two params - (now, fx)
81 | self.settings.onStep(now, fx);
82 | },
83 |
84 | // accepts three params - (animation object, progress ratio, time remaining(ms))
85 | progress: self.settings.onProgress,
86 |
87 | complete: self.settings.onComplete
88 | });
89 | },
90 |
91 | format: function(value){
92 | var self = this;
93 |
94 | if ( parseInt(this.settings.rounding ) < 1) {
95 | value = parseInt(value, 10);
96 | } else {
97 | value = parseFloat(value).toFixed( parseInt(this.settings.rounding) );
98 | }
99 |
100 | if (self.settings.delimiter) {
101 | return this.delimit(value)
102 | } else {
103 | return value;
104 | }
105 | },
106 |
107 | // TODO: Add comments to this function
108 | delimit: function(value){
109 | var self = this;
110 |
111 | value = value.toString();
112 |
113 | if (self.settings.rounding && parseInt(self.settings.rounding, 10) > 0) {
114 | var decimals = value.substring( (value.length - (self.settings.rounding + 1)), value.length ),
115 | wholeValue = value.substring( 0, (value.length - (self.settings.rounding + 1)));
116 |
117 | return self.addDelimiter(wholeValue) + decimals;
118 | } else {
119 | return self.addDelimiter(value);
120 | }
121 | },
122 |
123 | addDelimiter: function(value){
124 | return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, this.settings.delimiter);
125 | }
126 | };
127 |
128 | $.fn[ pluginName ] = function ( options ) {
129 | return this.each(function() {
130 | if ( $.data( this, "plugin_" + pluginName ) ) {
131 | $.data(this, 'plugin_' + pluginName, null);
132 | }
133 | $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
134 | });
135 | };
136 |
137 | }));
--------------------------------------------------------------------------------
/Adaptive Banner/css/bxslider.css:
--------------------------------------------------------------------------------
1 | /**
2 | * * BxSlider v4.1.2 - Fully loaded, responsive content slider *
3 | * * http://bxslider.com * * Written by: Steven Wanderski, 2014 *
4 | * * http://stevenwanderski.com * (while drinking Belgian ales and listening to jazz) *
5 | * * CEO and founder of bxCreative, LTD
6 | /** RESET AND LAYOUT
7 | ===================================*/
8 |
9 | body{
10 | padding: 0px;
11 | margin: 0px;
12 | }
13 | .bx-wrapper {
14 | position: relative;
15 | width: 100%;
16 | margin: 0px;
17 | padding: 0px;
18 | *zoom: 1;
19 | overflow: hidden;
20 | transform: rotate(0deg);
21 | }
22 |
23 | .bx-wrapper img {
24 | display: block;
25 | width: 100%;
26 | }
27 |
28 | /** THEME ===================================*/
29 | .bx-wrapper .bx-viewport {
30 | /*-moz-box-shadow: 0 0 5px #ccc;-webkit-box-shadow: 0 0 5px #ccc;box-shadow: 0 0 5px #ccc;border: 5px solid #FFFFFF;left: -5px;background: #FFFFFF;*/
31 | /*fix other elements on the page moving (on Chrome)*/
32 | -webkit-transform: translatez(0);
33 | -moz-transform: translatez(0);
34 | -ms-transform: translatez(0);
35 | -o-transform: translatez(0);
36 | transform: translatez(0);
37 | }
38 |
39 | .bx-wrapper .bx-viewport .bxslider {
40 | padding: 0;
41 | margin: 0;
42 | }
43 |
44 | .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
45 | position: absolute;
46 | bottom: 5%;
47 | width: 100%;
48 | }
49 |
50 | /* LOADER */
51 | .bx-wrapper .bx-loading {
52 | min-height: 50px;
53 | background: url(../images/bx_loader.gif) center center no-repeat #FFFFFF;
54 | height: 100%;
55 | width: 100%;
56 | position: absolute;
57 | top: 0;
58 | left: 0;
59 | z-index: 2000;
60 | }
61 |
62 | /* PAGER */
63 | .bx-wrapper .bx-pager {
64 | text-align: center;
65 | font-size: .85em;
66 | font-family: Arial;
67 | font-weight: bold;
68 | color: #666;
69 | padding-top: 20px;
70 | }
71 |
72 | .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
73 | display: inline-block;
74 | *zoom: 1;
75 | *display: inline;
76 | }
77 |
78 | .bx-wrapper .bx-pager.bx-default-pager a {
79 | border: 1px solid #FFFFFF;
80 | text-indent: -9999px;
81 | display: block;
82 | width: 14px;
83 | height: 14px;
84 | margin: 0 2px;
85 | outline: 0;
86 | -moz-border-radius: 10px;
87 | -webkit-border-radius: 10px;
88 | border-radius: 10px;
89 | }
90 |
91 | .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
92 | border: none;
93 | background: url("../image/active.png") 0% 0% / 100% 100% no-repeat;
94 | align-self: center;
95 | }
96 |
97 | /* DIRECTION CONTROLS (NEXT / PREV) */
98 | .bx-wrapper .bx-prev {
99 | left: 10px;
100 | background: url(../image/bx-prev.png) no-repeat;
101 | background-size: 100%;
102 | }
103 |
104 | .bx-wrapper .bx-next {
105 | right: 10px;
106 | background: url(../image/bx-next.png) no-repeat;
107 | background-size: 100%
108 | }
109 |
110 | .bx-wrapper .bx-prev:hover {
111 | background-position: 0 0;
112 | }
113 |
114 | .bx-wrapper .bx-next:hover {
115 | background-position: 0 0;
116 | }
117 |
118 | .bx-wrapper .bx-controls-direction a {
119 | position: absolute;
120 | top: 50%;
121 | margin-top: -16px;
122 | outline: 0;
123 | width: 32px;
124 | height: 32px;
125 | text-indent: -9999px;
126 | z-index: 999;
127 | }
128 |
129 | .bx-wrapper .bx-controls-direction a.disabled {
130 | display: none;
131 | }
132 |
133 | /* AUTO CONTROLS (START / STOP) */
134 | .bx-wrapper .bx-controls-auto {
135 | text-align: center;
136 | }
137 |
138 | .bx-wrapper .bx-controls-auto .bx-start {
139 | display: block;
140 | text-indent: -9999px;
141 | width: 10px;
142 | height: 11px;
143 | outline: 0;
144 | background: url(../images/controls.png) -86px -11px no-repeat;
145 | margin: 0 3px;
146 | }
147 |
148 | .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active {
149 | background-position: -86px 0;
150 | }
151 |
152 | .bx-wrapper .bx-controls-auto .bx-stop {
153 | display: block;
154 | text-indent: -9999px;
155 | width: 9px;
156 | height: 11px;
157 | outline: 0;
158 | background: url(../images/controls.png) -86px -44px no-repeat;
159 | margin: 0 3px;
160 | }
161 |
162 | .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active {
163 | background-position: -86px -33px;
164 | }
165 |
166 | /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
167 | .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
168 | text-align: left;
169 | width: 80%;
170 | }
171 |
172 | .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
173 | right: 0;
174 | width: 35px;
175 | }
176 |
177 | /* IMAGE CAPTIONS */
178 | .bx-wrapper .bx-caption {
179 | position: absolute;
180 | bottom: 0;
181 | left: 0;
182 | background: #666\9;
183 | background: rgba(80, 80, 80, 0.75);
184 | width: 100%;
185 | }
186 |
187 | .bx-wrapper .bx-caption span {
188 | color: #FFFFFF;
189 | font-family: Arial;
190 | display: block;
191 | font-size: .85em;
192 | padding: 10px;
193 | }
--------------------------------------------------------------------------------
/Mobile phone sliding box/js/navbarscroll.js:
--------------------------------------------------------------------------------
1 | /*
2 | * 移动端模拟导航可点击自动滑动 0.1.4
3 | * Date: 2017-01-11
4 | * by: xiewei
5 | * 导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】
6 | */
7 | (function ($) {
8 | $.fn.navbarscroll = function (options) {
9 | //各种属性、参数
10 | var _defaults = {
11 | className:'cur', //当前选中点击元素的class类名
12 | clickScrollTime:300, //点击后滑动时间
13 | duibiScreenWidth:0.4, //单位以rem为准，默认为0.4rem
14 | scrollerWidth:3, //单位以px为准，默认为3,[仅用于特殊情况：外层宽度因为小数点造成的不精准情况]
15 | defaultSelect:0, //初始选中第n个，默认第0个
16 | fingerClick:0, //目标第0或1个选项触发,必须每一项长度一致，方可用此项
17 | endClickScroll:function(thisObj){}//回调函数
18 | }
19 | var _opt = $.extend(_defaults, options);
20 | this.each(function () {
21 | //插件实现代码
22 | var _wrapper = $(this);
23 | var _win = $(window);
24 | var _win_width = _win.width(),_wrapper_width = _wrapper.width(),_wrapper_off_left = _wrapper.offset().left;
25 | var _wrapper_off_right=_win_width-_wrapper_off_left-_wrapper_width;
26 | var _obj_scroller = _wrapper.children('.scroller');
27 | var _obj_ul = _obj_scroller.children('ul');
28 | var _obj_li = _obj_ul.children('li');
29 | var _scroller_w = 0;
30 | _obj_li.css({"margin-left":"0","margin-right":"0"});
31 | for (var i = 0; i < _obj_li.length; i++) {
32 | _scroller_w += _obj_li[i].offsetWidth;
33 | }
34 | _obj_scroller.width(_scroller_w+_opt.scrollerWidth);
35 | var myScroll = new IScroll('#'+_wrapper.attr('id'), {
36 | eventPassthrough: true,
37 | scrollX: true,
38 | scrollY: false,
39 | preventDefault: false
40 | });
41 | _init(_obj_li.eq(_opt.defaultSelect));
42 | _obj_li.click(function(){
43 | _init($(this));
44 | });
45 | //解决PC端谷歌浏览器模拟的手机屏幕出现莫名的卡顿现象，滑动时禁止默认事件（2017-01-11）
46 | _wrapper[0].addEventListener('touchmove',function (e){e.preventDefault();},false);
47 | function _init(thiObj){
48 | var $this_obj=thiObj;
49 | var duibi=_opt.duibiScreenWidth*_win_width/10,this_index=$this_obj.index(),this_off_left=$this_obj.offset().left,this_pos_left=$this_obj.position().left,this_width=$this_obj.width(),this_prev_width=$this_obj.prev('li').width(),this_next_width=$this_obj.next('li').width();
50 | var this_off_right=_win_width-this_off_left-this_width;
51 | if(_scroller_w+2>_wrapper_width){
52 | if(_opt.fingerClick==1){
53 | if(this_index==1){
54 | myScroll.scrollTo(-this_pos_left+this_prev_width,0, _opt.clickScrollTime);
55 | }else if(this_index==0){
56 | myScroll.scrollTo(-this_pos_left,0, _opt.clickScrollTime);
57 | }else if(this_index==_obj_li.length-2){
58 | myScroll.scrollBy(this_off_right-_wrapper_off_right-this_width,0, _opt.clickScrollTime);
59 | }else if(this_index==_obj_li.length-1){
60 | myScroll.scrollBy(this_off_right-_wrapper_off_right,0, _opt.clickScrollTime);
61 | }else{
62 | if(this_off_left-_wrapper_off_left-(this_width*_opt.fingerClick)
80 |
119 | -
81 |
- Box 1 82 |
- Box 2 83 |
- Box 3 84 |
- Box 4 85 |
- Box 5 86 |
- Box 6 87 |
- Box 7 88 |
- Box 8 89 |
- Box 9 90 |
- Box 10 91 |
- Box 11 92 |
- Box 12 93 |
- Box 13 94 |
- Box 14 95 |
- Box 15 96 |
- Box 16 97 |
- Box 17 98 |
- Box 18 99 |
- Box 1 100 |
- Box 2 101 |
- Box 3 102 |
- Box 4 103 |
- Box 5 104 |
- Box 6 105 |
- Box 7 106 |
- Box 8 107 |
- Box 9 108 |
- Box 10 109 |
- Box 11 110 |
- Box 12 111 |
- Box 13 112 |
- Box 14 113 |
- Box 15 114 |
- Box 16 115 |
- Box 17 116 |
- Box 18 117 |
19 | jQuery+css3响应式时间轴页面效果
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
17 |
18 |
19 |
97 |
98 |
117 |
118 |
119 |
120 |
--------------------------------------------------------------------------------
/Swipe left and right/js/jquery.touchSwipe.min.js:
--------------------------------------------------------------------------------
1 | (function(d){var l="left",k="right",c="up",r="down",b="in",s="out",i="none",o="auto",u="horizontal",p="vertical",f="all",e="start",h="move",g="end",m="cancel",a="ontouchstart" in window,t="TouchSwipe";var j={fingers:1,threshold:75,maxTimeThreshold:null,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,pinchIn:null,pinchOut:null,pinchStatus:null,click:null,triggerOnTouchEnd:true,allowPageScroll:"auto",fallbackToMouseEvents:true,excludedElements:"button, input, select, textarea, a, .noSwipe"};d.fn.swipe=function(x){var w=d(this),v=w.data(t);if(v&&typeof x==="string"){if(v[x]){return v[x].apply(this,Array.prototype.slice.call(arguments,1))}else{d.error("Method "+x+" does not exist on jQuery.swipe")}}else{if(!v&&(typeof x==="object"||!x)){return q.apply(this,arguments)}}return w};d.fn.swipe.defaults=j;d.fn.swipe.phases={PHASE_START:e,PHASE_MOVE:h,PHASE_END:g,PHASE_CANCEL:m};d.fn.swipe.directions={LEFT:l,RIGHT:k,UP:c,DOWN:r,IN:b,OUT:s};d.fn.swipe.pageScroll={NONE:i,HORIZONTAL:u,VERTICAL:p,AUTO:o};d.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,ALL:f};function q(v){if(v&&(v.allowPageScroll===undefined&&(v.swipe!==undefined||v.swipeStatus!==undefined))){v.allowPageScroll=i}if(!v){v={}}v=d.extend({},d.fn.swipe.defaults,v);return this.each(function(){var x=d(this);var w=x.data(t);if(!w){w=new n(this,v);x.data(t,w)}})}function n(J,R){var aj=(a||!R.fallbackToMouseEvents),ae=aj?"touchstart":"mousedown",K=aj?"touchmove":"mousemove",ac=aj?"touchend":"mouseup",I="touchcancel";var P=0;var E=null;var S=0;var af=0;var w=0;var U=1;var ak=0;var A=d(J);var F="start";var ai=0;var T=null;var B=0;var M=0;try{A.bind(ae,aa);A.bind(I,D)}catch(ag){d.error("events not supported "+ae+","+I+" on jQuery.swipe")}this.enable=function(){A.bind(ae,aa);A.bind(I,D);return A};this.disable=function(){H();return A};this.destroy=function(){H();A.data(t,null);return A};function aa(ao){if(L()){return}if(d(ao.target).closest(R.excludedElements,A).length>0){return}var ap=ao.originalEvent;var an,am=a?ap.touches[0]:ap;F=e;if(a){ai=ap.touches.length}else{ao.preventDefault()}P=0;E=null;ak=null;S=0;af=0;w=0;U=1;T=al();if(!a||(ai===R.fingers||R.fingers===f)||W()){T[0].start.x=T[0].end.x=am.pageX;T[0].start.y=T[0].end.y=am.pageY;B=x();if(ai==2){T[1].start.x=T[1].end.x=ap.touches[1].pageX;T[1].start.y=T[1].end.y=ap.touches[1].pageY;af=w=N(T[0].start,T[1].start)}if(R.swipeStatus||R.pinchStatus){an=ah(ap,F)}}else{D(ap);an=false}if(an===false){F=m;ah(ap,F);return an}else{V(true);A.bind(K,G);A.bind(ac,O)}}function G(ao){var aq=ao.originalEvent;if(F===g||F===m){return}var an,am=a?aq.touches[0]:aq;T[0].end.x=a?aq.touches[0].pageX:am.pageX;T[0].end.y=a?aq.touches[0].pageY:am.pageY;M=x();E=Z(T[0].start,T[0].end);if(a){ai=aq.touches.length}F=h;if(ai==2){if(af==0){T[1].start.x=aq.touches[1].pageX;T[1].start.y=aq.touches[1].pageY;af=w=N(T[0].start,T[1].start)}else{T[1].end.x=aq.touches[1].pageX;T[1].end.y=aq.touches[1].pageY;w=N(T[0].end,T[1].end);ak=X(T[0].end,T[1].end)}U=v(af,w)}if((ai===R.fingers||R.fingers===f)||!a){y(ao,E);P=z(T[0].start,T[0].end);S=C(T[0].start,T[0].end);if(R.swipeStatus||R.pinchStatus){an=ah(aq,F)}if(!R.triggerOnTouchEnd){var ap=!Y();if(Q()===true){F=g;an=ah(aq,F)}else{if(ap){F=m;ah(aq,F)}}}}else{F=m;ah(aq,F)}if(an===false){F=m;ah(aq,F)}}function O(ao){var au=ao.originalEvent;if(au.touches&&au.touches.length>0){return true}ao.preventDefault();M=x();if(af!=0){w=N(T[0].end,T[1].end);U=v(af,w);ak=X(T[0].end,T[1].end)}P=z(T[0].start,T[0].end);E=Z(T[0].start,T[0].end);S=C();if(R.triggerOnTouchEnd||(R.triggerOnTouchEnd===false&&F===h)){F=g;var aq=ad()||!W();var an=((ai===R.fingers||R.fingers===f)||!a);var am=T[0].end.x!==0;var ap=(an&&am&&aq);if(ap){var ar=Y();var at=Q();if((at===true||at===null)&&ar){ah(au,F)}else{if(!ar||at===false){F=m;ah(au,F)}}}else{F=m;ah(au,F)}}else{if(F===h){F=m;ah(au,F)}}A.unbind(K,G,false);A.unbind(ac,O,false);V(false)}function D(){ai=0;M=0;B=0;af=0;w=0;U=1;V(false)}function ah(ao,am){var an=undefined;if(R.swipeStatus){an=R.swipeStatus.call(A,ao,am,E||null,P||0,S||0,ai)}if(R.pinchStatus&&ad()){an=R.pinchStatus.call(A,ao,am,ak||null,w||0,S||0,ai,U)}if(am===m){if(R.click&&(ai===1||!a)&&(isNaN(P)||P===0)){an=R.click.call(A,ao,ao.target)}}if(am==g){if(R.swipe){an=R.swipe.call(A,ao,E,P,S,ai)}switch(E){case l:if(R.swipeLeft){an=R.swipeLeft.call(A,ao,E,P,S,ai)}break;case k:if(R.swipeRight){an=R.swipeRight.call(A,ao,E,P,S,ai)}break;case c:if(R.swipeUp){an=R.swipeUp.call(A,ao,E,P,S,ai)}break;case r:if(R.swipeDown){an=R.swipeDown.call(A,ao,E,P,S,ai)}break}switch(ak){case b:if(R.pinchIn){an=R.pinchIn.call(A,ao,ak||null,w||0,S||0,ai,U)}break;case s:if(R.pinchOut){an=R.pinchOut.call(A,ao,ak||null,w||0,S||0,ai,U)}break}}if(am===m||am===g){D(ao)}return an}function Q(){if(R.threshold!==null){return P>=R.threshold}return null}function Y(){var am;if(R.maxTimeThreshold){if(S>=R.maxTimeThreshold){am=false}else{am=true}}else{am=true}return am}function y(am,an){if(R.allowPageScroll===i||W()){am.preventDefault()}else{var ao=R.allowPageScroll===o;switch(an){case l:if((R.swipeLeft&&ao)||(!ao&&R.allowPageScroll!=u)){am.preventDefault()}break;case k:if((R.swipeRight&&ao)||(!ao&&R.allowPageScroll!=u)){am.preventDefault()}break;case c:if((R.swipeUp&&ao)||(!ao&&R.allowPageScroll!=p)){am.preventDefault()}break;case r:if((R.swipeDown&&ao)||(!ao&&R.allowPageScroll!=p)){am.preventDefault()}break}}}function C(){return M-B}function N(ap,ao){var an=Math.abs(ap.x-ao.x);var am=Math.abs(ap.y-ao.y);return Math.round(Math.sqrt(an*an+am*am))}function v(am,an){var ao=(an/am)*1;return ao.toFixed(2)}function X(){if(U<1){return s}else{return b}}function z(an,am){return Math.round(Math.sqrt(Math.pow(am.x-an.x,2)+Math.pow(am.y-an.y,2)))}function ab(ap,an){var am=ap.x-an.x;var ar=an.y-ap.y;var ao=Math.atan2(ar,am);var aq=Math.round(ao*180/Math.PI);if(aq<0){aq=360-Math.abs(aq)}return aq}function Z(an,am){var ao=ab(an,am);if((ao<=45)&&(ao>=0)){return l}else{if((ao<=360)&&(ao>=315)){return l}else{if((ao>=135)&&(ao<=225)){return k}else{if((ao>45)&&(ao<135)){return r}else{return c}}}}}function x(){var am=new Date();return am.getTime()}function H(){A.unbind(ae,aa);A.unbind(I,D);A.unbind(K,G);A.unbind(ac,O);V(false)}function W(){return R.pinchStatus||R.pinchIn||R.pinchOut}function ad(){return ak&&W()}function L(){return A.data(t+"_intouch")===true?true:false}function V(am){am=am===true?true:false;A.data(t+"_intouch",am)}function al(){var am=[];for(var an=0;an<=5;an++){am.push({start:{x:0,y:0},end:{x:0,y:0},delta:{x:0,y:0}})}return am}}})(jQuery);
--------------------------------------------------------------------------------
/3D radio form/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | border: 0;
3 | box-sizing: border-box;
4 | margin: 0;
5 | padding: 0;
6 | }
7 | :root {
8 | --bg: #e3e4e8;
9 | --fg: #17181c;
10 | --formBg: #fff;
11 | --radioBg: #fff;
12 | --radioBgActive: #e3e4e8;
13 | --radioBorder: #c7cad1;
14 | --radioBorderActive: #c7cad1;
15 | --radioSide: #c7cad1;
16 | --primary1: #0b46da;
17 | --primary2: #255ff4;
18 | --primary3: #5583f6;
19 | --primary4: #86a6f9;
20 | --depth: -4.5em;
21 | --ballDiam: 0.75em;
22 | --xAngle: -30deg;
23 | --yAngle: 45deg;
24 | font-size: calc(16px + (24 - 16)*(100vw - 320px)/(1280 - 320));
25 | }
26 | body, h3, input {
27 | color: var(--fg);
28 | font: 1em/1.5 Hind, sans-serif;
29 | }
30 | body, form, form h3, form label {
31 | transform-style: preserve-3d;
32 | }
33 | body {
34 | background: var(--bg);
35 | overflow-x: hidden;
36 | padding-top: 1.5em;
37 | height: 100vh;
38 | text-align: center;
39 | }
40 | h3 {
41 | font-weight: bold;
42 | }
43 | input[type=checkbox] {
44 | margin-right: 0.375em;
45 | }
46 | /* Layer setup */
47 | form {
48 | box-shadow: 0 0 0 0.1em var(--radioBorder) inset;
49 | max-width: 17em;
50 | margin: 4.5em auto 1.5em auto;
51 | padding: 1.5em;
52 | text-align: left;
53 | transform: rotateX(0) rotateY(0) translateZ(calc(var(--depth) / -2));
54 | transition: transform 0.25s linear;
55 | }
56 | form:before, form label:before, form h3:before, .dot, .dot-shadow {
57 | position: absolute;
58 | }
59 | form:before, form input[type=radio], form label:before, form h3:before {
60 | transform: translateZ(var(--depth));
61 | }
62 | form:before {
63 | background: var(--formBg);
64 | content: "";
65 | display: block;
66 | top: 0;
67 | left: 0;
68 | width: 100%;
69 | height: 100%;
70 | }
71 | input[type=checkbox]:checked ~ form {
72 | transform: rotateX(var(--xAngle)) rotateY(var(--yAngle)) translateZ(calc(var(--depth) / -2));
73 | }
74 | /* Radios */
75 | form input[type=radio], form span, form label:before, form h3:before {
76 | transition: all 0.15s linear;
77 | }
78 | form input[type=radio], span {
79 | border-radius: 50%;
80 | }
81 | form input[type=radio] {
82 | background: var(--radioBg);
83 | box-shadow:
84 | 0 0 0 var(--radioSide),
85 | 0 0 0 0.1em var(--radioBorder) inset,
86 | 0 0 0 #0003;
87 | margin-right: 0.5em;
88 | width: 1.5em;
89 | height: 1.5em;
90 | -webkit-appearance: none;
91 | appearance: none;
92 | }
93 | input[type=checkbox]:checked ~ form input[type=radio] {
94 | box-shadow:
95 | -0.25em -0.25em 0 var(--radioSide),
96 | 0 0 0 0.1em var(--radioBorder) inset,
97 | -0.25em -0.25em 0.25em #0005;
98 | }
99 | form input[type=radio]:active, form input[type=radio]:focus {
100 | background: var(--radioBgActive);
101 | box-shadow:
102 | 0 0 0 var(--radioSide),
103 | 0 0 0 0.1em var(--radioBorderActive) inset,
104 | 0 0 0 #0003;
105 | }
106 | input[type=checkbox]:checked ~ form input[type=radio]:active, input[type=checkbox]:checked ~ form input[type=radio]:focus {
107 | box-shadow:
108 | -0.25em -0.25em 0 var(--radioSide),
109 | 0 0 0 0.1em var(--radioBorderActive) inset,
110 | -0.25em -0.25em 0.25em #0005;
111 | }
112 | form input[type=radio]:focus {
113 | outline: transparent;
114 | }
115 | /* Text shadows */
116 | form h3 {
117 | position: relative;
118 | }
119 | form label {
120 | cursor: pointer;
121 | display: flex;
122 | margin: 0.75em 0;
123 | position: relative;
124 | -webkit-tap-highlight-color: transparent;
125 | }
126 | form label:before, form h3:before {
127 | color: transparent;
128 | content: attr(data-text);
129 | top: 0;
130 | text-shadow: 0 0 0.25em transparent;
131 | transition-delay: 0.15s;
132 | }
133 | form label:before {
134 | left: 2em;
135 | }
136 | input[type=checkbox]:checked ~ form label:before, input[type=checkbox]:checked ~ form h3:before {
137 | text-shadow: 0 0 0.25em #0005;
138 | transition-delay: 0;
139 | }
140 | form h3:before {
141 | top: 0;
142 | left: 0;
143 | }
144 | /* Dots */
145 | .dot, .dot-shadow {
146 | display: block;
147 | pointer-events: none;
148 | top: 0.375em;
149 | left: 0.375em;
150 | width: var(--ballDiam);
151 | height: var(--ballDiam);
152 | }
153 | .dot {
154 | background: var(--primary2);
155 | box-shadow:
156 | -0.2em -0.2em 0.4em var(--primary1) inset,
157 | 0 0.2em 0.4em var(--primary3) inset;
158 | transform: translateZ(var(--depth)) rotateY(0) rotateX(0) scale(0);
159 | }
160 | form input[type=radio]:active ~ .dot,
161 | form input[type=radio]:focus ~ .dot {
162 | background: var(--primary3);
163 | box-shadow:
164 | -0.2em -0.2em 0.4em var(--primary2) inset,
165 | 0 0.2em 0.4em var(--primary4) inset;
166 | }
167 | form input[type=radio]:checked ~ .dot {
168 | transform: translateZ(calc(var(--ballDiam) / -2)) rotateY(0) rotateX(0) scale(1);
169 | }
170 | input[type=checkbox]:checked ~ form input[type=radio] ~ .dot {
171 | transform: translateZ(var(--depth)) rotateY(calc(var(--yAngle) * -1)) rotateX(calc(var(--xAngle) * -1)) scale(0);
172 | }
173 | input[type=checkbox]:checked ~ form input[type=radio]:checked ~ .dot {
174 | transform: translateZ(calc(var(--ballDiam) / -2)) rotateY(calc(var(--yAngle) * -1)) rotateX(calc(var(--xAngle) * -1)) scale(1);
175 | }
176 | /* Dot shadows */
177 | .dot-shadow {
178 | background: radial-gradient(100% 100%,#000,#0000 50%);
179 | opacity: 0.9;
180 | transform: translateZ(var(--depth)) scale(0);
181 | }
182 | input[type=radio]:checked ~ .dot-shadow {
183 | opacity: 0.4;
184 | transform: translateZ(var(--depth)) scale(1);
185 | }
186 | /* Dark mode */
187 | @media (prefers-color-scheme: dark) {
188 | :root {
189 | --bg: #17181c;
190 | --fg: #e3e4e8;
191 | --formBg: #2e3138;
192 | --radioBg: #454954;
193 | --radioBgActive: #5c6270;
194 | --radioBorder: #454954;
195 | --radioBorderActive: #5c6270;
196 | --radioSide: #17181c;
197 | --primary1: #255ff4;
198 | --primary2: #5583f6;
199 | --primary3: #86a6f9;
200 | --primary4: #b6cafb;
201 | }
202 | }
--------------------------------------------------------------------------------
/Banner/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 自适应手机端焦点图Banner特效代码
7 |
8 |
9 |
10 |
11 |
12 |
13 |
188 | 响应式网站手机自适应 masonry瀑布流
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
20 |
76 |
77 |
139 |
140 |
141 |
--------------------------------------------------------------------------------
/Bootstrap stencil/assets/vendors/animsition.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * animsition v4.0.2
3 | * A simple and easy jQuery plugin for CSS animated page transitions.
4 | * http://blivesta.github.io/animsition
5 | * License : MIT
6 | * Author : blivesta (http://blivesta.com/)
7 | */
8 | !function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof exports?module.exports=t(require("jquery")):t(jQuery)}(function(t){"use strict";var n="animsition",i={init:function(a){a=t.extend({inClass:"fade-in",outClass:"fade-out",inDuration:1500,outDuration:800,linkElement:".animsition-link",loading:!0,loadingParentElement:"body",loadingClass:"animsition-loading",loadingInner:"",timeout:!1,timeoutCountdown:5e3,onLoadEvent:!0,browser:["animation-duration","-webkit-animation-duration"],overlay:!1,overlayClass:"animsition-overlay-slide",overlayParentElement:"body",transition:function(t){window.location.href=t}},a),i.settings={timer:!1,data:{inClass:"animsition-in-class",inDuration:"animsition-in-duration",outClass:"animsition-out-class",outDuration:"animsition-out-duration",overlay:"animsition-overlay"},events:{inStart:"animsition.inStart",inEnd:"animsition.inEnd",outStart:"animsition.outStart",outEnd:"animsition.outEnd"}};var o=i.supportCheck.call(this,a);if(!o&&a.browser.length>0&&(!o||!this.length))return"console"in window||(window.console={},window.console.log=function(t){return t}),this.length||console.log("Animsition: Element does not exist on page."),o||console.log("Animsition: Does not support this browser."),i.destroy.call(this);var e=i.optionCheck.call(this,a);return e&&t("."+a.overlayClass).length<=0&&i.addOverlay.call(this,a),a.loading&&t("."+a.loadingClass).length<=0&&i.addLoading.call(this,a),this.each(function(){var o=this,e=t(this),s=t(window),r=t(document),l=e.data(n);l||(a=t.extend({},a),e.data(n,{options:a}),a.timeout&&i.addTimer.call(o),a.onLoadEvent&&s.on("load."+n,function(){i.settings.timer&&clearTimeout(i.settings.timer),i["in"].call(o)}),s.on("pageshow."+n,function(t){t.originalEvent.persisted&&i["in"].call(o)}),s.on("unload."+n,function(){}),r.on("click."+n,a.linkElement,function(n){n.preventDefault();var a=t(this),e=a.attr("href");2===n.which||n.metaKey||n.shiftKey||-1!==navigator.platform.toUpperCase().indexOf("WIN")&&n.ctrlKey?window.open(e,"_blank"):i.out.call(o,a,e)}))})},addOverlay:function(n){t(n.overlayParentElement).prepend('')},addLoading:function(n){t(n.loadingParentElement).append('领号实时播报
21 | 22 |
23 |
74 |
75 | -
24 |
-
25 |
26 |
网游战江湖公测豪华礼包17:28:05
27 |
28 | -
29 |
30 |
网游战江湖公测豪华礼包17:28:05
31 |
32 | -
33 |
34 |
网游战江湖公测豪华礼包17:28:05
35 |
36 | -
37 |
38 |
网游战江湖公测豪华礼包17:28:05
39 |
40 | -
41 |
42 |
网游战江湖公测豪华礼包17:28:05
43 |
44 | -
45 |
46 |
网游战江湖公测豪华礼包17:28:05
47 |
48 | -
49 |
50 |
网游战江湖公测豪华礼包17:28:05
51 |
52 | -
53 |
54 |
网游战江湖公测豪华礼包17:28:05
55 |
56 | -
57 |
58 |
网游战江湖公测豪华礼包17:28:05
59 |
60 | -
61 |
62 |
网游战江湖公测豪华礼包17:28:05
63 |
64 | -
65 |
66 |
网游战江湖公测豪华礼包17:28:05
67 |
68 | -
69 |
70 |
网游战江湖公测豪华礼包17:28:05
71 |
72 |
'+n.loadingInner+"
")},removeLoading:function(){var i=t(this),a=i.data(n).options,o=t(a.loadingParentElement).children("."+a.loadingClass);o.fadeOut().remove()},addTimer:function(){var a=this,o=t(this),e=o.data(n).options;i.settings.timer=setTimeout(function(){i["in"].call(a),t(window).off("load."+n)},e.timeoutCountdown)},supportCheck:function(n){var i=t(this),a=n.browser,o=a.length,e=!1;0===o&&(e=!0);for(var s=0;o>s;s++)if("string"==typeof i.css(a[s])){e=!0;break}return e},optionCheck:function(n){var a,o=t(this);return a=n.overlay||o.data(i.settings.data.overlay)?!0:!1},animationCheck:function(i,a,o){var e=t(this),s=e.data(n).options,r=typeof i,l=!a&&"number"===r,d=a&&"string"===r&&i.length>0;return l||d?i=i:a&&o?i=s.inClass:!a&&o?i=s.inDuration:a&&!o?i=s.outClass:a||o||(i=s.outDuration),i},"in":function(){var a=this,o=t(this),e=o.data(n).options,s=o.data(i.settings.data.inDuration),r=o.data(i.settings.data.inClass),l=i.animationCheck.call(a,s,!1,!0),d=i.animationCheck.call(a,r,!0,!0),u=i.optionCheck.call(a,e),c=o.data(n).outClass;e.loading&&i.removeLoading.call(a),c&&o.removeClass(c),u?i.inOverlay.call(a,d,l):i.inDefault.call(a,d,l)},inDefault:function(n,a){var o=t(this);o.css({"animation-duration":a+"ms"}).addClass(n).trigger(i.settings.events.inStart).animateCallback(function(){o.removeClass(n).css({opacity:1}).trigger(i.settings.events.inEnd)})},inOverlay:function(a,o){var e=t(this),s=e.data(n).options;e.css({opacity:1}).trigger(i.settings.events.inStart),t(s.overlayParentElement).children("."+s.overlayClass).css({"animation-duration":o+"ms"}).addClass(a).animateCallback(function(){e.trigger(i.settings.events.inEnd)})},out:function(a,o){var e=this,s=t(this),r=s.data(n).options,l=a.data(i.settings.data.outClass),d=s.data(i.settings.data.outClass),u=a.data(i.settings.data.outDuration),c=s.data(i.settings.data.outDuration),m=l?l:d,g=u?u:c,f=i.animationCheck.call(e,m,!0,!1),v=i.animationCheck.call(e,g,!1,!1),h=i.optionCheck.call(e,r);s.data(n).outClass=f,h?i.outOverlay.call(e,f,v,o):i.outDefault.call(e,f,v,o)},outDefault:function(a,o,e){var s=t(this),r=s.data(n).options;s.css({"animation-duration":o+1+"ms"}).addClass(a).trigger(i.settings.events.outStart).animateCallback(function(){s.trigger(i.settings.events.outEnd),r.transition(e)})},outOverlay:function(a,o,e){var s=this,r=t(this),l=r.data(n).options,d=r.data(i.settings.data.inClass),u=i.animationCheck.call(s,d,!0,!0);t(l.overlayParentElement).children("."+l.overlayClass).css({"animation-duration":o+1+"ms"}).removeClass(u).addClass(a).trigger(i.settings.events.outStart).animateCallback(function(){r.trigger(i.settings.events.outEnd),l.transition(e)})},destroy:function(){return this.each(function(){var i=t(this);t(window).off("."+n),i.css({opacity:1}).removeData(n)})}};t.fn.animateCallback=function(n){var i="animationend webkitAnimationEnd";return this.each(function(){var a=t(this);a.on(i,function(){return a.off(i),n.call(this)})})},t.fn.animsition=function(a){return i[a]?i[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof a&&a?void t.error("Method "+a+" does not exist on jQuery."+n):i.init.apply(this,arguments)}});
--------------------------------------------------------------------------------
/Liquid UI elements/js/Liquid.js:
--------------------------------------------------------------------------------
1 | const { to, set, from, fromTo } = gsap
2 |
3 | const getVar = (key, elem = document.documentElement) => getComputedStyle(elem).getPropertyValue(key)
4 |
5 | document.querySelectorAll('.radio').forEach(elem => {
6 | let svg = elem.querySelector('svg'),
7 | input = elem.querySelector('input')
8 | input.addEventListener('change', e => {
9 | fromTo(input, {
10 | '--border-width': '3px'
11 | }, {
12 | '--border-color': getVar('--c-active'),
13 | '--border-width': '12px',
14 | duration: .2
15 | })
16 | to(svg, {
17 | keyframes: [{
18 | '--top-y': '6px',
19 | '--top-s-x': 1,
20 | '--top-s-y': 1.25,
21 | duration: .2,
22 | delay: .2
23 | }, {
24 | '--top-y': '0px',
25 | '--top-s-x': 1.75,
26 | '--top-s-y': 1,
27 | duration: .6
28 | }]
29 | })
30 | to(svg, {
31 | keyframes: [{
32 | '--dot-y': '2px',
33 | duration: .3,
34 | delay: .2
35 | }, {
36 | '--dot-y': '0px',
37 | duration: .3
38 | }]
39 | })
40 | to(svg, {
41 | '--drop-y': '0px',
42 | duration: .6,
43 | delay: .4,
44 | clearProps: true,
45 | onComplete() {
46 | input.removeAttribute('style')
47 | }
48 | })
49 | })
50 | })
51 |
52 | document.querySelectorAll('.checkbox').forEach(elem => {
53 | let svg = elem.querySelector('svg'),
54 | input = elem.querySelector('input')
55 | input.addEventListener('change', e => {
56 | let checked = input.checked
57 | if(!checked) {
58 | return
59 | }
60 | fromTo(input, {
61 | '--border-width': '3px'
62 | }, {
63 | '--border-color': getVar('--c-active'),
64 | '--border-width': '12px',
65 | duration: .2,
66 | clearProps: true
67 | })
68 | set(svg, {
69 | '--dot-x': '14px',
70 | '--dot-y': '-14px',
71 | '--tick-offset': '20.5px',
72 | '--tick-array': '16.5px',
73 | '--drop-s': 1
74 | })
75 | to(elem, {
76 | keyframes: [{
77 | '--border-radius-corner': '14px',
78 | duration: .2,
79 | delay: .2
80 | }, {
81 | '--border-radius-corner': '5px',
82 | duration: .3,
83 | clearProps: true
84 | }]
85 | })
86 | to(svg, {
87 | '--dot-x': '0px',
88 | '--dot-y': '0px',
89 | '--dot-s': 1,
90 | duration: .4,
91 | delay: .4
92 | })
93 | to(svg, {
94 | keyframes: [{
95 | '--tick-offset': '48px',
96 | '--tick-array': '14px',
97 | duration: .3,
98 | delay: .2
99 | }, {
100 | '--tick-offset': '46.5px',
101 | '--tick-array': '16.5px',
102 | duration: .35,
103 | clearProps: true
104 | }]
105 | })
106 | })
107 | })
108 |
109 | document.querySelectorAll('.switch').forEach(elem => {
110 | let svg = elem.querySelector('svg'),
111 | input = elem.querySelector('input')
112 | input.addEventListener('pointerenter', e => {
113 | if(elem.animated || input.checked) {
114 | return
115 | }
116 | to(input, {
117 | '--input-background': getVar('--c-default-dark'),
118 | duration: .2
119 | })
120 | })
121 | input.addEventListener('pointerleave', e => {
122 | if(elem.animated || input.checked) {
123 | return
124 | }
125 | to(input, {
126 | '--input-background': getVar('--c-default'),
127 | duration: .2
128 | })
129 | })
130 | input.addEventListener('change', e => {
131 | let checked = input.checked
132 | let hide = checked ? 'default' : 'dot',
133 | show = checked ? 'dot' : 'default'
134 | fromTo(svg, {
135 | '--default-s': checked ? 1 : 0,
136 | '--default-x': checked ? '0px' : '8px',
137 | '--dot-s': checked ? 0 : 1,
138 | '--dot-x': checked ? '-8px' : '0px'
139 | }, {
140 | ['--' + hide + '-s']: 0,
141 | ['--' + hide + '-x']: checked ? '8px' : '-8px',
142 | duration: .25,
143 | delay: .15
144 | })
145 | fromTo(input, {
146 | '--input-background': getVar(checked ? '--c-default' : '--c-active'),
147 | }, {
148 | '--input-background': getVar(checked ? '--c-active' : '--c-default'),
149 | duration: .35,
150 | clearProps: true
151 | })
152 | to(svg, {
153 | keyframes: [{
154 | ['--' + show + '-x']: checked ? '2px' : '-2px',
155 | ['--' + show + '-s']: 1,
156 | duration: .25
157 | }, {
158 | ['--' + show + '-x']: '0px',
159 | duration: .2,
160 | clearProps: true
161 | }]
162 | })
163 | })
164 | })
--------------------------------------------------------------------------------
/Timeline/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 响应式垂直时间表
16 |
20 |
31 |
32 |
21 | 
22 |
23 |
24 |
22 |
25 |
30 | html5时间表 1
26 |jQuery 团队在官博中再次提醒用户，jQuery 2.0 不再支持IE 6/7/8 了，但是 jQuery 1.9 会继续支持。因为旧版 IE 浏览器在整个互联网中还有很大部分市场，所以他们非常期望大部分网站能继续使用 jQuery 1.x 一段时间。jQuery 团队也将同时支持 jQuery 1.x 和 2.x 。1.9 和 2.0 版的 API 是相同的，所以不必因为你们网站还在用 jQuery 1.9，就感觉好像错过了什么，或者是落后了。
27 | 阅读更多 28 | Jan 14 29 |
33 |
44 |
45 |
34 | 
35 |
36 |
37 |
35 |
38 |
43 | html5时间表 2
39 |jQuery 团队在官博中再次提醒用户，jQuery 2.0 不再支持IE 6/7/8 了，但是 jQuery 1.9 会继续支持。因为旧版 IE 浏览器在整个互联网中还有很大部分市场，所以他们非常期望大部分网站能继续使用 jQuery 1.x 一段时间。jQuery 团队也将同时支持 jQuery 1.x 和 2.x 。1.9 和 2.0 版的 API 是相同的，所以不必因为你们网站还在用 jQuery 1.9，就感觉好像错过了什么，或者是落后了。
40 | 阅读更多 41 | Jan 18 42 |
46 |
57 |
58 |
47 |
48 |
49 |
50 |
48 |
51 |
56 | html5时间表 3
52 |jQuery 团队在官博中再次提醒用户，jQuery 2.0 不再支持IE 6/7/8 了，但是 jQuery 1.9 会继续支持。因为旧版 IE 浏览器在整个互联网中还有很大部分市场，所以他们非常期望大部分网站能继续使用 jQuery 1.x 一段时间。jQuery 团队也将同时支持 jQuery 1.x 和 2.x 。1.9 和 2.0 版的 API 是相同的，所以不必因为你们网站还在用 jQuery 1.9，就感觉好像错过了什么，或者是落后了。
53 | 阅读更多 54 | Jan 24 55 |
59 |
70 |
71 |
60 | 
61 |
62 |
63 |
61 |
64 |
69 | html5时间表 4
65 |jQuery 团队在官博中再次提醒用户，jQuery 2.0 不再支持IE 6/7/8 了，但是 jQuery 1.9 会继续支持。因为旧版 IE 浏览器在整个互联网中还有很大部分市场，所以他们非常期望大部分网站能继续使用 jQuery 1.x 一段时间。jQuery 团队也将同时支持 jQuery 1.x 和 2.x 。1.9 和 2.0 版的 API 是相同的，所以不必因为你们网站还在用 jQuery 1.9，就感觉好像错过了什么，或者是落后了。
66 | 阅读更多 67 | Feb 14 68 |
72 |
83 |
84 |
73 |
74 |
75 |
76 |
74 |
77 |
82 | html5时间表 5
78 |jQuery 团队在官博中再次提醒用户，jQuery 2.0 不再支持IE 6/7/8 了，但是 jQuery 1.9 会继续支持。因为旧版 IE 浏览器在整个互联网中还有很大部分市场，所以他们非常期望大部分网站能继续使用 jQuery 1.x 一段时间。jQuery 团队也将同时支持 jQuery 1.x 和 2.x 。1.9 和 2.0 版的 API 是相同的，所以不必因为你们网站还在用 jQuery 1.9，就感觉好像错过了什么，或者是落后了。
79 | 阅读更多 80 | Feb 18 81 |
85 |
96 |
86 |
87 |
88 |
89 |
87 |
90 |
95 | html5时间表 6
91 |jQuery 团队在官博中再次提醒用户，jQuery 2.0 不再支持IE 6/7/8 了，但是 jQuery 1.9 会继续支持。因为旧版 IE 浏览器在整个互联网中还有很大部分市场，所以他们非常期望大部分网站能继续使用 jQuery 1.x 一段时间。jQuery 团队也将同时支持 jQuery 1.x 和 2.x 。1.9 和 2.0 版的 API 是相同的，所以不必因为你们网站还在用 jQuery 1.9，就感觉好像错过了什么，或者是落后了。
92 | 阅读更多 93 | Feb 26 94 |
189 |
198 |
199 |
200 |
201 |
213 |
214 |
227 |
235 |
236 |
237 |
--------------------------------------------------------------------------------
/Bootstrap stencil/assets/vendors/superclick.min.js:
--------------------------------------------------------------------------------
1 |
2 | ;(function ($) {
3 | "use strict";
4 |
5 | var methods = (function () {
6 | // private properties and methods go here
7 | var c = {
8 | bcClass: 'sf-breadcrumb',
9 | menuClass: 'sf-js-enabled',
10 | anchorClass: 'sf-with-ul',
11 | menuArrowClass: 'sf-arrows'
12 | },
13 | outerClick = (function () {
14 | $(window).on('load', function () {
15 | $('body').children().on('click.superclick', function () {
16 | var $allMenus = $('.sf-js-enabled');
17 | $allMenus.superclick('reset');
18 | });
19 | });
20 | })(),
21 | toggleMenuClasses = function ($menu, o) {
22 | var classes = c.menuClass;
23 | if (o.cssArrows) {
24 | classes += ' ' + c.menuArrowClass;
25 | }
26 | $menu.toggleClass(classes);
27 | },
28 | setPathToCurrent = function ($menu, o) {
29 | return $menu.find('li.' + o.pathClass).slice(0, o.pathLevels)
30 | .addClass(o.activeClass + ' ' + c.bcClass)
31 | .filter(function () {
32 | return ($(this).children(o.popUpSelector).hide().show().length);
33 | }).removeClass(o.pathClass);
34 | },
35 | toggleAnchorClass = function ($li, o) {
36 | $li.children(o.actionElement).toggleClass(c.anchorClass);
37 | },
38 | toggleTouchAction = function ($menu) {
39 | var touchAction = $menu.css('ms-touch-action');
40 | touchAction = (touchAction === 'pan-y') ? 'auto' : 'pan-y';
41 | $menu.css('ms-touch-action', touchAction);
42 | },
43 | clickHandler = function (e) {
44 | var $this = $(this),
45 | $popUp = $this.siblings(e.data.popUpSelector),
46 | func;
47 |
48 | if ($popUp.length) {
49 | func = ($popUp.is(':hidden')) ? over : out;
50 | $.proxy(func, $this.parent('li'))();
51 | if (func == over) {
52 | return false;
53 | } else {
54 | return true;
55 | }
56 | }
57 | },
58 | over = function () {
59 | var $this = $(this),
60 | o = getOptions($this);
61 | $this.siblings().superclick('hide').end().superclick('show');
62 | },
63 | out = function () {
64 | var $this = $(this),
65 | o = getOptions($this);
66 | $.proxy(close, $this, o)();
67 | },
68 | close = function (o) {
69 | o.retainPath = ($.inArray(this[0], o.$path) > -1);
70 | this.superclick('hide');
71 |
72 | if (!this.parents('.' + o.activeClass).length) {
73 | o.onIdle.call(getMenu(this));
74 | if (o.$path.length) {
75 | $.proxy(over, o.$path)();
76 | }
77 | }
78 | },
79 | getMenu = function ($el) {
80 | return $el.closest('.' + c.menuClass);
81 | },
82 | getOptions = function ($el) {
83 | return getMenu($el).data('sf-options');
84 | };
85 |
86 | return {
87 | // public methods
88 | hide: function (instant) {
89 | if (this.length) {
90 | var $this = this,
91 | o = getOptions($this);
92 | if (!o) {
93 | return this;
94 | }
95 | var not = (o.retainPath === true) ? o.$path : '',
96 | $popUp = $this.find('li.' + o.activeClass).add(this).not(not).removeClass(o.activeClass).children(o.popUpSelector),
97 | speed = o.speedOut;
98 |
99 | if (instant) {
100 | $popUp.show();
101 | speed = 0;
102 | }
103 | o.retainPath = false;
104 | o.onBeforeHide.call($popUp);
105 | $popUp.stop(true, true).animate(o.animationOut, speed, function () {
106 | var $this = $(this);
107 | o.onHide.call($this);
108 | });
109 | }
110 | return this;
111 | },
112 | show: function () {
113 | var o = getOptions(this);
114 | if (!o) {
115 | return this;
116 | }
117 | var $this = this.addClass(o.activeClass),
118 | $popUp = $this.children(o.popUpSelector);
119 |
120 | o.onBeforeShow.call($popUp);
121 | $popUp.stop(true, true).animate(o.animation, o.speed, function () {
122 | o.onShow.call($popUp);
123 | });
124 | return this;
125 | },
126 | destroy: function () {
127 | return this.each(function () {
128 | var $this = $(this),
129 | o = $this.data('sf-options'),
130 | $hasPopUp;
131 | if (!o) {
132 | return false;
133 | }
134 | $hasPopUp = $this.find(o.popUpSelector).parent('li');
135 | toggleMenuClasses($this, o);
136 | toggleAnchorClass($hasPopUp, o);
137 | toggleTouchAction($this);
138 | // remove event handlers
139 | $this.off('.superclick');
140 | // clear animation's inline display style
141 | $hasPopUp.children(o.popUpSelector).attr('style', function (i, style) {
142 | return style.replace(/display[^;]+;?/g, '');
143 | });
144 | // reset 'current' path classes
145 | o.$path.removeClass(o.activeClass + ' ' + c.bcClass).addClass(o.pathClass);
146 | $this.find('.' + o.activeClass).removeClass(o.activeClass);
147 | o.onDestroy.call($this);
148 | $this.removeData('sf-options');
149 | });
150 | },
151 | reset: function () {
152 | return this.each(function () {
153 | var $menu = $(this),
154 | o = getOptions($menu),
155 | $openLis = $($menu.find('.' + o.activeClass).toArray().reverse());
156 | $openLis.children(o.actionElement).trigger('click');
157 | });
158 | },
159 | init: function (op) {
160 | return this.each(function () {
161 | var $this = $(this);
162 | if ($this.data('sf-options')) {
163 | return false;
164 | }
165 | var o = $.extend({}, $.fn.superclick.defaults, op),
166 | $hasPopUp = $this.find(o.popUpSelector).parent('li');
167 | o.$path = setPathToCurrent($this, o);
168 |
169 | $this.data('sf-options', o);
170 |
171 | toggleMenuClasses($this, o);
172 | toggleAnchorClass($hasPopUp, o);
173 | toggleTouchAction($this);
174 | $this.on('click.superclick', o.actionElement, o, clickHandler);
175 |
176 | $hasPopUp.not('.' + c.bcClass).superclick('hide', true);
177 |
178 | o.onInit.call(this);
179 | });
180 | }
181 | };
182 | })();
183 |
184 | $.fn.superclick = function (method, args) {
185 | if (methods[method]) {
186 | return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
187 | }
188 | else if (typeof method === 'object' || ! method) {
189 | return methods.init.apply(this, arguments);
190 | }
191 | else {
192 | return $.error('Method ' + method + ' does not exist on jQuery.fn.superclick');
193 | }
194 | };
195 |
196 | $.fn.superclick.defaults = {
197 | popUpSelector: 'ul,.sf-mega', // within menu context
198 | activeClass: 'sfHover', // keep 'hover' in classname for compatibility reasons
199 | pathClass: 'overrideThisToUse',
200 | pathLevels: 1,
201 | actionElement: 'a',
202 | animation: {opacity: 'show'},
203 | animationOut: {opacity: 'hide'},
204 | speed: 'normal',
205 | speedOut: 'fast',
206 | cssArrows: true,
207 | onInit: $.noop,
208 | onBeforeShow: $.noop,
209 | onShow: $.noop,
210 | onBeforeHide: $.noop,
211 | onHide: $.noop,
212 | onIdle: $.noop,
213 | onDestroy: $.noop
214 | };
215 |
216 | })(jQuery);
--------------------------------------------------------------------------------
/Message/css/message.css:
--------------------------------------------------------------------------------
1 | /*浅色主题 */
2 | @media (prefers-color-scheme: light) {
3 | :root {
4 | --Default-background-color: #F2F2F2;
5 | --Highlight-background-color: #FFFFFF;
6 | --text-color: #24292E;
7 | --text-active-color: #C9D1D9;
8 | --border-color: #E1E4E8;
9 | }
10 | }
11 |
12 | /* 深色主题 */
13 | @media (prefers-color-scheme: dark) {
14 | :root {
15 | --Default-background-color: #0D1117;
16 | --Highlight-background-color: #161B22;
17 | --text-color: #8B949E;
18 | --text-active-color: #C9D1D9;
19 | --border-color: #30363D;
20 | }
21 | }
22 |
23 | body {
24 | color: var(--text-color);
25 | background-color: var(--Default-background-color);
26 | min-height: 100vh;
27 | display: flex;
28 | flex-direction: column;
29 | align-items: center;
30 | justify-content: center;
31 | font-size: calc(10px + 2vmin);
32 | transition: background-color 0.3s;
33 | }
34 |
35 | .box {
36 | position: absolute;
37 | left: 50%;
38 | top: 50%;
39 | transform: translate(-50%, -50%);
40 | text-align: center;
41 | }
42 | button{
43 | padding: 10px 15px;
44 | color: var(--text-color);
45 | border: 1px solid var(--border-color);
46 | background-color: var(--Highlight-background-color);
47 | border-radius: 5px;
48 | }
49 |
50 | .qmsg.qmsg-wrapper {
51 | box-sizing: border-box;
52 | margin: 0;
53 | padding: 0;
54 | color: rgba(0, 0, 0, .55);
55 | font-size: 13px;
56 | font-variant: tabular-nums;
57 | line-height: 1;
58 | list-style: none;
59 | font-feature-settings: "tnum";
60 | position: fixed;
61 | top: 16px;
62 | left: 0;
63 | z-index: 1010;
64 | width: 100%;
65 | pointer-events: none;
66 | }
67 |
68 | .qmsg .qmsg-item {
69 | padding: 8px;
70 | text-align: center;
71 | -webkit-animation-duration: .3s;
72 | animation-duration: .3s;
73 | position: relative;
74 | }
75 |
76 | .qmsg .qmsg-item .qmsg-count {
77 | text-align: center;
78 | position: absolute;
79 | left: -4px;
80 | top: -4px;
81 | background-color: red;
82 | color: #fff;
83 | font-size: 12px;
84 | line-height: 16px;
85 | border-radius: 2px;
86 | display: inline-block;
87 | min-width: 16px;
88 | height: 16px;
89 | -webkit-animation-duration: .3s;
90 | animation-duration: .3s;
91 | }
92 |
93 | .qmsg .qmsg-item:first-child {
94 | margin-top: -8px;
95 | }
96 |
97 | .qmsg .qmsg-content {
98 | text-align: left;
99 | position: relative;
100 | display: inline-block;
101 | padding: 10px 16px;
102 | background: #fff;
103 | border-radius: 4px;
104 | box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
105 | pointer-events: all;
106 | /* min-width: 175px; */
107 | max-width: 80%;
108 | min-width: 80px;
109 | }
110 |
111 | .qmsg .qmsg-content [class^="qmsg-content-"] {
112 | white-space: nowrap;
113 | overflow: hidden;
114 | text-overflow: ellipsis;
115 | }
116 |
117 | .qmsg .qmsg-content .qmsg-content-with-close {
118 | padding-right: 20px;
119 | }
120 |
121 | .qmsg .qmsg-icon {
122 | display: inline-block;
123 | color: inherit;
124 | font-style: normal;
125 | line-height: 0;
126 | text-align: center;
127 | text-transform: none;
128 | vertical-align: -.125em;
129 | text-rendering: optimizeLegibility;
130 | -webkit-font-smoothing: antialiased;
131 | -moz-osx-font-smoothing: grayscale;
132 | position: relative;
133 | top: 1px;
134 | margin-right: 8px;
135 | font-size: 16px;
136 | }
137 |
138 | .qmsg .qmsg-icon svg {
139 | display: inline-block;
140 | }
141 |
142 | .qmsg .qmsg-content-info .qmsg-icon {
143 | color: #1890ff;
144 | user-select: none;
145 | }
146 |
147 | .qmsg .qmsg-icon-close {
148 | position: absolute;
149 | top: 11px;
150 | right: 5px;
151 | padding: 0;
152 | overflow: hidden;
153 | font-size: 12px;
154 | line-height: 22px;
155 | background-color: transparent;
156 | border: none;
157 | outline: none;
158 | cursor: pointer;
159 | color: rgba(0, 0, 0, .45);
160 | transition: color .3s
161 | }
162 |
163 | .qmsg .qmsg-icon-close:hover>svg path {
164 | stroke: #555;
165 | }
166 |
167 | .qmsg .animate-turn {
168 | animation: MessageTurn 1s linear infinite;
169 | -webkit-animation: MessageTurn 1s linear infinite;
170 | }
171 |
172 | @keyframes MessageTurn {
173 | 0% {
174 | -webkit-transform: rotate(0deg);
175 | }
176 |
177 | 25% {
178 | -webkit-transform: rotate(90deg);
179 | }
180 |
181 | 50% {
182 | -webkit-transform: rotate(180deg);
183 | }
184 |
185 | 75% {
186 | -webkit-transform: rotate(270deg);
187 | }
188 |
189 | 100% {
190 | -webkit-transform: rotate(360deg);
191 | }
192 | }
193 |
194 | @-webkit-keyframes MessageTurn {
195 | 0% {
196 | -webkit-transform: rotate(0deg);
197 | }
198 |
199 | 25% {
200 | -webkit-transform: rotate(90deg);
201 | }
202 |
203 | 50% {
204 | -webkit-transform: rotate(180deg);
205 | }
206 |
207 | 75% {
208 | -webkit-transform: rotate(270deg);
209 | }
210 |
211 | 100% {
212 | -webkit-transform: rotate(360deg);
213 | }
214 | }
215 |
216 | @-webkit-keyframes MessageMoveOut {
217 | 0% {
218 | max-height: 150px;
219 | padding: 8px;
220 | opacity: 1
221 | }
222 |
223 | to {
224 | max-height: 0;
225 | padding: 0;
226 | opacity: 0
227 | }
228 | }
229 |
230 | @keyframes MessageMoveOut {
231 | 0% {
232 | max-height: 150px;
233 | padding: 8px;
234 | opacity: 1
235 | }
236 |
237 | to {
238 | max-height: 0;
239 | padding: 0;
240 | opacity: 0
241 | }
242 | }
243 |
244 |
245 | @-webkit-keyframes MessageMoveIn {
246 |
247 | 0% {
248 | transform: translateY(-100%);
249 | transform-origin: 0 0;
250 | opacity: 0
251 | }
252 |
253 | to {
254 | transform: translateY(0);
255 | transform-origin: 0 0;
256 | opacity: 1
257 | }
258 | }
259 |
260 | @keyframes MessageMoveIn {
261 | 0% {
262 | transform: translateY(-100%);
263 | transform-origin: 0 0;
264 | opacity: 0
265 | }
266 |
267 | to {
268 | transform: translateY(0);
269 | transform-origin: 0 0;
270 | opacity: 1
271 | }
272 | }
273 |
274 | @-webkit-keyframes MessageShake {
275 |
276 | 0%,
277 | 100% {
278 | transform: translateX(0px);
279 | opacity: 1;
280 | }
281 |
282 | 25%,
283 | 75% {
284 | transform: translateX(-4px);
285 | opacity: 0.75;
286 | }
287 |
288 | 50% {
289 | transform: translateX(4px);
290 | opacity: 0.25;
291 | }
292 | }
293 |
294 | @keyframes MessageShake {
295 |
296 | 0%,
297 | 100% {
298 | transform: translateX(0px);
299 | opacity: 1;
300 | }
301 |
302 | 25%,
303 | 75% {
304 | transform: translateX(-4px);
305 | opacity: 0.75;
306 | }
307 |
308 | 50% {
309 | transform: translateX(4px);
310 | opacity: 0.25;
311 | }
312 | }
--------------------------------------------------------------------------------
/Waterfalls Flow/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
215 |
226 |
216 | 
217 | 
218 | 
219 |
220 |
221 |
222 |
223 |
224 |
225 |
26 |
117 |
118 |
121 |
122 |
123 |
124 |
--------------------------------------------------------------------------------
/Basictable/css/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Basic Table Demo CSS.
3 | */
4 |
5 | /*@import url(http://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:400,700);*/
6 |
7 | * {
8 | margin: 0;
9 | padding: 0;
10 | }
11 |
12 | body {
13 | background: #e4ebeb;
14 | color: #636363;
15 | /*font-family: 'Lato', sans-serif;*/
16 | line-height: 1.5;
17 | }
18 |
19 | #page {
20 | padding: 50px 100px;
21 | }
22 |
23 | @media only screen and (max-width: 568px) {
24 | #page {
25 | padding: 50px 30px;
26 | }
27 | }
28 |
29 | h1,
30 | h2,
31 | h3,
32 | h4,
33 | h5 {
34 | line-height: 1.2;
35 | /*font-family: 'Montserrat', sans-serif;*/
36 | font-weight: normal;
37 | }
38 |
39 | h1 {
40 | color: #5b8e8d;
41 | font-size: 3rem;
42 | font-weight: 700;
43 | letter-spacing: -0.01em;
44 | margin-bottom: 0.75em;
45 | text-transform: uppercase;
46 | }
47 |
48 | @media only screen and (max-width: 568px) {
49 | h1 {
50 | font-size: 2.25rem;
51 | }
52 | }
53 |
54 | h2 {
55 | color: #82bcba;
56 | font-size: 1.75rem;
57 | margin-bottom: 0.75em;
58 | margin-top: 2em;
59 | }
60 |
61 | h3 {
62 | color: #82bcba;
63 | font-size: 1.25rem;
64 | margin-bottom: 0.75em;
65 | margin-top: 2em;
66 | }
67 |
68 | a,
69 | a:visited,
70 | a:active {
71 | color: #5b8e8d;
72 | text-decoration: none;
73 | }
74 |
75 | a:hover {
76 | color: #53bcba;
77 | }
78 |
79 | p {
80 | font-size: 1.125rem;
81 | word-break: break-word;
82 | }
83 |
84 | p.credits {
85 | font-size: .8125rem;
86 | margin-top: 6em;
87 | }
88 |
89 | @media only screen and (max-width: 568px) {
90 | .phone-block {
91 | display: block;
92 | }
93 |
94 | .phone-hide {
95 | display: none;
96 | }
97 | }
98 |
99 | code {
100 | background: #c6d8d8;
101 | border-radius: 5px;
102 | color: #3d6969;
103 | display: block;
104 | margin: 2em 0;
105 | padding: 15px;
106 | position: relative;
107 | }
108 |
109 | code:after {
110 | bottom: 5px;
111 | color: #e4ebeb;
112 | /*font-family: 'Lato', sans-serif;*/
113 | font-size: 1rem;
114 | position: absolute;
115 | right: 10px;
116 | text-transform: uppercase;
117 | }
118 |
119 | code.css:after {
120 | content: 'css';
121 | }
122 |
123 | code.js:after {
124 | content: 'js';
125 | }
126 |
127 | table {
128 | background: white;
129 | border-collapse: collapse;
130 | margin: 1.25em 0 0;
131 | width: 100%;
132 | }
133 |
134 | table tr,
135 | table th,
136 | table td {
137 | border: none;
138 | border-bottom: 1px solid #e4ebeb;
139 | /*font-family: 'Lato', sans-serif;*/
140 | font-size: .875rem;
141 | }
142 |
143 | table th,
144 | table td {
145 | padding: 10px 12px;
146 | text-align: left;
147 | }
148 |
149 | table th {
150 | background: #56a2cf;
151 | color: #ffffff;
152 | text-transform: uppercase;
153 | }
154 |
155 | table tr td {
156 | background: #eaf3f5;
157 | color: #999999;
158 | }
159 |
160 | table tr:nth-of-type(2n+2) td {
161 | background: #ffffff;
162 | }
163 |
164 | table.bt tfoot th,
165 | table.bt tfoot td,
166 | table.bt tbody td {
167 | font-size: .8125rem;
168 | padding: 0;
169 | }
170 |
171 | table.bt tfoot th:before,
172 | table.bt tfoot td:before,
173 | table.bt tbody td:before {
174 | background: #56a2cf;
175 | color: white;
176 | margin-right: 10px;
177 | padding: 2px 10px;
178 | }
179 |
180 | table.bt tfoot th .bt-content,
181 | table.bt tfoot td .bt-content,
182 | table.bt tbody td .bt-content {
183 | display: inline-block;
184 | padding: 2px 5px;
185 | }
186 |
187 | table.bt tfoot th:first-of-type:before,
188 | table.bt tfoot th:first-of-type .bt-content,
189 | table.bt tfoot td:first-of-type:before,
190 | table.bt tfoot td:first-of-type .bt-content,
191 | table.bt tbody td:first-of-type:before,
192 | table.bt tbody td:first-of-type .bt-content {
193 | padding-top: 10px;
194 | }
195 |
196 | table.bt tfoot th:last-of-type:before,
197 | table.bt tfoot th:last-of-type .bt-content,
198 | table.bt tfoot td:last-of-type:before,
199 | table.bt tfoot td:last-of-type .bt-content,
200 | table.bt tbody td:last-of-type:before,
201 | table.bt tbody td:last-of-type .bt-content {
202 | padding-bottom: 10px;
203 | }
204 |
205 | /*
206 | * Example 4:
207 | * Media query over js resize
208 | */
209 | @media only screen and (max-width: 568px) {
210 | #table-no-resize thead {
211 | display: none;
212 | }
213 |
214 | #table-no-resize tbody td {
215 | border: none !important;
216 | display: block;
217 | font-size: .8125rem;
218 | padding: 0;
219 | vertical-align: top;
220 | }
221 |
222 | #table-no-resize tbody td:before {
223 | background: #56a2cf;
224 | content: attr(data-th) ": ";
225 | color: white;
226 | display: inline-block;
227 | font-weight: bold;
228 | margin-right: 10px;
229 | padding: 2px 10px;
230 | width: 6.5em;
231 | }
232 |
233 | #table-no-resize tbody td .bt-content {
234 | display: inline-block;
235 | padding: 2px 5px;
236 | }
237 |
238 | #table-no-resize tbody td:first-of-type:before,
239 | #table-no-resize tbody td:first-of-type .bt-content {
240 | padding-top: 10px;
241 | }
242 |
243 | #table-no-resize tbody td:last-of-type:before,
244 | #table-no-resize tbody td:last-of-type .bt-content {
245 | padding-bottom: 10px;
246 | }
247 | }
248 |
249 | /*
250 | * Example 5:
251 | * Two axis styling
252 | */
253 | table.two-axis tr td:first-of-type {
254 | background: #cadde1;
255 | }
256 |
257 | @media only screen and (max-width: 568px) {
258 | table.two-axis tr td:first-of-type,
259 | table.two-axis tr:nth-of-type(2n+2) td:first-of-type,
260 | table.two-axis tr td:first-of-type:before {
261 | background: #3584b3;
262 | color: #ffffff;
263 | }
264 |
265 | table.two-axis tr td:first-of-type {
266 | border-bottom: 1px solid #e4ebeb;
267 | }
268 |
269 | table.two-axis tr td:first-of-type:before {
270 | padding-bottom: 10px;
271 | }
272 | }
273 |
274 | /*
275 | * Example 6:
276 | * Max height
277 | */
278 | .bt-wrapper.active {
279 | margin-top: 1.5em;
280 | }
281 | .bt-wrapper.active table {
282 | margin: 0;
283 | }
284 |
285 |
286 | table {
287 | width: 100%;
288 | }
289 | .table {
290 | margin: 30px 0;
291 | border-collapse: collapse;
292 | border-spacing: 0;
293 | empty-cells: show;
294 | border: 1px solid #e0e0e0;
295 | }
296 | .table caption {
297 | color: #333;
298 | font-style: italic;
299 | font-size: 85%;
300 | line-height: 1;
301 | padding: 1em 0;
302 | text-align: center;
303 | }
304 | .table td,
305 | .table th {
306 | border-left: 1px solid #e0e0e0;
307 | border-width: 0 0 0 1px;
308 | font-size: inherit;
309 | margin: 0;
310 | overflow: visible;
311 | padding: 0.5em 1em;
312 | font-weight: normal;
313 | }
314 | .table td:first-child,
315 | .table th:first-child {
316 | border-left-width: 0;
317 | }
318 | .table thead,
319 | .table tfoot {
320 | background-color: #f05050;
321 | color: #fff;
322 | text-align: left;
323 | vertical-align: bottom;
324 | }
325 | .table thead td,
326 | .table tfoot td,
327 | .table thead th,
328 | .table tfoot th {
329 | border-color: #fff;
330 | }
331 | .table td {
332 | background-color: transparent;
333 | }
334 | .table_striped tr:nth-child(2n-1) td {
335 | background-color: #ececec;
336 | }
337 | .table_bordered td {
338 | border-bottom: 1px solid #e0e0e0;
339 | }
340 | .table_bordered tbody > tr:last-child > td,
341 | .table_bordered thead > tr:last-child > td {
342 | border-bottom-width: 0;
343 | }
344 | .table_horizontal td,
345 | .table_horizontal th {
346 | border-width: 0 0 1px 0;
347 | border-bottom: 1px solid #e0e0e0;
348 | }
349 | .table_horizontal tbody > tr:last-child > td,
350 | .table_horizontal thead > tr:last-child > td {
351 | border-bottom-width: 0;
352 | }
353 |
354 |
--------------------------------------------------------------------------------
/Animated Weather Icons/css/style.css:
--------------------------------------------------------------------------------
1 | html { box-sizing: border-box; }
2 | html *,
3 | html *:before,
4 | html *:after { box-sizing: inherit; }
5 |
6 | body {
7 | max-width: 42em;
8 | padding: 2em;
9 | margin: 0 auto;
10 | color: #161616;
11 | font-family: 'Roboto', sans-serif;
12 | text-align: center;
13 | background-color: currentColor;
14 | }
15 |
16 | h1 {
17 | margin-bottom: 1.375em;
18 | color: #fff;
19 | font-weight: 100;
20 | font-size: 2em;
21 | text-transform: uppercase;
22 | }
23 | p,
24 | a {
25 | color: rgba(255,255,255,0.3);
26 | font-size: small;
27 | }
28 | p { margin: 1.375rem 0; }
29 |
30 | .icon {
31 | position: relative;
32 | display: inline-block;
33 | width: 12em;
34 | height: 10em;
35 | font-size: 1em; /* control icon size here */
36 | }
37 |
38 | .cloud {
39 | position: absolute;
40 | z-index: 1;
41 | top: 50%;
42 | left: 50%;
43 | width: 3.6875em;
44 | height: 3.6875em;
45 | margin: -1.84375em;
46 | background: currentColor;
47 | border-radius: 50%;
48 | box-shadow:
49 | -2.1875em 0.6875em 0 -0.6875em,
50 | 2.0625em 0.9375em 0 -0.9375em,
51 | 0 0 0 0.375em #fff,
52 | -2.1875em 0.6875em 0 -0.3125em #fff,
53 | 2.0625em 0.9375em 0 -0.5625em #fff;
54 | }
55 | .cloud:after {
56 | content: '';
57 | position: absolute;
58 | bottom: 0;
59 | left: -0.5em;
60 | display: block;
61 | width: 4.5625em;
62 | height: 1em;
63 | background: currentColor;
64 | box-shadow: 0 0.4375em 0 -0.0625em #fff;
65 | }
66 | .cloud:nth-child(2) {
67 | z-index: 0;
68 | background: #fff;
69 | box-shadow:
70 | -2.1875em 0.6875em 0 -0.6875em #fff,
71 | 2.0625em 0.9375em 0 -0.9375em #fff,
72 | 0 0 0 0.375em #fff,
73 | -2.1875em 0.6875em 0 -0.3125em #fff,
74 | 2.0625em 0.9375em 0 -0.5625em #fff;
75 | opacity: 0.3;
76 | transform: scale(0.5) translate(6em, -3em);
77 | animation: cloud 4s linear infinite;
78 | }
79 | .cloud:nth-child(2):after { background: #fff; }
80 |
81 | .sun {
82 | position: absolute;
83 | top: 50%;
84 | left: 50%;
85 | width: 2.5em;
86 | height: 2.5em;
87 | margin: -1.25em;
88 | background: currentColor;
89 | border-radius: 50%;
90 | box-shadow: 0 0 0 0.375em #fff;
91 | animation: spin 12s infinite linear;
92 | }
93 | .rays {
94 | position: absolute;
95 | top: -2em;
96 | left: 50%;
97 | display: block;
98 | width: 0.375em;
99 | height: 1.125em;
100 | margin-left: -0.1875em;
101 | background: #fff;
102 | border-radius: 0.25em;
103 | box-shadow: 0 5.375em #fff;
104 | }
105 | .rays:before,
106 | .rays:after {
107 | content: '';
108 | position: absolute;
109 | top: 0em;
110 | left: 0em;
111 | display: block;
112 | width: 0.375em;
113 | height: 1.125em;
114 | transform: rotate(60deg);
115 | transform-origin: 50% 3.25em;
116 | background: #fff;
117 | border-radius: 0.25em;
118 | box-shadow: 0 5.375em #fff;
119 | }
120 | .rays:before {
121 | transform: rotate(120deg);
122 | }
123 | .cloud + .sun {
124 | margin: -2em 1em;
125 | }
126 |
127 | .rain,
128 | .lightning,
129 | .snow {
130 | position: absolute;
131 | z-index: 2;
132 | top: 50%;
133 | left: 50%;
134 | width: 3.75em;
135 | height: 3.75em;
136 | margin: 0.375em 0 0 -2em;
137 | background: currentColor;
138 | }
139 |
140 | .rain:after {
141 | content: '';
142 | position: absolute;
143 | z-index: 2;
144 | top: 50%;
145 | left: 50%;
146 | width: 1.125em;
147 | height: 1.125em;
148 | margin: -1em 0 0 -0.25em;
149 | background: #0cf;
150 | border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
151 | box-shadow:
152 | 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
153 | -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
154 | -1.375em -0.125em 0 rgba(255,255,255,0.2);
155 | transform: rotate(-28deg);
156 | animation: rain 3s linear infinite;
157 | }
158 |
159 | .bolt {
160 | position: absolute;
161 | top: 50%;
162 | left: 50%;
163 | margin: -0.25em 0 0 -0.125em;
164 | color: #fff;
165 | opacity: 0.3;
166 | animation: lightning 2s linear infinite;
167 | }
168 | .bolt:nth-child(2) {
169 | width: 0.5em;
170 | height: 0.25em;
171 | margin: -1.75em 0 0 -1.875em;
172 | transform: translate(2.5em, 2.25em);
173 | opacity: 0.2;
174 | animation: lightning 1.5s linear infinite;
175 | }
176 | .bolt:before,
177 | .bolt:after {
178 | content: '';
179 | position: absolute;
180 | z-index: 2;
181 | top: 50%;
182 | left: 50%;
183 | margin: -1.625em 0 0 -1.0125em;
184 | border-top: 1.25em solid transparent;
185 | border-right: 0.75em solid;
186 | border-bottom: 0.75em solid;
187 | border-left: 0.5em solid transparent;
188 | transform: skewX(-10deg);
189 | }
190 | .bolt:after {
191 | margin: -0.25em 0 0 -0.25em;
192 | border-top: 0.75em solid;
193 | border-right: 0.5em solid transparent;
194 | border-bottom: 1.25em solid transparent;
195 | border-left: 0.75em solid;
196 | transform: skewX(-10deg);
197 | }
198 | .bolt:nth-child(2):before {
199 | margin: -0.75em 0 0 -0.5em;
200 | border-top: 0.625em solid transparent;
201 | border-right: 0.375em solid;
202 | border-bottom: 0.375em solid;
203 | border-left: 0.25em solid transparent;
204 | }
205 | .bolt:nth-child(2):after {
206 | margin: -0.125em 0 0 -0.125em;
207 | border-top: 0.375em solid;
208 | border-right: 0.25em solid transparent;
209 | border-bottom: 0.625em solid transparent;
210 | border-left: 0.375em solid;
211 | }
212 |
213 | .flake:before,
214 | .flake:after {
215 | content: '\2744';
216 | position: absolute;
217 | top: 50%;
218 | left: 50%;
219 | margin: -1.025em 0 0 -1.0125em;
220 | color: #fff;
221 | list-height: 1em;
222 | opacity: 0.2;
223 | animation: spin 8s linear infinite reverse;
224 | }
225 | .flake:after {
226 | margin: 0.125em 0 0 -1em;
227 | font-size: 1.5em;
228 | opacity: 0.4;
229 | animation: spin 14s linear infinite;
230 | }
231 | .flake:nth-child(2):before {
232 | margin: -0.5em 0 0 0.25em;
233 | font-size: 1.25em;
234 | opacity: 0.2;
235 | animation: spin 10s linear infinite;
236 | }
237 | .flake:nth-child(2):after {
238 | margin: 0.375em 0 0 0.125em;
239 | font-size: 2em;
240 | opacity: 0.4;
241 | animation: spin 16s linear infinite reverse;
242 | }
243 |
244 |
245 | /* Animations */
246 |
247 | @keyframes spin {
248 | 100% { transform: rotate(360deg); }
249 | }
250 |
251 | @keyframes cloud {
252 | 0% { opacity: 0; }
253 | 50% { opacity: 0.3; }
254 | 100% {
255 | opacity: 0;
256 | transform: scale(0.5) translate(-200%, -3em);
257 | }
258 | }
259 |
260 | @keyframes rain {
261 | 0% {
262 | background: #0cf;
263 | box-shadow:
264 | 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
265 | -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
266 | -1.375em -0.125em 0 #0cf;
267 | }
268 | 25% {
269 | box-shadow:
270 | 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
271 | -0.875em 1.125em 0 -0.125em #0cf,
272 | -1.375em -0.125em 0 rgba(255,255,255,0.2);
273 | }
274 | 50% {
275 | background: rgba(255,255,255,0.3);
276 | box-shadow:
277 | 0.625em 0.875em 0 -0.125em #0cf,
278 | -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
279 | -1.375em -0.125em 0 rgba(255,255,255,0.2);
280 | }
281 | 100% {
282 | box-shadow:
283 | 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
284 | -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
285 | -1.375em -0.125em 0 #0cf;
286 | }
287 | }
288 |
289 | @keyframes lightning {
290 | 45% {
291 | color: #fff;
292 | background: #fff;
293 | opacity: 0.2;
294 | }
295 | 50% {
296 | color: #0cf;
297 | background: #0cf;
298 | opacity: 1;
299 | }
300 | 55% {
301 | color: #fff;
302 | background: #fff;
303 | opacity: 0.2;
304 | }
305 | }
--------------------------------------------------------------------------------
/Liquid UI elements/css/Liquid.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --c-active: #275EFE;
3 | --c-active-inner: #FFFFFF;
4 | --c-default: #D2D6E9;
5 | --c-default-dark: #C7CBDF;
6 | --c-black: #1B1B22;
7 | }
8 |
9 | .radio,
10 | .checkbox,
11 | .switch {
12 | display: table;
13 | border-radius: var(--border-radius, 12px) var(--border-radius-corner, 12px) var(--border-radius, 12px) var(--border-radius, 12px);
14 | position: relative;
15 | }
16 | .radio input,
17 | .checkbox input,
18 | .switch input {
19 | -webkit-appearance: none;
20 | -moz-appearance: none;
21 | appearance: none;
22 | outline: none;
23 | border: none;
24 | background: var(--input-background, none);
25 | display: block;
26 | cursor: pointer;
27 | margin: 0;
28 | padding: 0;
29 | border-radius: inherit;
30 | width: var(--input-width, 24px);
31 | height: var(--input-height, 24px);
32 | }
33 | .radio svg,
34 | .checkbox svg,
35 | .switch svg {
36 | display: block;
37 | position: absolute;
38 | left: 0;
39 | right: 0;
40 | bottom: 0;
41 | top: 0;
42 | pointer-events: none;
43 | fill: var(--c-active-inner);
44 | -webkit-transform: scale(1.01) translateZ(0);
45 | transform: scale(1.01) translateZ(0);
46 | }
47 |
48 | .radio input,
49 | .checkbox input {
50 | --border-color: var(--c-default);
51 | --border-width: 2px;
52 | box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
53 | }
54 | .radio input:checked,
55 | .checkbox input:checked {
56 | --border-color: var(--c-active);
57 | }
58 | .radio input:not(:checked),
59 | .checkbox input:not(:checked) {
60 | -webkit-transition: box-shadow .25s;
61 | transition: box-shadow .25s;
62 | }
63 | .radio input:not(:checked):hover,
64 | .checkbox input:not(:checked):hover {
65 | --border-width: 3px;
66 | --border-color: var(--c-active);
67 | }
68 |
69 | .radio input:checked {
70 | --border-width: 6.75px;
71 | }
72 | .radio input + svg {
73 | --top-y: 0;
74 | --dot-y: -17px;
75 | --drop-y: -14px;
76 | --top-s-x: 1.75;
77 | --top-s-y: 1;
78 | }
79 | .radio input + svg .top {
80 | -webkit-transform-origin: 12px -12px;
81 | transform-origin: 12px -12px;
82 | -webkit-transform: translateY(var(--top-y)) scale(var(--top-s-x), var(--top-s-y)) translateZ(0);
83 | transform: translateY(var(--top-y)) scale(var(--top-s-x), var(--top-s-y)) translateZ(0);
84 | }
85 | .radio input + svg .dot {
86 | -webkit-transform: translateY(var(--dot-y)) translateZ(0);
87 | transform: translateY(var(--dot-y)) translateZ(0);
88 | }
89 | .radio input + svg .drop {
90 | -webkit-transform: translateY(var(--drop-y)) translateZ(0);
91 | transform: translateY(var(--drop-y)) translateZ(0);
92 | }
93 |
94 | .checkbox {
95 | --border-radius: 5px;
96 | --border-radius-corner: 5px;
97 | }
98 | .checkbox input:checked {
99 | --border-width: 12px;
100 | }
101 | .checkbox input:checked + svg {
102 | --tick-offset: 46.5px;
103 | }
104 | .checkbox input + svg {
105 | --dot-x: 14px;
106 | --dot-y: -14px;
107 | --dot-s: 1;
108 | --tick-offset: 20.5px;
109 | --tick-array: 16.5px;
110 | --tick-s: 1;
111 | --drop-s: 1;
112 | }
113 | .checkbox input + svg .tick {
114 | fill: none;
115 | stroke-width: 3px;
116 | stroke-linecap: round;
117 | stroke-linejoin: round;
118 | stroke: var(--c-active-inner);
119 | stroke-dasharray: var(--tick-array) 33px;
120 | stroke-dashoffset: var(--tick-offset);
121 | -webkit-transform-origin: 10.5px 16px;
122 | transform-origin: 10.5px 16px;
123 | -webkit-transform: scale(var(--tick-s)) translateZ(0);
124 | transform: scale(var(--tick-s)) translateZ(0);
125 | }
126 | .checkbox input + svg .dot {
127 | -webkit-transform-origin: 10.5px 15.5px;
128 | transform-origin: 10.5px 15.5px;
129 | -webkit-transform: translate(var(--dot-x), var(--dot-y)) scale(var(--dot-s)) translateZ(0);
130 | transform: translate(var(--dot-x), var(--dot-y)) scale(var(--dot-s)) translateZ(0);
131 | }
132 | .checkbox input + svg .drop {
133 | -webkit-transform-origin: 25px -1px;
134 | transform-origin: 25px -1px;
135 | -webkit-transform: scale(var(--drop-s)) translateZ(0);
136 | transform: scale(var(--drop-s)) translateZ(0);
137 | }
138 |
139 | .switch {
140 | --input-width: 38px;
141 | }
142 | .switch input {
143 | --input-background: var(--c-default);
144 | }
145 | .switch input:checked {
146 | --input-background: var(--c-active);
147 | }
148 | .switch input:checked + svg {
149 | --default-s: 0;
150 | --default-x: 8px;
151 | --dot-s: 1;
152 | --dot-x: 0px;
153 | }
154 | .switch input + svg {
155 | --input-background: var(--c-default);
156 | --default-s: 1;
157 | --default-x: 0px;
158 | --dot-s: 0;
159 | --dot-x: -8px;
160 | }
161 | .switch .default {
162 | -webkit-transform-origin: 12px 12px;
163 | transform-origin: 12px 12px;
164 | -webkit-transform: translateX(var(--default-x)) scale(var(--default-s)) translateZ(0);
165 | transform: translateX(var(--default-x)) scale(var(--default-s)) translateZ(0);
166 | }
167 | .switch .dot {
168 | -webkit-transform-origin: 26px 12px;
169 | transform-origin: 26px 12px;
170 | -webkit-transform: translateX(var(--dot-x)) scale(var(--dot-s)) translateZ(0);
171 | transform: translateX(var(--dot-x)) scale(var(--dot-s)) translateZ(0);
172 | }
173 |
174 | .btn {
175 | -webkit-appearance: none;
176 | -moz-appearance: none;
177 | appearance: none;
178 | border: none;
179 | position: relative;
180 | background: var(--c-black);
181 | color: #fff;
182 | outline: none;
183 | cursor: pointer;
184 | font-size: 14px;
185 | line-height: 21px;
186 | font-weight: 600;
187 | display: block;
188 | width: 132px;
189 | text-align: center;
190 | border-radius: 7px;
191 | margin: 0 auto;
192 | padding: 12px 0;
193 | }
194 | .btn span {
195 | position: relative;
196 | z-index: 1;
197 | }
198 | .btn svg {
199 | display: block;
200 | width: 100%;
201 | height: 100%;
202 | position: absolute;
203 | left: 0;
204 | top: 0;
205 | fill: var(--c-active);
206 | }
207 | .btn svg circle {
208 | -webkit-transition: -webkit-transform var(--duration, 0.25s) ease-out;
209 | transition: -webkit-transform var(--duration, 0.25s) ease-out;
210 | transition: transform var(--duration, 0.25s) ease-out;
211 | transition: transform var(--duration, 0.25s) ease-out, -webkit-transform var(--duration, 0.25s) ease-out;
212 | }
213 | .btn svg circle.top-left {
214 | -webkit-transform: translate(var(--spacing, -16px), var(--spacing, -40px));
215 | transform: translate(var(--spacing, -16px), var(--spacing, -40px));
216 | }
217 | .btn svg circle.middle-bottom {
218 | -webkit-transform: translate(var(--spacing, 8px), var(--spacing, 40px));
219 | transform: translate(var(--spacing, 8px), var(--spacing, 40px));
220 | }
221 | .btn svg circle.top-right {
222 | -webkit-transform: translate(var(--spacing, 40px), var(--spacing, -40px));
223 | transform: translate(var(--spacing, 40px), var(--spacing, -40px));
224 | }
225 | .btn svg circle.right-bottom {
226 | -webkit-transform: translate(var(--spacing, 4px), var(--spacing, 40px));
227 | transform: translate(var(--spacing, 4px), var(--spacing, 40px));
228 | }
229 | .btn svg circle.left-bottom {
230 | -webkit-transform: translate(var(--spacing, -40px), var(--spacing, 40px));
231 | transform: translate(var(--spacing, -40px), var(--spacing, 40px));
232 | }
233 | .btn:hover {
234 | --spacing: 0;
235 | --duration: .45s;
236 | }
237 |
238 | .grid {
239 | display: grid;
240 | grid-gap: 24px 32px;
241 | grid-template-columns: repeat(3, auto);
242 | grid-template-rows: repeat(3, auto);
243 | grid-auto-flow: column;
244 | }
245 | .grid .last {
246 | grid-column: 1 / 4;
247 | grid-row: 3;
248 | }
249 |
250 | html {
251 | box-sizing: border-box;
252 | -webkit-font-smoothing: antialiased;
253 | }
254 |
255 | * {
256 | box-sizing: inherit;
257 | }
258 | *:before, *:after {
259 | box-sizing: inherit;
260 | }
261 |
262 | body {
263 | min-height: 100vh;
264 | display: -webkit-box;
265 | display: flex;
266 | font-family: 'Poppins', Arial;
267 | -webkit-box-pack: center;
268 | justify-content: center;
269 | -webkit-box-align: center;
270 | align-items: center;
271 | background: #fff;
272 | }
--------------------------------------------------------------------------------
27 |
32 |
116 |
33 |
115 |
34 | 
35 |
41 |
42 |
35 |
36 |
40 | Example 1
37 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. 38 | Eveniet, eius, asperiores. Incidunt sapiente est quae iure...
39 |
43 | 
44 |
50 |
51 |
44 |
45 |
49 | Example 2
46 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. 47 | Nostrum vitae necessitatibus, dolorem similique vero explicabo...
48 |
52 | 
53 |
59 |
60 |
53 |
54 |
58 | Example 3
55 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. 56 | Quo, placeat voluptate, fuga tenetur eos ducimus animi porro...
57 |
61 | 
62 |
68 |
69 |
62 |
63 |
67 | Example 4
64 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. 65 | Fugit doloremque quisquam, obcaecati unde nam est quos...
66 |
70 | 
71 |
77 |
78 |
71 |
72 |
76 | Example 5
73 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. 74 | Esse corporis hic minima nisi reprehenderit...
75 |
79 | 
80 |
86 |
87 |
80 |
81 |
85 | Example 6
82 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. 83 | Vel voluptatibus, id, deserunt inventore...
84 |
88 | 
89 |
95 |
96 |
89 |
90 |
94 | Example 7
91 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. 92 | Rerum enim beatae vero culpa, fuga, magni sunt dolores nam...
93 |
97 | 
98 |
104 |
105 |
98 |
99 |
103 | Example 8
100 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. 101 | Repudiandae numquam, blanditiis necessitatibus...
102 |
106 | 
107 |
113 |
114 |
107 |
108 |
112 | Example 9
109 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. 110 | Consequuntur adipisci voluptatum laborum officiis...
111 |