Jump to content
Sign in to follow this  
Guest '?-SlawkA-?'

'NFS Hot Pursuit Style Loader'

Recommended Posts

Guest

Loader на тип загрузки игры NFS Hot Pursuit.

Смотрится красиво, можно использовать за место логотипа.

anigif.gif.bcb9c7b1762cceeb5b93b6fc40940d9d.gif

Я же для теста прописал его в footer

Примерно вот так:

1.png.b1ba25fc8e4135d0a884de727f1cdd84.png

И так сам код: Вставляем где хотим видеть лоадер.

		<ul class="loader">
			<li>E</li>
			<li>T</li>
			<li>S</li>
			<li>2</li>
			<li>A</li>
			<li>T</li>
			<li>S</li>
                <li>M</li>
			<li>O</li>
			<li>D</li>
			<li>S</li>
			<li>.</li>
			<li>R</li>
			<li>U</li>
		</ul>

Это вставляем в custom.css

h1 {
	font-family: "palatino linotype", sans-serif;
	color: #0abcde;
	margin: 50px 0 50px 50px;
	}

	.loader li {
	background: #0abcde;
	margin-left: 1px;
	width: 20px;
	height: 30px;
	display: inline-block;
  opacity: 0;
	border-radius: 2px;
	box-shadow: 0px 0px 5px #0abcde;
	transform: skew(-25deg, 0deg) scale(0.1);
	animation: loader .8s ease-in-out infinite alternate;
	}

	@keyframes loader {
	  to {
	    transform: skew(-25deg, 0deg) scale(1);
      opacity: 1;
    }
  }

	.loader li:nth-child(2){
	  animation-delay:0.2s;
	}
	.loader li:nth-child(3){
	  animation-delay:0.4s;
	}
	.loader li:nth-child(4){
	  animation-delay:0.6s;
	}
	.loader li:nth-child(5){
	  animation-delay:0.8s;
	}
	.loader li:nth-child(6){
	  animation-delay: 1s;
	}
	.loader li:nth-child(7){
	  animation-delay: 1.2s;
	}
	.loader li:nth-child(8){
	  animation-delay:1.4s;
	}
	.loader li:nth-child(9){
	  animation-delay:1.6s;
	}
	.loader li:nth-child(10){
	  animation-delay:1.8s;
	}
	.loader li:nth-child(11){
	  animation-delay:2.0s;
	}
	.loader li:nth-child(12){
	  animation-delay: 2.2s;
	}
	.loader li:nth-child(13){
	  animation-delay: 2.4s;
	}
.loader li:nth-child(14){
	  animation-delay: 2.6s;
	}

И так, сколько букв вставлено к коде, столько мы дописываем в CSS.

Пример я добавил букву    

<li>E</li>

она первая в очереди, а в CSS я вставляю

    .loader li:nth-child(2){
      animation-delay:0.2s;
    }

когда вставляю второй код с другой буквой, то в коде CSS я пишу уже 3 и ставлю миллисекунды на 0.4

2 это номер буквы в коде.

0.2s это миллисекунды, через которое будет срабатывать появление буквы или эффекта.

как видите в коде CSS миллисекунды прибавляются на 0.2 мс

тем самым идет эффект перехода, на GIFке всё видно.

Или же можно в живую посмотреть у меня на сайте, в стиле Стандартный стиль.

  • Like 1

Share this post


Link to post
Share on other sites
Guest

Тоже делаем с помощью svg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Language
  • стиль

2020 © cmsmafia.ru

×
×
  • Create New...

Important Information

Privacy Policy