12 December 2023

Need For Speed Animasi Banner dengan Teknik Full CSS

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

NEED FOR SPEED atau NFS adalah seri game balap mobil besutan Criterion Games dan didistribusikan oleh EA. Game dengan genre kebut-kebutan di jalan ini merupakan salah satu game terlaris dan bersekuel panjang. Mulai dari NFS 1994 hingga NFS Unbound yang rilis 2022 lalu.

Serial Need For Speed ini umumnya berpusat pada balap jalanan ilegal dan menugaskan para pemain untuk menyelesaikan berbagai jenis balapan sambil menghindari penegakan hukum setempat dalam pengejaran polisi. Seri ini adalah salah satu waralaba tertua EA yang tidak diterbitkan di bawah merek EA Sports.

Game NFS dapat dimainkan pada console PS dibawah Sony Entertainment dan EBox dibawah Microsoft. Dua console besar tersebut membenarkan hal itu bahwa game NFS dapat berjalan pada track dua console yang selalu bersaing memperebutkan pasar para gamers dalam memainkan game. Dengan berbagai keunggulan dan gameplay yang menarik, layak bila NFS disebut sebagai game Racing Terbaik abad ini.



Ini dia video Need For Speed :

@anakrental_ps_ ciri khas lagu sama mobilnya melekat #ps #ps2 #ps2games #fyp #vibeold #needforspeed #nfs #nfsunderground2 #nfsmostwanted #rental #nostalgia #nfsheat ♬ UNDERGROUND 2 - DARKWOLE


Versi Mobile NFS juga sudah tersedia di Playstore. Dirilis pada tahun 2015, Need for Speed : No Limits, dikembangkan secara aktif oleh Firemonkeys Studios, pengembang resmi game Real Racing 3. Serial ini telah diawasi dan memiliki permainan yang dikembangkan oleh beberapa tim terkemuka selama bertahun-tahun termasuk EA Canada, EA Black Box, Slightly Mad Studios dan Ghost Games.

Seri Need For Speed dari Seri Pertama :

01. Need For Speed
02. Need For Speed 2
03. Need For Speed : Hot Pursuit
04. Need For Speed : High Stakes
05. Need For Speed : Porsche Unleashed
06. Need For Speed : Hot Pursuit 2
07. Need For Speed : Underground
08. Need For Speed : Underground 2
09. Need For Speed : Most Wanted
10. Need For Speed : Carbon
11. Need For Speed : Pro Street
12. Need For Speed : Undercover
13. Need For Speed : Shift
14. Need For Speed : Nitro
15. Need For Speed : World
16. Need For Speed : Run
17. Need For Speed : Rivals
18. Need For Speed : No Limits
19. Need For Speed : Payback
20. Need For Speed : Heat
21. Need For Speed : Unbound



NFS versi 1

Need for Speed asli dirilis untuk 3DO pada tahun 1994 dengan versi yang dirilis untuk PC (DOS) pada tahun 1995. PlayStation dan Saturn pada tahun 1996 menyusul tak lama kemudian. Need for Speed dan Edisi Khususnya adalah satu-satunya game dalam seri ini yang mendukung system DOS, program jadul milik Microsoft sebelum Windows lahir.

Dengan rilis berikutnya untuk PC yang hanya berjalan di Windows (tidak termasuk Need for Speed: Carbon yang juga dirilis di Mac OS X) yang dikendarai dan dipacu oleh Apple.

Special Edition

Versi lain yang disebut The Need for Speed : Special Edition, dirilis hanya untuk PC pada tahun 1996. Versi ini menampilkan dukungan untuk jaringan DirectX 2 dan TCP/IP, dua jalur baru pada ethernet di PC dan juga laptop. Namun keduanya tidak lagi populer dan lebih memilih versi yang lebih populer di kemudian hari.

Adegan umum yang diatur ulang setelah kecelakaan, pertanda permainan bergaya arcade yang akan mendominasi seri ini selamanya dan hingga saat ini.

Mobil Eksotik

