کد css 3 لودینگ جدید گوگل - خدمات وردپرس وب نما | خدمات وردپرس وب نما

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

بازگشت

به جایی که از آن میآیید
Want create site? Find Free WordPress Themes and plugins.

با سلام بعد از چند هفته بالاخره وقت کردم در خدمتتون باشم . این بار با یه کد اومدم . کد 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);
  }
}

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

موفق باشید.

Did you find apk for android? You can find new Free Android Games and apps.

با عضویت در کانال تلگرامی وب نما از آخرین مطالب آموزشی محصولات اطلاعیه ها . تخفیف ها و ... مطلع شوید

همین حالا عضو میشم

0 دیدگاه در "کد css 3 لودینگ جدید گوگل"

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *