html+css3 实现各种loading效果
效果见下图
代码：
建议直接去本人github上浏览代码
https://github.com/wuliqiangqiang/loading
<!DOCTYPE html>
<html>
<head>
<title>loading效果</title>
<link rel="stylesheet" href="./time.css">
<link rel="stylesheet" href="./typing.css">
<link rel="stylesheet" href="./location_indicator.css">
<link rel="stylesheet" href="./magnifier.css">
<link rel="stylesheet" href="./square.css">
<link rel="stylesheet" href="./egg.css">
<link rel="stylesheet" href="./dashboard.css">
<link rel="stylesheet" href="./coffee_cup.css">
<link rel="stylesheet" href="./clound.css">
<link rel="stylesheet" href="./circle.css">
<link rel="stylesheet" href="./battery.css">
<link rel="stylesheet" href="./help.css">
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* 浮动 */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
html {
color: #fff;
background-color: #000;
}
.wrapper {
width: 700px;
margin: 0 auto;
}
.row {
text-align: center;
padding: 50px 0;
}
.span,
.span_large {
float: left;
width: 100px;
background-color: rgba(0, 0, 0, 0.02);
height: 100px;
vertical-align: middle;
border-radius: 1px;
margin-right: 100px;
}
.span:last-child {
margin-right: 0px;
}
/* loading块 */
.battery {
width: 28px;
height: 14px;
border: 1px #fff solid;
border-radius: 2px;
-webkit-animation: charge 4s linear infinite;
-moz-animation: charge 4s linear infinite;
animation: charge 4s linear infinite;
margin: 40px auto 0;
}
.battery:after {
width: 2px;
height: 7px;
background-color: #fff;
border-radius: 0px 1px 1px 0px;
position: absolute;
content: "";
top: 2px;
right: -4px;
}
@-webkit-keyframes charge {
0% {
box-shadow: inset 0px 0px 0px #fff;
}
100% {
box-shadow: inset 30px 0px 0px #fff;
}
}
@-moz-keyframes charge {
0% {
box-shadow: inset 0px 0px 0px #fff;
}
100% {
box-shadow: inset 30px 0px 0px #fff;
}
}
@keyframes charge {
0% {
box-shadow: inset 0px 0px 0px #fff;
}
100% {
box-shadow: inset 30px 0px 0px #fff;
}
}
.circle {
margin: 40px auto;
position: relative;
width: 8px;
height: 8px;
background-color: rgba(255, 255, 255, 0.5);
box-shadow: -14px 0px 0px rgba(255, 255, 255, 1);
border-radius: 50%;
-webkit-animation: circle_classic 1s ease-in-out infinite alternate;
-moz-animation: circle_classic 1s ease-in-out infinite alternate;
animation: circle_classic 1s ease-in-out infinite alternate;
}
@-webkit-keyframes circle_classic {
0% {
opacity: 0.1;
-webkit-transform: rotate(0deg) scale(0.5);
}
100% {
opacity: 1;
-webkit-transform: rotate(360deg) scale(1.2);
}
}
@-moz-keyframes circle_classic {
0% {
opacity: 0.1;
-moz-transform: rotate(0deg) scale(0.5);
}
100% {
opacity: 1;
-moz-transform: rotate(360deg) scale(1.2);
}
}
@keyframes circle_classic {
0% {
opacity: 0.1;
transform: rotate(0deg) scale(0.5);
}
100% {
opacity: 1;
transform: rotate(360deg) scale(1.2);
}
}
.cloud {
margin: 42px 30px;
width: 4px;
height: 10px;
opacity: 0.5;
position: relative;
box-shadow: 6px 0px 0px 0px rgba(255, 255, 255, 1),
12px 0px 0px 0px rgba(255, 255, 255, 1),
18px 0px 0px 0px rgba(255, 255, 255, 1),
24px 0px 0px 0px rgba(255, 255, 255, 1),
30px 0px 0px 0px rgba(255, 255, 255, 1),
36px 0px 0px 0px rgba(255, 255, 255, 1);
-webkit-animation: rain 1s linear infinite alternate;
-moz-animation: rain 1s linear infinite alternate;
animation: rain 1s linear infinite alternate;
}
.cloud:after {
width: 40px;
height: 10px;
position: absolute;
content: "";
background-color: rgba(255, 255, 255, 1);
top: 0px;
opacity: 1;
-webkit-animation: line_flow 2s linear infinite reverse;
-moz-animation: line_flow 2s linear infinite reverse;
animation: line_flow 2s linear infinite reverse;
}
@-webkit-keyframes rain {
0% {
box-shadow: 6px 0px 0px 0px rgba(255, 255, 255, 1),
12px 0px 0px 0px rgba(255, 255, 255, 0.9),
18px 0px 0px 0px rgba(255, 255, 255, 0.7),
24px 0px 0px 0px rgba(255, 255, 255, 0.6),
30px 0px 0px 0px rgba(255, 255, 255, 0.3),
36px 0px 0px 0px rgba(255, 255, 255, 0.2);
}
100% {
box-shadow: 6px 0px 0px 0px rgba(255, 255, 255, 0.2),
12px 0px 0px 0px rgba(255, 255, 255, 0.3),
18px 0px 0px 0px rgba(255, 255, 255, 0.6),
24px 0px 0px 0px rgba(255, 255, 255, 0.7),
30px 0px 0px 0px rgba(255, 255, 255, 0.9),
36px 0px 0px 0px rgba(255, 255, 255, 1);
opacity: 1;
}
}
@-moz-keyframes rain {
0% {
box-shadow: 6px 0px 0px 0px rgba(255, 255, 255, 1),
12px 0px 0px 0px rgba(255, 255, 255, 0.9),
18px 0px 0px 0px rgba(255, 255, 255, 0.7),
24px 0px 0px 0px rgba(255, 255, 255, 0.6),
30px 0px 0px 0px rgba(255, 255, 255, 0.3),
36px 0px 0px 0px rgba(255, 255, 255, 0.2);
}
100% {
box-shadow: 6px 0px 0px 0px rgba(255, 255, 255, 0.2),
12px 0px 0px 0px rgba(255, 255, 255, 0.3),
18px 0px 0px 0px rgba(255, 255, 255, 0.6),
24px 0px 0px 0px rgba(255, 255, 255, 0.7),
30px 0px 0px 0px rgba(255, 255, 255, 0.9),
36px 0px 0px 0px rgba(255, 255, 255, 1);
opacity: 1;
}
}
@keyframes rain {
0% {
box-shadow: 6px 0px 0px 0px rgba(255, 255, 255, 1),
12px 0px 0px 0px rgba(255, 255, 255, 0.9),
18px 0px 0px 0px rgba(255, 255, 255, 0.7),
24px 0px 0px 0px rgba(255, 255, 255, 0.6),
30px 0px 0px 0px rgba(255, 255, 255, 0.3),
36px 0px 0px 0px rgba(255, 255, 255, 0.2);
}
100% {
box-shadow: 6px 0px 0px 0px rgba(255, 255, 255, 0.2),
12px 0px 0px 0px rgba(255, 255, 255, 0.3),
18px 0px 0px 0px rgba(255, 255, 255, 0.6),
24px 0px 0px 0px rgba(255, 255, 255, 0.7),
30px 0px 0px 0px rgba(255, 255, 255, 0.9),
36px 0px 0px 0px rgba(255, 255, 255, 1);
opacity: 1;
}
}
@-webkit-keyframes line_flow {
0% {
width: 0px;
}
100% {
width: 40px;
}
}
@-moz-keyframes line_flow {
0% {
width: 0px;
}
100% {
width: 40px;
}
}
@keyframes line_flow {
0% {
width: 0px;
}
100% {
width: 40px;
}
}
.coffee_cup {
width: 20px;
height: 24px;
border: 1px rgba(255, 255, 255, 1) solid;
border-radius: 0px 0px 5px 5px;
position: relative;
margin: 36px auto;
}
.coffee_cup:after,
.coffee_cup:before {
position: absolute;
content: "";
}
.coffee_cup:after {
width: 5px;
height: 12px;
border: 1px #fff solid;
border-left: none;
border-radius: 0px 20px 20px 0px;
left: 20px;
}
.coffee_cup:before {
width: 1px;
height: 6px;
background-color: rgba(255, 255, 255, 1);
top: -10px;
left: 4px;
box-shadow: 5px 0px 0px 0px rgba(255, 255, 255, 1),
5px -5px 0px 0px rgba(255, 255, 255, 1),
10px 0px 0px 0px rgba(255, 255, 255, 1);
-webkit-animation: steam 1s linear infinite alternate;
-moz-animation: steam 1s linear infinite alternate;
animation: steam 1s linear infinite alternate;
}
@-webkit-keyframes steam {
0% {
height: 0px;
}
100% {
height: 6px;
}
}
@-moz-keyframes steam {
0% {
height: 0px;
}
100% {
height: 6px;
}
}
@keyframes steam {
0% {
height: 0px;
}
100% {
height: 6px;
}
}
.dashboard {
width: 32px;
height: 32px;
margin: 30px auto;
border: 2px rgba(255, 255, 255, 1) solid;
border-radius: 100%;
position: relative;
overflow: hidden;
z-index: 1;
}
.dashboard:after,
.dashboard:before {
position: absolute;
content: "";
}
.dashboard:after {
width: 14px;
height: 2px;
top: 20px;
-webkit-transform-origin: 1px 1px;
-moz-transform-origin: 1px 1px;
transform-origin: 1px 1px;
background-color: rgba(255, 255, 255, 1);
-webkit-animation: dashboard_hand 2s linear infinite alternate;
-moz-animation: dashboard_hand 2s linear infinite alternate;
animation: dashboard_hand 2s linear infinite alternate;
}
.dashboard:before {
width: 32px;
height: 10px;
background-color: rgba(255, 255, 255, 1);
top: 20px;
left: -2px;
}
@-webkit-keyframes dashboard_hand {
0% {
-webkit-transform: rotate(-160deg);
}
100% {
-webkit-transform: rotate(-20deg);
}
}
@-moz-keyframes dashboard_hand {
0% {
-moz-transform: rotate(-160deg);
}
100% {
-moz-transform: rotate(-20deg);
}
}
@keyframes dashboard_hand {
0% {
transform: rotate(-160deg);
}
100% {
transform: rotate(-20deg);
}
}
.eye {
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
box-shadow: 30px 0px 0px 0px rgba(255, 255, 255, 0.8);
position: relative;
margin: 36px 26px;
}
.eye:after {
background-color: #000;
width: 10px;
height: 10px;
box-shadow: 30px 0px 0px 0px #000;
border-radius: 50%;
left: 9px;
top: 8px;
position: absolute;
content: "";
-webkit-animation: eyeball 1s linear infinite alternate;
-moz-animation: eyeball 1s linear infinite alternate;
animation: eyeball 1s linear infinite alternate;
}
@-webkit-keyframes eyeball {
0% {
left: 9px;
}
100% {
left: 1px;
}
}
@-moz-keyframes eyeball {
0% {
left: 9px;
}
100% {
left: 1px;
}
}
@keyframes eyeball {
0% {
left: 9px;
}
100% {
left: 1px;
}
}
.help {
width: 30px;
height: 30px;
border: 1px #fff solid;
border-radius: 50%;
-webkit-animation: rotation 1s ease-in-out infinite;
-moz-animation: rotation 1s ease-in-out infinite;
animation: rotation 1s ease-in-out infinite;
margin: 30px auto;
}
.help:after {
width: 5px;
height: 5px;
background-color: rgba(255, 255, 255, 1);
border-radius: 100%;
position: absolute;
content: "";
}
@-webkit-keyframes rotation {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotation {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.location_indicator {
margin: 30px auto;
position: relative;
left: -9px;
}
.location_indicator:before,
.location_indicator:after {
position: absolute;
content: "";
}
.location_indicator:before {
width: 20px;
height: 20px;
border-radius: 100% 100% 100% 0;
box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1);
-webkit-animation: mapping 1s linear infinite;
-moz-animation: mapping 1s linear infinite;
animation: mapping 1s linear infinite;
-webkit-transform: rotate(-46deg);
-moz-transform: rotate(-46deg);
transform: rotate(-46deg);
}
.location_indicator:after {
width: 30px;
height: 10px;
border-radius: 100%;
left: 44px;
background-color: rgba(255, 255, 255, 0.2);
top: 24px;
z-index: -1;
}
@-webkit-keyframes mapping {
0% {
top: 0;
}
50% {
top: -5px;
}
100% {
top: 0;
}
}
@-moz-keyframes mapping {
0% {
top: 0;
}
50% {
top: -5px;
}
100% {
top: 0;
}
}
@-keyframes mapping {
0% {
top: 0;
}
50% {
top: -5px;
}
100% {
top: 0;
}
}
.magnifier {
width: 20px;
height: 20px;
box-shadow: 0px 0px 0px 1px #fff;
border-radius: 50%;
position: relative;
margin: 34px auto;
-webkit-animation: magnify 1s linear infinite alternate;
-moz-animation: magnify 1s linear infinite alternate;
animation: magnify 1s linear infinite alternate;
}
.magnifier:after,
.magnifier:before {
position: absolute;
content: "";
}
.magnifier:before {
content: "me";
font-size: 12px;
left: 2px;
text-align: center;
top: 2px;
}
.magnifier:after {
width: 2px;
height: 8px;
background-color: #fff;
bottom: -6px;
left: 20px;
border-radius: 2px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@-webkit-keyframes magnify {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(1.5);
}
}
@-moz-keyframes magnify {
0% {
-moz-transform: scale(1);
}
100% {
-moz-transform: scale(1.5);
}
}
@keyframes magnify {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
.square {
width: 20px;
height: 20px;
border: 1px rgba(255, 255, 255, 1) solid;
margin: 36px auto;
position: relative;
-webkit-animation: fill_color 5s linear infinite;
-moz-animation: fill_color 5s linear infinite;
animation: fill_color 5s linear infinite;
}
.square:after {
width: 4px;
height: 4px;
position: absolute;
content: "";
background-color: rgba(255, 255, 255, 1);
top: -8px;
left: 0px;
-webkit-animation: square_check 1s ease-in-out infinite;
-moz-animation: square_check 1s ease-in-out infinite;
animation: square_check 1s ease-in-out infinite;
}
@-webkit-keyframes square_check {
25% {
left: 22px;
top: -8px;
}
50% {
left: 22px;
top: 22px;
}
75% {
left: -9px;
top: 22px;
}
100% {
left: -9px;
top: -7px;
}
}
@-moz-keyframes square_check {
25% {
left: 22px;
top: -8px;
}
50% {
left: 22px;
top: 22px;
}
75% {
left: -9px;
top: 22px;
}
100% {
left: -9px;
top: -7px;
}
}
@keyframes square_check {
25% {
left: 22px;
top: -8px;
}
50% {
left: 22px;
top: 22px;
}
75% {
left: -9px;
top: 22px;
}
100% {
left: -9px;
top: -7px;
}
}
@-webkit-keyframes fill_color {
0% {
box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: inset 0px -20px 0px 0px rgba(255, 255, 255, 1);
}
}
@-moz-keyframes fill_color {
0% {
box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: inset 0px -20px 0px 0px rgba(255, 255, 255, 1);
}
}
@keyframes fill_color {
0% {
box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: inset 0px -20px 0px 0px rgba(255, 255, 255, 1);
}
}
.timer {
width: 24px;
height: 24px;
background-color: transparent;
box-shadow: inset 0px 0px 0px 2px #fff;
border-radius: 50%;
position: relative;
margin: 38px auto;
}
.timer:after,
.timer:before {
position: absolute;
content: "";
background-color: #fff;
}
.timer:after {
width: 10px;
height: 2px;
top: 11px;
left: 11px;
-webkit-transform-origin: 1px 1px;
-moz-transform-origin: 1px 1px;
transform-origin: 1px 1px;
-webkit-animation: minhand 2s linear infinite;
-moz-animation: minhand 2s linear infinite;
animation: minhand 2s linear infinite;
}
.timer:before {
width: 8px;
height: 2px;
top: 11px;
left: 11px;
-webkit-transform-origin: 1px 1px;
-moz-transform-origin: 1px 1px;
transform-origin: 1px 1px;
-webkit-animation: hrhand 8s linear infinite;
-moz-animation: hrhand 8s linear infinite;
animation: hrhand 8s linear infinite;
}
@-webkit-keyframes minhand {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
@-moz-keyframes minhand {
0% {
-moz-transform: rotate(0deg)
}
100% {
-moz-transform: rotate(360deg)
}
}
@keyframes minhand {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
@-webkit-keyframes hrhand {
0% {
-webkit-transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg)
}
}
@-moz-keyframes hrhand {
0% {
-moz-transform: rotate(0deg)
}
100% {
-moz-transform: rotate(360deg)
}
}
@keyframes hrhand {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.typing_loader {
width: 6px;
height: 6px;
border-radius: 50%;
-webkit-animation: typing 1s linear infinite alternate;
-moz-animation: Typing 1s linear infinite alternate;
animation: typing 1s linear infinite alternate;
margin: 46px auto;
position: relative;
left: -12px;
}
@-webkit-keyframes typing {
0% {
background-color: rgba(255, 255, 255, 1);
box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2),
24px 0px 0px 0px rgba(255, 255, 255, 0.2);
}
25% {
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 2),
24px 0px 0px 0px rgba(255, 255, 255, 0.2);
}
75% {
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2),
24px 0px 0px 0px rgba(255, 255, 255, 1);
}
}
@-moz-keyframes typing {
0% {
background-color: rgba(255, 255, 255, 1);
box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2),
24px 0px 0px 0px rgba(255, 255, 255, 0.2);
}
25% {
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 2),
24px 0px 0px 0px rgba(255, 255, 255, 0.2);
}
75% {
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2),
24px 0px 0px 0px rgba(255, 255, 255, 1);
}
}
@keyframes typing {
0% {
background-color: rgba(255, 255, 255, 1);
box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2),
24px 0px 0px 0px rgba(255, 255, 255, 0.2);
}
25% {
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 2),
24px 0px 0px 0px rgba(255, 255, 255, 0.2);
}
75% {
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 12px 0px 0px 0px rgba(255, 255, 255, 0.2),
24px 0px 0px 0px rgba(255, 255, 255, 1);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="row cf">
<div class="span">
<div class="timer"></div>
</div>
<div class="span">
<div class="typing_loader"></div>
</div>
<div class="span">
<div class="location_indicator"></div>
</div>
<div class="span">
<div class="dashboard"></div>
</div>
</div>
<div class="row cf">
<div class="span">
<div class="battery"></div>
</div>
<div class="span">
<div class="magnifier"></div>
</div>
<div class="span">
<div class="help"></div>
</div>
<div class="span">
<div class="cloud"></div>
</div>
</div>
<div class="row cf">
<div class="span">
<div class="eye"></div>
</div>
<div class="span">
<div class="coffee_cup"></div>
</div>
<div class="span">
<div class="square"></div>
</div>
<div class="span">
<div class="circle"></div>
</div>
</div>
</div>
</body>
</html>
html+css3 实现各种loading效果的更多相关文章
- CSS3饼状loading效果
概述 之前看到很多饼状loading效果是用图片的方式实现的,本例子采用的是纯CSS3实现,这样可以节省资源空间,有兴趣的小伙伴可以看下~ 详细 代码下载:http://www.demodashi.c ...
- 10种CSS3实现的Loading效果
原文链接:http://www.cnblogs.com/jr1993/p/4622039.html 第一种效果: 代码如下: <div class="loading"> ...
- HTML5+CSS3 loading 效果收集－－转载
用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- CSS3轻松实现清新 Loading 效果
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...
- CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- 用CSS3实现饼状loading效果
原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...
- css3 之炫酷的loading效果
css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...
随机推荐
- 第4课 简易浏览器－WebViewer组件的使用方法
做一个手机浏览器,需要哪些组件呢? 一.组件设计 二.组件属性及命名修改 三.逻辑设计 1.导航按钮代码:前进.后退.主页 2.访问网页按钮 1)根据用户在地址栏输入的地址书写,判断书写中是否含有“h ...
- AMD，CMD，UMD 三种模块规范 写法格式
一下三块均以 foo.js 为示例文件名,以 jQuery,underscore 为需求组件 ADM:异步模块规范, RequireJs 的支持格式 // 文件名: foo.js define(['j ...
- QT开发(二) windows下简单部署
如果使用vs编译器 需要c runtime 例如(msvc110 )这种 还需要若干qt的dll 基本在qt的bin目录 如果使用了QWindow这种对象还需要引用qt目录 plugins下 的内容 ...
- react native运行报错
更换RN项目目录位置后,react-native run-ios,出错. node_modules/react-native/ReactCommon/yoga/yoga/YGNodeList.c 解决 ...
- Linux->ZooKeeper集群搭建
人,总免不了有心结,限制着自己,难以前行.对于ZooKeeper的理解,以及实践也拖了很久,今天用零散时间学习一下,补点干货. 一.简述 Zookeeper是Google的Chubby一个开源的实现, ...
- angular2 遗留问题
1.angular build [2017-07-26] a.改写js/css的引用目录的前缀(比如统一增加 /abc/xxx/*.js) b.build时,可以控制index/js/css的生成 ...
- Oracle 内存使用建议性能视图
下面三个查询结果均可查询出随着内存参数设置的变化性能的变化情况,对oracle数据库内存的设置有一定的建议和指导作用. select t.SGA_SIZE,t.ESTD_DB_TIME_FACTOR ...
- （原）使用 memcache 使用过程中可能遇到的问题
在项目优化中,使用到了memcache,刚开始不能用,后来期间总会偶尔抛出异常,刚开始怀疑动态库版本问题,后来尝试了各种替换依旧误解,搞得我日思夜想的,天天惦记着他..=_= 下午拿出半天时间,进行错 ...
- webpack学习（三）html-webpack-plugin插件
一.html-webpack-plugin插件 简单创建 HTML 文件,用于服务器访问 例如:我们要为输出文件添加哈希值标记,避免老的不变的文件重新加载,避免新修改的文件受缓存影响. 在前后两次在终 ...
- INFORMATICA 操作流程