Need for Speed ​​II atau NFS II menampilkan beberapa kendaraan langka dan eksotik, termasuk kendaraan konsep Ford Indigo serta menampilkan trek bertema pedesaan dari Amerika Utara, Eropa, Asia, dan Australia. Mode balap baru juga diperkenalkan, dijuluki "Knockout", dimana pembalap terakhir yang menyelesaikan putaran akan dieliminasi atau didiskualifikasi.

Pengejaran Polisi

Need for Speed ​​III : Hot Pursuit menambahkan mode Hot Pursuit, dimana pemain berusaha melarikan diri dari polisi atau menjadi polisi, menangkap Speeder. NFS III memanfaatkan kemampuan multimedia dengan menampilkan komentar audio, tayangan slide gambar dan video musik.

Game ini adalah seri pertama yang memungkinkan pengunduhan mobil tambahan dari situs resminya. Alhasil, bermunculanlah komunitas-komunitas modding yang menciptakan kendaraan baru versi mereka sendiri. Versi PC juga merupakan game pertama dalam seri ini yang mendukung perangkat keras Direct3D.

NFS dalam CSS

Yuiii sudah saatnya kembali ke tutorial utama. Sekarang kita akan menampilkan sebuah banner animasi tentang Need for Speed. Banner animasi ini murni menggunakan CSS tanpa kendali Java. Sehingga tetap akan ringan nantinya. Memang bila menggunakan sebuah gambar berformat JPG atau PNG apalagi Gif, dimungkinkan loading animasi banner akan semakin lambat. Tapi tenang saja, dengan CSS semua itu dapat teratasi dengan mudah. Dan kita akan melakukannya sekarang.

Ini dia caranya :

Caranya adalah sebagai berikut :

1. Masuk ke DASHBOARD blogger
2. Pilih TEMA
3. Klik SESUAIKAN : EDIT HTML
4. Cari kode ]]><b:skin/>
5. Tempelkan kode dibawah ini persis diatas kode ]]><b:skin/> tersebut
body {
    background: #222;
    font-family: sans-serif;
}

#base {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 728px;
  height: 90px;
  overflow: hidden;
  background: #FFF;
  border-radius: 0px;
  box-shadow: 10px 10px 10px;
}

.long {
    height: 470%;
    transform: rotate(-3deg);
    position: absolute;
    top: -210px;
    left: -10px;
    animation: long 0.4s ease-in-out infinite;
    animation-direction: alternate-reverse;
}

.title {
    position: absolute;
    height: 70%;
    left: 10px;
    top: 15px;
    filter: drop-shadow(0px 0px 10px #000);
    z-index: 1;
    animation: t 10s ease-in-out infinite;
}

.spin2 {
    position: absolute;
    animation: spin2 10s linear infinite;
}

.spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 25px;
    left: -60px;
    width: 40px;
    height: 40px;
    filter: blur(50%);
    border-radius: 100%;
    border: 10px solid blue;
    border-top-color: blue;
    border-bottom-color: red;
    animation: spinner 0.4s linear infinite;
    animation-direction: alternate-reverse;
    filter: blur(30px) brightness(15);
}

.slid1 {
    position: absolute;
    background-color: white;
    height: 300px;
    width: 800px;
    top: -100px;
    left: -10px;
    transform: rotate(10deg);
    z-index: 2;
    animation: s1 10s ease infinite;
}

