CSS3 loading

[xgqfrms]

CSS3 loading

text spinners

https://github.com/maxbeier/text-spinners

https://maxbeier.github.io/text-spinners/

CSS content & 换行字符 & loading 效果

https://www.zhangxinxu.com/wordpress/2016/11/css-content-pre-animation-character-loading/

[xgqfrms]

https://www.testking.com/techking/infographics/ultimate-html5-cheatsheat/

https://www.zhangxinxu.com/wordpress/2013/03/funny-textarea-resize-ux/

https://css-tricks.com/tricky-textarea-pulltab/

[xgqfrms]

css & 翻转文字

https://www.zhangxinxu.com/study/201807/es6-static-import-const-default.php

    transform: rotate(180deg);

    transform: scaleY(-1);

es6 module & browser

https://caniuse.com/#feat=es6-module

https://caniuse.com/#feat=es6-module-dynamic-import

https://www.zhangxinxu.com/wordpress/2018/08/browser-native-es6-export-import-module/

http://2ality.com/2017/01/import-operator.html#async-functions-and-import

[xgqfrms]

https://jakearchibald.com/2017/es-modules-in-browsers/ https://developers.google.com/web/fundamentals/primers/modules https://developers.google.com/web/updates/2017/11/dynamic-import

[xgqfrms]

markdown title testing

点个赞，汇总的比较详细。

虽然开发中，文中提到的好多坑已经踩过了。

http://2ality.com/2017/01/import-operator.html#async-functions-and-import

可以看下，这篇文章也不错!

[xgqfrms]

css trick ???

-1， 费解

 transform: scale(-1);
 transform: scaleX(-1);
 transform: scaleY(-1);

good

语义化，好理解

 transform: rotate(180deg);
 transform: rotateX(180deg);
 transform: rotateY(180deg);

[xgqfrms]

MathML

https://caniuse.com/#search=MathML

css scale

scale

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

scale3d

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d

[xgqfrms]

css rotate

rotate3d

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d

rotate

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

180deg

1turn

1rad

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ

[xgqfrms]

transform-function

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY

scaleY(-1); === rotateX(180deg);

.box{
    transform: rotateX(180deg);
    transform: scaleY(-1);
}

[xgqfrms]

clip-path

https://www.zhangxinxu.com/study/201412/css-clip-path-rect-radius-transition.html

.clip-path {
    transition: 0.4s cubic-bezier(1, -1, 0, 2);
    -webkit-clip-path: circle(180px at 128px 95px);
    clip-path: circle(180px at 128px 95px);
}
.clip-path:hover {
    -webkit-clip-path: circle(95px at 128px 95px);
    clip-path: circle(95px at 128px 95px);
}

<strong>鼠标hover:</strong>
<p><img src="mm1.jpg" class="clip-path"></p>

[xgqfrms]

H5 DnD

https://www.zhangxinxu.com/wordpress/2016/11/html5-drag-drop-module-insert-sort-delete-demo/

https://www.zhangxinxu.com/study/201611/module-drag-drop-sort-delete.html

[xgqfrms]

Expose Loader

require("expose-loader?$!jquery");
require("expose-loader?jQuery!jquery");

import 'expose-loader?$!jquery';
import 'expose-loader?jQuery!jquery';

https://webpack.js.org/loaders/expose-loader/

https://github.com/webpack-contrib/expose-loader

https://stackoverflow.com/questions/29080148/expose-jquery-to-real-window-object-with-webpack

This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

error & solution

[xgqfrms]

https://github.com/webpack-contrib/expose-loader/issues/20#issuecomment-313885039

[xgqfrms]

// require("expose-loader?$!jquery");
// require("expose-loader?jQuery!jquery");

import "expose-loader?$!jquery";
import "expose-loader?jQuery!jquery";

/*

npm i -D expose-loader
npm i -S jquery@2.1.4

*/