Как остановить перемещение элемента div (скоро)? - PullRequest
Новая
       31

Как остановить перемещение элемента div (скоро)?

0 голосов
/ 09 декабря 2018

Я хочу сделать отзывчивую Скоро появившуюся страницу веб-сайт

, и я добавил скрипт скоро на этом сайте

, и это скрипт загрузки / поступления после его изменения

, но проблема, с которой я сталкиваюсь, когда пытаюсь изменить размер веб-сайта от нуля до загрузки, скоро будет идти вверх, но я просто хочуэто быть под логотипом всегда?это скрипт сайта jsfiddle . 

.responsive {
    max-width: 100%;
    height: auto;
}





#cssload-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 15;
	overflow: hidden;
}

.cssload-loader {
	width: 225px;
	height: 225px;
	border: 2px rgb(245,131,32) solid;
	position: absolute;
	left: 50%;
	top: 65%;
	margin: -113px 0 0 -113px;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
}

.cssload-loader .cssload-loading {
	font-size: 15px;
	position: absolute;
	width: 100%;
	text-align: center;
	line-height: 21px;
	font-family: 'Century Gothic', sans-serif;
	font-style: italic;
	left: 0;
	top: 50%;
	margin-top: 30px;
	color: rgb(0,101,179);
	font-weight: bold;
	text-transform: uppercase;
		-o-text-transform: uppercase;
		-ms-text-transform: uppercase;
		-webkit-text-transform: uppercase;
		-moz-text-transform: uppercase;
}

.cssload-loader-circle-1 {
	width: 207px;
	height: 207px;
	left: 8px;
	top: 8px;
	border: 2px rgb(0,101,179) solid;
	position: absolute;
	border-right-color: transparent;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	animation: spin 3.45s linear infinite;
		-o-animation: spin 3.45s linear infinite;
		-ms-animation: spin 3.45s linear infinite;
		-webkit-animation: spin 3.45s linear infinite;
		-moz-animation: spin 3.45s linear infinite;
}

.cssload-loader-circle-2 {
	width: 189px;
	height: 189px;
	left: 8px;
	top: 8px;
	border: 2px transparent solid;
	position: absolute;
	border-right-color: rgb(245,131,32);
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	animation: spin 5.75s linear infinite;
		-o-animation: spin 5.75s linear infinite;
		-ms-animation: spin 5.75s linear infinite;
		-webkit-animation: spin 5.75s linear infinite;
		-moz-animation: spin 5.75s linear infinite;
}

.cssload-loader .cssload-line {
	width: 15px;
	height: 3px;
	background: rgb(0,101,179);
	position: absolute;
}

.cssload-loader .cssload-line:nth-child(1) {
	left: 24px;
	top: 50%;
	margin-top: -2px;
}

.cssload-loader .cssload-line:nth-child(2) {
	transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
	left: 50px;
	top: 50px;
}

.cssload-loader .cssload-line:nth-child(3) {
	top: 24px;
	left: 50%;
	width: 3px;
	height: 15px;
}

.cssload-loader .cssload-line:nth-child(4) {
	transform: rotate(135deg);
		-o-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
	right: 50px;
	top: 50px;
}

.cssload-loader .cssload-line:nth-child(5) {
	right: 24px;
	top: 50%;
	margin-top: -2px;
}

.cssload-loader .cssload-line:nth-child(6) {
	transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
	right: 50px;
	bottom: 50px;
	background: rgb(245,131,32);
}

.cssload-loader .cssload-subline {
	position: absolute;
	width: 5px;
	height: 3px;
	background: rgb(0,101,179);
}

.cssload-loader .cssload-subline:nth-child(7) {
	transform: rotate(22.5deg);
		-o-transform: rotate(22.5deg);
		-ms-transform: rotate(22.5deg);
		-webkit-transform: rotate(22.5deg);
		-moz-transform: rotate(22.5deg);
	left: 32px;
	top: 75px;
}

.cssload-loader .cssload-subline:nth-child(8) {
	transform: rotate(67.5deg);
		-o-transform: rotate(67.5deg);
		-ms-transform: rotate(67.5deg);
		-webkit-transform: rotate(67.5deg);
		-moz-transform: rotate(67.5deg);
	left: 75px;
	top: 32px;
}

.cssload-loader .cssload-subline:nth-child(9) {
	transform: rotate(112.5deg);
		-o-transform: rotate(112.5deg);
		-ms-transform: rotate(112.5deg);
		-webkit-transform: rotate(112.5deg);
		-moz-transform: rotate(112.5deg);
	right: 75px;
	top: 32px;
}

.cssload-loader .cssload-subline:nth-child(10) {
	transform: rotate(157.5deg);
		-o-transform: rotate(157.5deg);
		-ms-transform: rotate(157.5deg);
		-webkit-transform: rotate(157.5deg);
		-moz-transform: rotate(157.5deg);
	right: 32px;
	top: 75px;
}

.cssload-loader .cssload-subline:nth-child(11) {
	transform: rotate(22.5deg);
		-o-transform: rotate(22.5deg);
		-ms-transform: rotate(22.5deg);
		-webkit-transform: rotate(22.5deg);
		-moz-transform: rotate(22.5deg);
	right: 30px;
	bottom: 74px;
	background: rgb(0,101,179);
}

.cssload-loader .cssload-needle {
	width: 21px;
	height: 21px;
	border: 2px rgb(0,101,179) solid;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -12px 0 0 -12px;
	z-index: 1;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	animation: pegIt 3.45s infinite ease-in-out;
		-o-animation: pegIt 3.45s infinite ease-in-out;
		-ms-animation: pegIt 3.45s infinite ease-in-out;
		-webkit-animation: pegIt 3.45s infinite ease-in-out;
		-moz-animation: pegIt 3.45s infinite ease-in-out;
}

.cssload-loader .cssload-needle:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5.5px 75px 5.5px 0;
	border-color: transparent rgb(245,131,32) transparent transparent;
	position: absolute;
	right: 50%;
	top: 50%;
	margin: -5.5px 0 0 0;
	border-radius: 0 50% 50% 0;
		-o-border-radius: 0 50% 50% 0;
		-ms-border-radius: 0 50% 50% 0;
		-webkit-border-radius: 0 50% 50% 0;
		-moz-border-radius: 0 50% 50% 0;
}





@keyframes pegIt {
	0% {
		transform: rotate(0deg);
	}
	16% {
		transform: rotate(75deg);
	}
	25% {
		transform: rotate(55deg);
	}
	30% {
		transform: rotate(90deg);
	}
	36% {
		transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		transform: rotate(227deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@-o-keyframes pegIt {
	0% {
		-o-transform: rotate(0deg);
	}
	16% {
		-o-transform: rotate(75deg);
	}
	25% {
		-o-transform: rotate(55deg);
	}
	30% {
		-o-transform: rotate(90deg);
	}
	36% {
		-o-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-o-transform: rotate(227deg);
	}
	100% {
		-o-transform: rotate(0deg);
	}
}

@-ms-keyframes pegIt {
	0% {
		-ms-transform: rotate(0deg);
	}
	16% {
		-ms-transform: rotate(75deg);
	}
	25% {
		-ms-transform: rotate(55deg);
	}
	30% {
		-ms-transform: rotate(90deg);
	}
	36% {
		-ms-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-ms-transform: rotate(227deg);
	}
	100% {
		-ms-transform: rotate(0deg);
	}
}

@-webkit-keyframes pegIt {
	0% {
		-webkit-transform: rotate(0deg);
	}
	16% {
		-webkit-transform: rotate(75deg);
	}
	25% {
		-webkit-transform: rotate(55deg);
	}
	30% {
		-webkit-transform: rotate(90deg);
	}
	36% {
		-webkit-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-webkit-transform: rotate(227deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
	}
}

@-moz-keyframes pegIt {
	0% {
		-moz-transform: rotate(0deg);
	}
	16% {
		-moz-transform: rotate(75deg);
	}
	25% {
		-moz-transform: rotate(55deg);
	}
	30% {
		-moz-transform: rotate(90deg);
	}
	36% {
		-moz-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-moz-transform: rotate(227deg);
	}
	100% {
		-moz-transform: rotate(0deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-o-keyframes spin {
	0% {
		-o-transform: rotate(0deg);
	}
	100% {
		-o-transform: rotate(360deg);
	}
}

@-ms-keyframes spin {
	0% {
		-ms-transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes spin {
	0% {
		-moz-transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(360deg);
	}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<center>
<img class='responsive' src='https://2.bp.blogspot.com/-VTCVnBuSn3I/XAxJCeM2HeI/AAAAAAAAAuw/vddRM_bPEgQwkXeFbQ5Uwgd5wlRDwpWPQCLcBGAs/s1600/600.PNG'/>
   </center>

<div id="cssload-wrapper">
	<div class="cssload-loader">
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-loader-circle-1"><div class="cssload-loader-circle-2"></div></div>
		<div class="cssload-needle"></div>
		<div class="cssload-loading">COMING SOON</div>
	</div>
</div>

1 Ответ

0 голосов
/ 09 декабря 2018

Вот, пожалуйста.Я изменил положение часов и избавился от некоторых полей. 

.responsive {
    max-width: 100%;
    height: auto;
}

.logo{
  width:60%;
  margin: auto;
}



#cssload-wrapper {
	position: relative;
	overflow: hidden;
  margin-top: 20px;
}

.cssload-loader {
	width: 225px;
	height: 225px;
	border: 2px rgb(245,131,32) solid;
	position: relative;
	/* left: 50%;
	top: 65%; */
	margin: 0;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
}

.cssload-loader .cssload-loading {
	font-size: 15px;
	position: absolute;
	width: 100%;
	text-align: center;
	line-height: 21px;
	font-family: 'Century Gothic', sans-serif;
	font-style: italic;
	left: 0;
	top: 50%;
	margin-top: 30px;
	color: rgb(0,101,179);
	font-weight: bold;
	text-transform: uppercase;
		-o-text-transform: uppercase;
		-ms-text-transform: uppercase;
		-webkit-text-transform: uppercase;
		-moz-text-transform: uppercase;
}

.cssload-loader-circle-1 {
	width: 207px;
	height: 207px;
	left: 8px;
	top: 8px;
	border: 2px rgb(0,101,179) solid;
	position: absolute;
	border-right-color: transparent;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	animation: spin 3.45s linear infinite;
		-o-animation: spin 3.45s linear infinite;
		-ms-animation: spin 3.45s linear infinite;
		-webkit-animation: spin 3.45s linear infinite;
		-moz-animation: spin 3.45s linear infinite;
}

.cssload-loader-circle-2 {
	width: 189px;
	height: 189px;
	left: 8px;
	top: 8px;
	border: 2px transparent solid;
	position: absolute;
	border-right-color: rgb(245,131,32);
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	animation: spin 5.75s linear infinite;
		-o-animation: spin 5.75s linear infinite;
		-ms-animation: spin 5.75s linear infinite;
		-webkit-animation: spin 5.75s linear infinite;
		-moz-animation: spin 5.75s linear infinite;
}

.cssload-loader .cssload-line {
	width: 15px;
	height: 3px;
	background: rgb(0,101,179);
	position: absolute;
}

.cssload-loader .cssload-line:nth-child(1) {
	left: 24px;
	top: 50%;
	margin-top: -2px;
}

.cssload-loader .cssload-line:nth-child(2) {
	transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
	left: 50px;
	top: 50px;
}

.cssload-loader .cssload-line:nth-child(3) {
	top: 24px;
	left: 50%;
	width: 3px;
	height: 15px;
}

.cssload-loader .cssload-line:nth-child(4) {
	transform: rotate(135deg);
		-o-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
	right: 50px;
	top: 50px;
}

.cssload-loader .cssload-line:nth-child(5) {
	right: 24px;
	top: 50%;
	margin-top: -2px;
}

.cssload-loader .cssload-line:nth-child(6) {
	transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
	right: 50px;
	bottom: 50px;
	background: rgb(245,131,32);
}

.cssload-loader .cssload-subline {
	position: absolute;
	width: 5px;
	height: 3px;
	background: rgb(0,101,179);
}

.cssload-loader .cssload-subline:nth-child(7) {
	transform: rotate(22.5deg);
		-o-transform: rotate(22.5deg);
		-ms-transform: rotate(22.5deg);
		-webkit-transform: rotate(22.5deg);
		-moz-transform: rotate(22.5deg);
	left: 32px;
	top: 75px;
}

.cssload-loader .cssload-subline:nth-child(8) {
	transform: rotate(67.5deg);
		-o-transform: rotate(67.5deg);
		-ms-transform: rotate(67.5deg);
		-webkit-transform: rotate(67.5deg);
		-moz-transform: rotate(67.5deg);
	left: 75px;
	top: 32px;
}

.cssload-loader .cssload-subline:nth-child(9) {
	transform: rotate(112.5deg);
		-o-transform: rotate(112.5deg);
		-ms-transform: rotate(112.5deg);
		-webkit-transform: rotate(112.5deg);
		-moz-transform: rotate(112.5deg);
	right: 75px;
	top: 32px;
}

.cssload-loader .cssload-subline:nth-child(10) {
	transform: rotate(157.5deg);
		-o-transform: rotate(157.5deg);
		-ms-transform: rotate(157.5deg);
		-webkit-transform: rotate(157.5deg);
		-moz-transform: rotate(157.5deg);
	right: 32px;
	top: 75px;
}

.cssload-loader .cssload-subline:nth-child(11) {
	transform: rotate(22.5deg);
		-o-transform: rotate(22.5deg);
		-ms-transform: rotate(22.5deg);
		-webkit-transform: rotate(22.5deg);
		-moz-transform: rotate(22.5deg);
	right: 30px;
	bottom: 74px;
	background: rgb(0,101,179);
}

.cssload-loader .cssload-needle {
	width: 21px;
	height: 21px;
	border: 2px rgb(0,101,179) solid;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -12px 0 0 -12px;
	z-index: 1;
	border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	animation: pegIt 3.45s infinite ease-in-out;
		-o-animation: pegIt 3.45s infinite ease-in-out;
		-ms-animation: pegIt 3.45s infinite ease-in-out;
		-webkit-animation: pegIt 3.45s infinite ease-in-out;
		-moz-animation: pegIt 3.45s infinite ease-in-out;
}

.cssload-loader .cssload-needle:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5.5px 75px 5.5px 0;
	border-color: transparent rgb(245,131,32) transparent transparent;
	position: absolute;
	right: 50%;
	top: 50%;
	margin: -5.5px 0 0 0;
	border-radius: 0 50% 50% 0;
		-o-border-radius: 0 50% 50% 0;
		-ms-border-radius: 0 50% 50% 0;
		-webkit-border-radius: 0 50% 50% 0;
		-moz-border-radius: 0 50% 50% 0;
}





@keyframes pegIt {
	0% {
		transform: rotate(0deg);
	}
	16% {
		transform: rotate(75deg);
	}
	25% {
		transform: rotate(55deg);
	}
	30% {
		transform: rotate(90deg);
	}
	36% {
		transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		transform: rotate(227deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@-o-keyframes pegIt {
	0% {
		-o-transform: rotate(0deg);
	}
	16% {
		-o-transform: rotate(75deg);
	}
	25% {
		-o-transform: rotate(55deg);
	}
	30% {
		-o-transform: rotate(90deg);
	}
	36% {
		-o-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-o-transform: rotate(227deg);
	}
	100% {
		-o-transform: rotate(0deg);
	}
}

@-ms-keyframes pegIt {
	0% {
		-ms-transform: rotate(0deg);
	}
	16% {
		-ms-transform: rotate(75deg);
	}
	25% {
		-ms-transform: rotate(55deg);
	}
	30% {
		-ms-transform: rotate(90deg);
	}
	36% {
		-ms-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-ms-transform: rotate(227deg);
	}
	100% {
		-ms-transform: rotate(0deg);
	}
}

@-webkit-keyframes pegIt {
	0% {
		-webkit-transform: rotate(0deg);
	}
	16% {
		-webkit-transform: rotate(75deg);
	}
	25% {
		-webkit-transform: rotate(55deg);
	}
	30% {
		-webkit-transform: rotate(90deg);
	}
	36% {
		-webkit-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-webkit-transform: rotate(227deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
	}
}

@-moz-keyframes pegIt {
	0% {
		-moz-transform: rotate(0deg);
	}
	16% {
		-moz-transform: rotate(75deg);
	}
	25% {
		-moz-transform: rotate(55deg);
	}
	30% {
		-moz-transform: rotate(90deg);
	}
	36% {
		-moz-transform: rotate(170deg);
	}
	42% {
		transform: rotate(150deg);
	}
	50% {
		-moz-transform: rotate(227deg);
	}
	100% {
		-moz-transform: rotate(0deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-o-keyframes spin {
	0% {
		-o-transform: rotate(0deg);
	}
	100% {
		-o-transform: rotate(360deg);
	}
}

@-ms-keyframes spin {
	0% {
		-ms-transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes spin {
	0% {
		-moz-transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(360deg);
	}
}
<div class="logo">
<img class='responsive' src='https://2.bp.blogspot.com/-VTCVnBuSn3I/XAxJCeM2HeI/AAAAAAAAAuw/vddRM_bPEgQwkXeFbQ5Uwgd5wlRDwpWPQCLcBGAs/s1600/600.PNG'/>
   </div>

<div id="cssload-wrapper" align="center">
	<div class="cssload-loader">
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-line"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-subline"></div>
		<div class="cssload-loader-circle-1"><div class="cssload-loader-circle-2"></div></div>
		<div class="cssload-needle"></div>
		<div class="cssload-loading">COMING SOON</div>
	</div>
</div>
...