純CSS3文字Loading動(dòng)畫(huà)特效
純CSS3文字Loading動(dòng)畫(huà)特效
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>純CSS3文字Loading動(dòng)畫(huà)特效</title>
<style>
body {
background:#000;
}
#load {
position:absolute;
width:600px;
height:36px;
left:50%;
top:40%;
margin-left:-300px;
overflow:visible;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
}
#load div {
position:absolute;
width:20px;
height:36px;
opacity:0;
font-family:Helvetica, Arial, sans-serif;
animation:move 2s linear infinite;
-o-animation:move 2s linear infinite;
-moz-animation:move 2s linear infinite;
-webkit-animation:move 2s linear infinite;
transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
color:#35C4F0;
}
#load div:nth-child(2) {
animation-delay:0.2s;
-o-animation-delay:0.2s;
-moz-animation-delay:0.2s;
-webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
animation-delay:0.4s;
-o-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
animation-delay:0.6s;
-o-animation-delay:0.6s;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
animation-delay:0.8s;
-o-animation-delay:0.8s;
-moz-animation-delay:0.8s;
-webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
animation-delay:1s;
-o-animation-delay:1s;
-moz-animation-delay:1s;
-webkit-animation-delay:1s;
}
#load div:nth-child(7) {
animation-delay:1.2s;
-o-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
}
@keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left: 41%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
@-moz-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
@-webkit-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-webkit-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
@-o-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
</style>
</head>
<body>
<!-- <div id="load">
<div>G</div>
<div>N</div>
<div>I</div>
<div>D</div>
<div>A</div>
<div>O</div>
<div>L</div>
</div> -->
<div id="load">
<div><img src="./images/laohu.png"></div>
<div><img src="./images/laohu.png"></div>
<div><img src="./images/laohu.png"></div>
<div><img src="./images/laohu.png"></div>
<div><img src="./images/laohu.png"></div>
<div><img src="./images/laohu.png"></div>
</div>
</body>
</html>
本文鏈接：http://jmtianhui.com/news/details-12-854.html
版權(quán)聲明：
1：本站所有內(nèi)容均由互聯(lián)網(wǎng)收集整理、上傳，并且以計(jì)算機(jī)技術(shù)研究交流為目的，僅供大家參考、學(xué)習(xí)，不存在任何商業(yè)目的與商業(yè)用途，如描述有誤或者學(xué)術(shù)不對(duì)之處歡迎及時(shí)提出，不甚感謝。
2、 如涉及版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們4724325@qq.com第一時(shí)間處理；
我們從以下三個(gè)方面，對(duì)比純靜態(tài)和偽靜態(tài)兩種靜態(tài)頁(yè)面生成方式，逐一展開(kāi)分析。
用JS的正則表達(dá)式如何判斷輸入框內(nèi)為中文或者是英文數(shù)字，或者是三者混編
css制作扇形
PhpStorm 2022.1 EAP 3 在 PHPDoc 和屬性中添加了對(duì)多行和嵌套數(shù)組形狀的完全支持：在這種情況下，可以使用數(shù)組形狀注釋定義數(shù)組結(jié)構(gòu)，以獲得鍵的代碼補(bǔ)全并推斷值的類型。
PHP作為Web界第一大語(yǔ)言近年來(lái)熱度不夠，但是這幾年的進(jìn)步和成長(zhǎng)卻沒(méi)有中斷。在2022伊始，我們來(lái)一起學(xué)習(xí)一下目前PHP的現(xiàn)狀以及最新版本帶來(lái)的特性。
Linux程序前臺(tái)后臺(tái)切換：在Linux終端運(yùn)行命令的時(shí)候，在命令末尾加上 & 符號(hào)，就可以讓程序在后臺(tái)運(yùn)行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
Python 的正則表達(dá)式支持 多行模式，將每行文字分別匹配。然而各種操作系統(tǒng)里，換行符的表示法各不相同，會(huì)導(dǎo)致 Python 不能正確使用多行模式。
彈性布局，又稱“Flex布局”，是由W3C老大哥于2009年推出的一種布局方式?？梢院?jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。而且已經(jīng)得到所有主流瀏覽器的支持，我們可以放心大膽的使用。