.but {
    color: white;
    position: absolute;
    top: 40px;
    left: 350px;
    height: 35px;
    width: 180px;
    border: none;
    border-radius: 6px;
    outline: none;
    background: linear-gradient(45deg, #a6075b, #fe0034, #fe0034);
    box-shadow: 0px 0px 20px 0.5px #000;
    cursor: pointer;
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    animation: b 2s linear infinite;
    z-index: 1;
}

.butd {
    position: absolute;
    animation: butd 10s ease-in-out infinite;
}

a:link,
a:visited {
    color: azure;
    text-decoration: none;
}

.ea {
    position: absolute;
    height: 70%;
    top: 13px;
    left: 320px;
    z-index: 3;
    animation: ea 10s ease infinite;

}

.ps {
    position: absolute;
    height: 100%;
    left: 1700px;
    z-index: 3;
    animation: ps 10s ease-in-out infinite;
}

.x {
    position: absolute;
    height: 70%;
    top: 11.5px;
    left: 1700px;
    z-index: 3;
    animation: x 10s ease-in-out infinite;

}

.h2 {
    position: absolute;
    height: 300px;
    width: 180px;
    top: -100px;
    left: 800px;
    background: linear-gradient(45deg, #a6075b, #fe0034, #fe0034);
    transform: rotate(10deg);
    z-index: 6;
    animation: h2 10s ease-in-out infinite;

}

.h1 {
    color: white;
    position: absolute;
    text-align: center;
    top: 100px;
    left: 10px;
    padding-top: 20px;
    height: 90px;
    width: 160px;
    border: none;
    outline: none;
    font-size: 20px;
    font-family: 'Raleway', sans-serif;
    font-weight: bolder;
    animation: h 10s ease-in-out infinite;
    transform: rotate(-10deg);
    z-index: 6;
}

@keyframes h2 {
    30% {
        left: 1500px;
    }

    70% {
        left: 558px;
    }

    90% {
        left: 558px;
    }

    99% {
        left: 1500px;
    }
}

@keyframes ps {
    30% {
        left: 1500px;
    }

    60% {
        left: 385px;
    }

    90% {
        left: 385px;
    }

    99% {
        left: 1500px;
    }
}

@keyframes x {
    30% {
        left: 1700px;
    }

    65% {
        left: 475px;
    }

    89% {
        left: 475px;
    }

    99% {
        left: 1700px;
    }
}

@keyframes t {
    0% {
        left: 800px;
    }

    20% {
        left: 5px;
    }

    21% {
        left: 10px;
    }
}

@keyframes butd {
    0% {
        top: 500px;
    }

    20% {
        top: 0px;
    }
}

@keyframes b {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(1deg);
    }

    50% {
        transform: rotate(-1deg);
    }

    60% {
        transform: rotate(1deg);
    }

    70% {
        transform: rotate(0deg);
    }

    80% {
        transform: rotate(0deg);
    }

    90% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes ea {
    0% {
        left: 320px;
    }

    30% {
        left: 1500px;
    }

    60% {
        left: 320px;
    }
}

@keyframes s1 {
    0% {
        left: -5px;
    }

    30% {
        left: 1500px;
    }

    55% {
        left: 300px;
    }

    90% {
        left: 300px;
    }
}

@keyframes long {
    0% {
        left: -12px;
        top: -212px;
    }

    50% {
        left: -13px;
        top: -210px;
    }
}

@keyframes spin2 {
    0% {
        left: -60px;
    }

    25% {
        left: -60px;
    }

    30% {
        left: 120px;
    }

    80% {
        left: 120px;
    }

    99% {
        left: 120px;
    }
}

@keyframes spinner {
    0% {
        opacity: 0;
    }

    50% {
        transform: rotate(360deg)
    }
}


6. Selanjutnya klik SAVE
7. Masuk TATA LETAK
8. Pilih TAMBAH HTML/JAVASCRIPT
9. Tempelkan kode dibawah ini di konten kosong yang tersedia disitu
<div id="base"><a href="https://www.alifacode.com" target="_blank">
        <div>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbYCfdYCn5gViF9GaerMeK8s-hjmHfyBU3UeghswHYp9T0vwdvoA8pEwrEXoDWWSeXLkaeBLEGxwK4gAFInF0KaSEebDW0weSuKBqJ9ACKYAzlfS5i9P9jww-jg4XuxxPiwfazkgRqDxPdTMAJ9Dnim2PCuoJIhdjvLXE-lyupJ__vYfzSug2pyXYkDkA/s1600/BG-Alifacode.com%20NFS.jpg" class="long" alt="run">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo8bbJrpObUgGSrRE3nAfknybeusxpzU8wkvd-vkf4hVOd6h2GIzSHF3iLjGgH8psz6OxGkwnkotgPtY6fT6mb2avrj_RJy_mXkzxigpeuKNO4L6z0U1UROBcm5YTYdSuGUmqekUKZ2hesKpsex325nwm3npRzr9_bESpcvfhQfOik7Y9AzncrAyonJGg/s50/FAVICON.webp" class="title" alt="nfs-payback">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0w5qhLJpDK9hjnYb98_ZYXAdoRmePHXnCVjOBSg9qU3QXxtiNVrhz1Gc9q_5VE90ONKRtsMvjyRyRVnUj-DG4cZZYJEcU_VfORVvVE66MErq8iJPpTT2weU3lN-8Cppg8obqfDjsvRWMf78bIx4w6aoORH3zfF8nhuTAohp0eQfxBylmU3csOzqpxgc/s1600/EA%20Alifacode.com%20NFS.png" class="ea" alt="ea">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj6sr79HAhi6XbX9d8Lj43TEgTxo3W0y6KBzoaqkmpt-6MKDkNLE34KLjdTBjYQl81KQEYUhvr1y7fp1BqSWJ62j35DMK1mS0BKtby97DbckwGM81Ms49MKkGrEqCr500QZteK148sK48LxRtPWN2p4YpQqhMz5SDSKkAUF6JLYFEiqJUaX89r5UHmcx8/s1600/PS%20Alifacode.com%20NFS.png" class="ps" alt="ps4">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIF_lbbNl1Ge1rLAE6xLi7ExbmB9OEbEL9OwSMXIE1HE_4zH9tseOBSjR8k9Hw67BwO7HvrRIMDMDxQpCMTHBGiCrqx75XAB0fskVCwXtIod-CUO1bgTbjmmciqIG8KEIwHqIPKxetpmsT5ZaPiaibdYHgobf1k64XN-gzTsV-FxWepS2TsHrzDV23rYw/s1600/XBox%20Alifacode.com%20NFS.ico" class="x" alt="xbox-one">
            <div class="spin2">
                <div class="spinner"></div>
            </div>
            <div class="slid1"></div>
            <div class="butd">
              <button class="but">Need for Speed</button>
            </div>
            <div class="h2">
                <h class="h1">Black <br> Edition</h>
            </div>
        </div>
    </a>
</div>


10. Save lagi dan Publikasikan.
11. Lihat blog kalian dan sudah muncul itu Banner Animasi NFS-nya.




Balap mobil (bahasa Inggris: auto racing) adalah suatu cabang olahraga yang melibatkan kendaraan. Balap mobil merupakan salah satu cabang olahraga tontonan yang paling diminati dan juga yang paling dikomersialisasi. Balap mobil pertama kali muncul pada tahun 1895, dan kini menjadi salah satu olahraga paling populer di dunia.

Mobil balap adalah mobil yang digunakan untuk balap. Mobil balap tidak sama karakteristiknya dengan mobil harian. Pada mobil balap banyak aspek yang telah berubah dari kondisi standar mobil, misalnya beberapa perangkat yang sudah berubah dari mesin, dashboard, sistem kendali, dan lainnya.

Banyak orang besar terlahir dari balap mobil seperti Ayrton Senna di Formula Satu, Sebastien Loeb dari Kejuaraan Reli Dunia (WRC), dan Dale Earnhardt dalam NASCAR. Kesemuanya menorehkan tinta emas dan kenangan yang tak terlupakan pada cerita panjang perjalanan kejuaraan racing mobil.

Hingga dari situlah, awal mula game NFS lahir dan menjadi pioner dari game racing yang patut mendapatkan acungan jempol karena inovasi dan visualisasi yang sangat memanjakan mata para pemain yang mengidolakan kecepatan balapan mobil. Di penghujung acara, tidak lupa saya ucapkan terima kasih yang sudah mampir dan membaca artikel ini.

Selamat malam. Salam Satu Aspal Tiga Pedal .. Gasss Maszehhh

Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Need For Speed Animasi Banner dengan Teknik Full CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon