歐某,竟然實作一週ㄌ
還這麼弱的網頁,可見小公主可能真的沒有程式的天份跟興趣?????
哭ㄌ
新增功能:
酷動畫
來源:酷動畫集
html:
<!DOCTYPE html>
<html>
<head>
<title>little_princess_web</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="title">
<h1>歡迎光臨小公主網頁嘗試集!</h1>
<h2>訂單網頁嘗試集_實作</h2>
<link rel="stylesheet" href="homepage.css">
</div>
<body>
<Marquee direction=right behavior="altemate" >小公主海底世界盛大開幕!!</Marquee>
<div class="wrapper">
<div class="line line1">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
<div class="line line2">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
<div class="line line3">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
<div class="line line4">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
<div class="line line5">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
<div class="line line6">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
<div class="line line7">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
<div class="line line8">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
<div class="line line9">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
<div class="line line10">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
<div class="line line11">
<span class="circle circle-top"></span>
<div class="dotted">
<span class="dot dot-top"></span>
<span class="dot dot-middle-top"></span>
<span class="dot dot-middle-bottom"></span>
<span class="dot dot-bottom"></span>
</div>
<span class="circle circle-bottom"></span>
</div>
</div>
<footer>
<p style="color: #fff">Inspired by <a href="https://dribbble.com/shots/1763719-DNA-GIF"><img src="https://d13yacurqjgara.cloudfront.net/assets/dribbble-ball-dnld-5992b20594860fdfef86a503773447ae.png" alt="dribble"></a></p>
</footer>
</body>
<ul class="drop-down-menu">
<li><a href="https://ithelp.ithome.com.tw/users/20151423">關於小公主</a>
</li>
<li><a href="https://ithelp.ithome.com.tw/articles/10291522">30天鐵人賽目標計畫</a>
</li>
<li><a href="https://ithelp.ithome.com.tw/users/20151423/ironman/5260">30天鐵人賽網頁連結</a>
</li>
<li><a href="./day25.html">小公主販售ㄉ海底世界</a>
</li>
</ul>
<h3>welcome to little_princess_web</h3>
<h3>這裡是小公主,小公主的訂購網頁似乎真的產不出來</h3>
<h3>但目前還是有建立起這個酷東西</h3>
<br>
<img src="./photo/IMG_4003拷貝.jpg" alt="me">
<!-- 回到頂端按鈕 start -->
<script>
//<![CDATA[
(function () {
$("body").append("<img id='goTopButton' style='display: none; z-index: 5; cursor: pointer;' title='回到頂端'/>");
var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARMAAAC3CAMAAAAGjUrGAAAAdVBMVEX///8AAADS0tJeXl78/PyLi4v5+fnr6+sFBQX29vbg4ODc3NxISEhpaWm3t7fw8PCEhIQbGxulpaXMzMzBwcFBQUFRUVEXFxd6enpXV1cQEBCrq6s4ODiZmZknJycsLCyQkJChoaFycnI8PDxlZWW7u7t3d3c8rhJlAAAFA0lEQVR4nO2daUPiMBCGExjSg3KIyCUo7rr+/5+4SUE53l5Qd2va9/mKxfRhMtNMU1CKEOI/IqbpIfw4RCZKmh7Ej0JExUlAKeeIyFr3DZ2cIWagtR5YNU2P5Mcgaqwdc8VEm+JiI15aI6HexIyUFFuFJwt9YD0xjBSHmKkOQ51GypS1xyHqWZ8YU4pTMnw4c/IwpBQlk0SHZ1KSSdMjahqbYH/pS1YdLz1ymUwOPDc9qmYR6YXgRPe6HSnBFpXo30F3nYiSUYaSUH90NlDEqLcMJY6Z6qyVudYZ6cTxKJ1c+YgKXnPCROtt0MlIkeg9L0osow4qsae8z505jl33rvFFHvN9HFNK02P8z4iKX4qixPIadyxSjFmXhInW/a6VnkGZkTDU+y45+exJF0vRetydSBG5aCPl8xJ3xomKkpL8+hkpi6gbkSJGSpPJF4NOKEl70mGVMEnpRINJ1HBzg5NNB65SRIKk8sxxJO1vMBlZVcqvJz6aHvK/B3vSZTyrlm/CKFv5ZbBpdc9aZPJ048xxJJMWB4qYrJ50OaOoxVJmdylpcc9a7kkmR9qaUqSgJ13Gaxs3Rdq1XHRfMjkwamNGMWpXQ4nrWbcOcTe4avHY9Cl8P3G1NlI+L3G7Zo+oqF/PiF1J96NWFR9R05pR4ti3aeFTP5kcmLcpUOKX69ML07ZS4drn+sVQvwzb4kTc1sYMngqK8yJ7ri1aklIkJ5nsol6+k74aZt4o3LficlaMZN3gGg2VKnSizPh3xuQaN30+34L08MrkaW5sCSl0YsMryJhcy2HT51MbsSs/aCM97KL0xeI4SZ9hwSVSYnyfPvbEVtdn9Ss+dkOKnRwOn1+l51BPPVdiV37XPekk3b5X2Ykys4upF7qetddWLnOGPZ/X2VnolztJCa7LlucNpqtksgpEzK1ORHqLixeTib9O7Mf59dCFu2xdD9VF2Fd04o6Zb4/vkTIy3j61LvJ2FiXbsbnqNFd14g6b7MOzq5WZv1sw3MrvuKzZ7HEX8A1O7JHDswd9wkc/86zI2UMX71mXWpWdHN9wfkor28DLQBHpfwb79o/JCvbbnLgu96kujzxMKLa+7PUhLS53OV9ZcWOcOFxdPqTanX+BYr7aSKNA5WTEO5yoU132rmctEj+kH2jitoh/pxMl420aK8vAs+Ijh570Zlb0TS/3OHFPQh3Xy+++NZjSrY2roLCrfJ8TMea4Xh54VJDtR+naSEnZjL/LSfoPlJk/6fS7QXyxIu4G1/I5Kvu7u50465O3pX7wZp912pMeROVbRu53kr63rcsLX1aDxnwselJhrtdw4hDzmKw8cSK9seSV3wvqOrFpZdyrP97/QtXPrqaT6v/oJ1BxrJ1yUpHaTloInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJQicInSB0gtAJUuSkhT9fVokCJ2tffjTzuwmmgzyeu+qE+MBfxuUzRpoJohsAAAAASUVORK5CYII=",
locatioin =1/2, // 按鈕出現在螢幕的高度
right = 1, // 距離右邊 px 值
opacity = 1, // 透明度
speed = 500, // 捲動速度
$button = $("#goTopButton"),
$body = $(document),
$win = $(window);
$button.attr("src", img);
$button.on({
mouseover: function() {$button.css("opacity", 1);},
mouseout: function() {$button.css("opacity", opacity);},
click: function() {$("html, body").animate({scrollTop: 0}, speed);}
});
window.goTopMove = function () {
var scrollH = $body.scrollTop(),
winH = $win.height(),
css = {"top": winH * locatioin + "px", "position": "fixed", "right": right, "opacity": opacity};
if(scrollH > 15) {
$button.css(css);
$button.fadeIn("slow");
} else {
$button.fadeOut("slow");
}
};
$win.on({
scroll: function() {goTopMove();},
resize: function() {goTopMove();}
});
} )();
//]]>
</script>
</body>
</html>
css
.title{
height: 100px;
text-align:center;
text-shadow: 0.1em 0.1em 0.05em #3368f7
}
ul { /* 取消ul預設的內縮及樣式 */
margin: 0;
padding: 0;
list-style: none;
}
img{
width: 500px;
position: relative;
padding-left:450px;
}
h3{
position: relative;
text-align: center;
}
ul.drop-down-menu {
border: #ccc 1px solid;
display: inline-block;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 29px;
margin-left: 120px;
margin-top: 20px;
}
ul.drop-down-menu li {
position: relative;
white-space: nowrap;
border-right: #ccc 1px solid;
}
ul.drop-down-menu > li:last-child {
border-right: none;
}
ul.drop-down-menu > li {
float: left; /* 只有第一層是靠左對齊*/
}
ul.drop-down-menu a {
background-color: #fff;
color: #333;
display: block;
padding: 0 30px;
text-decoration: none;
line-height: 40px;
}
ul.drop-down-menu a:hover { /* 滑鼠滑入按鈕變色*/
background-color: #3368f7;
color: #fff;
}
ul.drop-down-menu li:hover > a { /* 滑鼠移入次選單上層按鈕保持變色*/
background-color: #3368f7;
color: #fff;
}
table{
position: relative;
margin-left:auto;
margin-right:auto;
text-align: left;
border-style: groove;
border: collapse 3px;
}
h2{
text-align: center;
}
Marquee{
color: rgb(52, 175, 251);
size: 33%;
position: relative;
margin-top: 5px;
text-align: center;
font-size: larger;
}
/* 40px */
.toTop-arrow {
width: 2.5rem;
height: 2.5rem;
padding: 0;
margin: 0;
border: 0;
border-radius: 33%;
opacity: 0.6;
background: #000;
cursor: pointer;
position:fixed;
right: 1rem;
bottom: 1rem;
display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
width: 18px;
height: 5px;
border-radius: 3px;
background: #f90;
position: absolute;
content: "";
}
.toTop-arrow::before {
transform: rotate(-45deg) translate(0, -50%);
left: 0.5rem;
}
.toTop-arrow::after {
transform: rotate(45deg) translate(0, -50%);
right: 0.5rem;
}
.toTop-arrow:focus {outline: none;}
.square {
width: 100px;
height: 100px;
background: blue;
display: block;
position: relative;
/* animation 參數設定 */
animation-name: MoveToRight; /*動畫名稱,需與 keyframe 名稱對應*/
animation-duration: 4s; /*動畫持續時間,單位為秒*/
animation-delay: 2s; /*動畫延遲開始時間*/
animation-iteration-count: infinite; /*動畫次數,infinite 為無限次*/
}
body{
background-color: white;
}
footer{
position: absolute;
margin-top: 300px;
}
footer a{
color: #F5E53A;
}
footer img{
width: 32px;
height: 32px;
vertical-align: middle;
}
.wrapper{
position: absolute;
float: left;
margin: 140px 100px;
}
.line{
position: absolute;
top: 0px;
width: 2px;
height: 8px;
background-color: red;
}
.circle{
position: absolute;
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: blue;
}
.circle-top{
top: 0px;
left: -3.5px;
}
.circle-bottom{
bottom: 0px;
left: -3.5px;
}
.dot{
position: absolute;
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
left: -1.5px;
}
.line1{
margin-left: 0px;
background-color: #2410CB;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > span{
background-color: #D4141E;
}
.line1 > .dotted > .dot{
background-color: #D4141E;
}
.line1 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line1 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
}
.line2{
margin-left: 35px;
background-color: #852DF4;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
}
.line2 > span{
background-color: #FC7E48;
}
.line2 > .dotted > .dot{
background-color: #FC7E48;
}
.line2 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
}
.line2 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
}
.line2 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
}
.line2 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
}
.line3{
margin-left: 70px;
background-color: #F42DF1;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
}
.line3 > span{
background-color: #EDEB29;
}
.line3 > .dotted > .dot{
background-color: #EDEB29;
}
.line3 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
}
.line3 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
}
.line3 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
}
.line3 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
}
.line4{
margin-left: 105px;
background-color: #F91396;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
}
.line4 > span{
background-color: #ACED29;
}
.line4 > .dotted > .dot{
background-color: #ACED29;
}
.line4 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
}
.line4 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
}
.line4 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
}
.line4 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
}
.line5{
margin-left: 140px;
background-color: #D4141E;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
}
.line5 > span{
background-color: #4EF02B;
}
.line5 > .dotted > .dot{
background-color: #4EF02B;
}
.line5 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
}
.line5 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
}
.line5 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
}
.line5 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
}
.line6{
margin-left: 175px;
background-color: #FC7E48;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
}
.line6 > span{
background-color: #38E790;
}
.line6 > .dotted > .dot{
background-color: #38E790;
}
.line6 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
}
.line6 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
}
.line6 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
}
.line6 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
}
.line7{
margin-left: 210px;
background-color: #EDEB29;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
}
.line7 > span{
background-color: #25EACC;
}
.line7 > .dotted > .dot{
background-color: #25EACC;
}
.line7 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
}
.line7 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
}
.line7 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
}
.line7 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
}
.line8{
margin-left: 245px;
background-color: #ACED29;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
}
.line8 > span{
background-color: #309CDF;
}
.line8 > .dotted > .dot{
background-color: #309CDF;
}
.line8 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
}
.line8 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
}
.line8 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
}
.line8 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
}
.line9{
margin-left: 280px;
background-color: #4EF02B;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
}
.line9 > span{
background-color: #2544E7;
}
.line9 > .dotted > .dot{
background-color: #2544E7;
}
.line9 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
}
.line9 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
}
.line9 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
}
.line9 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
}
.line10{
margin-left: 315px;
background-color: #38E790;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
}
.line10 > span{
background-color: #852DF4;
}
.line10 > .dotted > .dot{
background-color: #852DF4;
}
.line10 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
}
.line10 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
}
.line10 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
}
.line10 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
}
.line11{
margin-left: 350px;
background-color: #25EACC;
-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
}
.line11 > span{
background-color: #F42DF1;
}
.line11 > .dotted > .dot{
background-color: #F42DF1;
}
.line11 > .dotted > .dot-top{
top: 0px;
-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
}
.line11 > .dotted > .dot-bottom{
bottom: 0px;
-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
}
.line11 > .dotted > .dot-middle-top{
top: 0px;
-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
}
.line11 > .dotted > .dot-middle-bottom{
bottom: 0px;
-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
}
@-webkit-keyframes line{
0%{height: 4px; top: 0px; left: 0px; -webkit-transform: rotate(-65deg)}
10%{height: 220px; top: -110px; left: 15px;}
45%{height: 200px; top: -100px; left: 25px;}
70%{height: 8px; top: 0px; left: 25px; -webkit-transform: rotate(0deg);}
100%{height: 8px; top: 0px; left: 15px; -webkit-transform: rotate(0deg);}
}
@-webkit-keyframes dot-top{
0%{top: -30px}
10%{top: -30px;}
45%{top: -25px;}
60%{top: 0px;}
100%{top: 0px;}
}
@-webkit-keyframes dot-bottom{
0%{bottom: -30px}
10%{bottom: -30px;}
45%{bottom: -25px;}
60%{bottom: 0px;}
100%{bottom: 0px;}
}
@-webkit-keyframes dot-middle-top{
0%{}
10%{}
45%{top: 98px;}
70%{top: -50px;}
85%{top: 0px;}
100%{top: 0px;}
}
@-webkit-keyframes dot-middle-bottom{
0%{}
10%{}
45%{bottom: 98px;}
70%{bottom: -50px;}
85%{bottom: 0px;}
100%{bottom: 0px;}
}
@keyframes line{
0%{height: 4px; top: 0px; left: 0px; transform: rotate(-65deg)}
10%{height: 220px; top: -110px; left: 15px;}
45%{height: 200px; top: -100px; left: 25px;}
70%{height: 8px; top: 0px; left: 25px; transform: rotate(0deg);}
100%{height: 8px; top: 0px; left: 15px; transform: rotate(0deg);}
}
@keyframes dot-top{
0%{top: -30px}
10%{top: -30px;}
45%{top: -25px;}
60%{top: 0px;}
100%{top: 0px;}
}
@keyframes dot-bottom{
0%{bottom: -30px}
10%{bottom: -30px;}
45%{bottom: -25px;}
60%{bottom: 0px;}
100%{bottom: 0px;}
}
@keyframes dot-middle-top{
0%{}
10%{}
45%{top: 78px;}
70%{top: -50px;}
85%{top: 0px;}
100%{top: 0px;}
}
@keyframes dot-middle-bottom{
0%{}
10%{}
45%{bottom: 78px;}
70%{bottom: -50px;}
85%{bottom: 0px;}
100%{bottom: 0px;}
}
var.img{
width: 100px;
}