کد css 3 لودینگ جدید گوگل

با سلام بعد از چند هفته بالاخره وقت کردم در خدمتتون باشم . این بار با یه کد اومدم . کد html و css3 لوگو گوگل همراه با لودینگ جدید گوگل

با ما همراه باشید

google-loading

ابتدا برای ساخت صفحه html از تگ های یک صفجه ساده شروع میکنیم. و کد های محتوا هم درون تگ <body> قرار میدیم

<html>

<head>

<title>لوگو گوگل - وب نما</title>

</head>

<body>

<h1>
    <span>G</span>
    <span>o</span>
    <span>o</span>
    <span>g</span>
    <span>l</span>
    <span>e</span>
</h1>
<span class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</span>

</body>

</html>

خب تا اینجا محتوا رو انجام دادیم . بریم سراغ استایل . همیشه دقت داشته باشید که استایل ها رو تو فایل جدا از محتوا قرار بدید

پس فرض میکنیم فایل style.css ما در همان پوشه اصلی کنار فایل html مان قرار دارد . پس با این تفاسیر باید برای متصل شدن استایل به سندمون باید از کد زیر تو تگ <head> بزاریم

<link rel="stylesheet" href="style.css" type="text/css" />

پس کد های html ما در اینجا به این صورت میشه!

<html>

<head>

<title>لوگو گوگل - وب نما</title>

<link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>

<h1>
    <span>G</span>
    <span>o</span>
    <span>o</span>
    <span>g</span>
    <span>l</span>
    <span>e</span>
</h1>
<span class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</span>

</body>

</html>

حالا بریم سراغ استایل ها . این کد های پایینی رو تو فایل style.css قرار بدید

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 4em;
  text-align: center;
  letter-spacing: -10px;
  font-weight: lighter;
}
h1 span:first-child {
  color: #4285f4;
}
h1 span:nth-child(2) {
  color: #db4437;
}
h1 span:nth-child(3) {
  color: #f4b400;
}
h1 span:nth-child(4) {
  color: #4285f4;
}
h1 span:nth-child(5) {
  color: #0f9d58;
}
h1 span:nth-child(6) {
  color: #db4437;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotatee(-20deg);
  transform: rotate(-20deg);
  display: inline-block;
}
.container {
  display: block;
  width: 122px;
  margin: 100px auto;
}
div {
  height: 20px;
  width: 20px;
  position: absolute;
  border-radius: 50%;
  background: #000;
  display: inline-block;
}
div:first-child {
  animation: move 1s ease-in-out infinite alternate;
  background: #4285f4;
  margin-left: 0;
}
div:nth-child(2) {
  animation: move 1s ease-in-out -0.25s infinite alternate;
  margin-left: 35px;
  background: #db4437;
}
div:nth-child(3) {
  animation: move 1s ease-in-out -0.5s infinite alternate;
  margin-left: 70px;
  background: #f4b400;
}
div:nth-child(4) {
  animation: move 1s ease-in-out -0.75s infinite alternate;
  margin-left: 105px;
  background: #0f9d58;
}
@-moz-keyframes move {
  ۰% {
    transform: translateY(-10px);
  }
  ۱۰۰% {
    transform: translateY(5px);
  }
}
@-webkit-keyframes move {
  ۰% {
    transform: translateY(-10px);
  }
  ۱۰۰% {
    transform: translateY(5px);
  }
}
@-o-keyframes move {
  ۰% {
    transform: translateY(-10px);
  }
  ۱۰۰% {
    transform: translateY(5px);
  }
}
@keyframes move {
  ۰% {
    transform: translateY(-10px);
  }
  ۱۰۰% {
    transform: translateY(5px);
  }
}

سوالی داشتید در قسمت نظرات بگید

موفق باشید.

به زودی در این مکان تب زیبا برای لینک های دانلود قرار میگیرد

دانلود با لینک مستقیم

منبع : webnma.com

خشایار توکلی

وب نما با هدف ایجاد یک مرجع کامل در زمینه آموزش وردپرس ، افزونه وردپرس و قالب وردپرس از سال 1394 پا به عرصه وب گذاشت. ما در وب نما سعی می کنیم همواره به نیاز های شما کاربران عزیز در زمینه وردپرس فارسی پاسخ دهیم.قصد داریم به شما کمک کنیم تا سایتی پر قدرت راه اندازی کنید و تبدیل به مشتری همیشگی ما شوید.

اضافه کردن دیدگاه

تماس با ما

جهت تماس با مدیر وب سایت با شماره 09307957745 در تماس باشید یا به این ایمیل webnma.com@gmail.com پیام دهید