Membuat Captain America’s Shield Animation

Sharing Teknologi – Membuat Captain America’s Shield Animation Effect HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Captain America’s Shield Animation HTML CSS Di WordPress. 

HTML (Hypertext Markup Language) adalah bahasa markah yang digunakan untuk membuat struktur dan mengatur konten pada laman web. Dengan HTML, Anda dapat membuat elemen seperti teks, gambar, tautan, dan formulir. Setiap elemen memiliki tanda awal dan akhir dalam bentuk tag, yang menentukan peran dan penampilan elemen tersebut. HTML juga memungkinkan pembuatan hierarki dengan menggunakan elemen genap dan ganjil.

CSS (Cascading Style Sheets) adalah bahasa gaya yang digunakan untuk mengatur tampilan dan desain laman web yang telah dibuat dengan HTML. Dengan CSS, Anda dapat mengubah warna, ukuran, jarak, dan banyak lagi pada elemen-elemen HTML. Ini memungkinkan pemisahan antara struktur (HTML) dan tampilan (CSS), sehingga perubahan desain dapat diterapkan dengan mudah tanpa mengubah struktur konten.

Kombinasi HTML dan CSS membantu menciptakan laman web yang menarik dan responsif. HTML menyediakan struktur dasar laman web, sementara CSS mengontrol penataan, gaya, dan tata letak elemen-elemen tersebut. Dengan cara ini, pengguna dapat mengalami pengalaman yang lebih baik saat menjelajahi laman web yang didesain dengan baik.

Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Captain America’s Shield Animation Menggunakan HTML CSS. 

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Captain America’s Shield Animation

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan. 

Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.

HTML

<div class="position-relative p-3 my-1 overflow-hidden">
<div class="captainamerica">
	<div class="shield__wrapper">
		<div class="star__wrapper">
			<div class="star"></div>
		</div>
		<div class="center-circle"></div>
		<div class="inner-ring-first"></div>
		<div class="inner-ring-second"></div>
		<div class="outer-ring"></div>
	</div>
</div>
</div>

Style CSS

:root {
	--shield-light-blue: #0041b9;
	--shield-dark-blue: #0b1a42;
	--shield-red: #a10010;
	--shield-light-white: #fcfafa;
	--shield-dark-white: #e6e3ec;
	--star-white: #e9e9e9;
}

.captainamerica {
	width: 100%;
	min-height: 600px;
	background: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0;
	margin: auto;
}

.captainamerica .shield__wrapper {
	width: 100%;
	height: 600px;
}

.captainamerica .star__wrapper {
	width: 400px;
	height: 400px;
	overflow: hidden;
	position: absolute;
	top: 300px;
	left: 300px;
	z-index: 5;
}

.captainamerica .star {
	width: 0;
	height: 0;
	color: var(--shield-dark-white);
	border-right: 192px solid transparent;
	border-bottom: 130px solid var(--shield-dark-white);
	border-left: 193px solid transparent;
	position: absolute;
	top: 120px;
	left: 6px;
	transform: rotate(10deg);
}

.captainamerica .star::before {
	width: 0;
	height: 0;
	content: "";
	display: block;
	border-right: 65px solid transparent;
	border-bottom: 140px solid var(--star-white);
	border-left: 65px solid transparent;
	position: absolute;
	left: -130px;
	bottom: -40px;
	transform: rotate(-34deg);
}

.captainamerica .star::after {
	width: 0;
	height: 0;
	content: "";
	display: block;
	border-right: 190px solid transparent;
	border-bottom: 130px solid var(--shield-dark-white);
	border-left: 190px solid transparent;
	position: absolute;
	left: -190px;
	top: 10px;
	transform: rotate(-70deg);
}

.captainamerica .center-circle {
	width: 400px;
	height: 400px;
	background-color: var(--shield-light-blue);
	background-image: linear-gradient(
		to bottom right,
		var(--shield-light-blue),
		var(--shield-dark-blue)
	);
	border-radius: 50%;
	position: absolute;
	bottom: -96px;
	left: 300px;
	z-index: 4;
}

.captainamerica .inner-ring-first {
	width: 600px;
	height: 600px;
	background-color: var(--shield-red);
	background-image: linear-gradient(to bottom right, red, var(--shield-red));
	border-radius: 50%;
	position: absolute;
	bottom: -200px;
	left: 200px;
	z-index: 3;
}

.captainamerica .inner-ring-second {
	width: 800px;
	height: 800px;
	background-color: var(--shield-white);
	background-image: linear-gradient(
		to bottom right,
		var(--shield-light-white),
		var(--shield-dark-white)
	);
	border-radius: 50%;
	position: absolute;
	bottom: -300px;
	left: 100px;
	z-index: 2;
}

.captainamerica .outer-ring {
	width: 1000px;
	height: 1000px;
	background-color: var(--shield-red);
	background-image: linear-gradient(to bottom right, red, var(--shield-red));
	border-radius: 50%;
}

/* Responsive - keep watermelon from exploding apart */
@media screen and (max-height: 770px) {
	.captainamerica .shield__wrapper {
		transform: scale(0.4);
	}
}

@media screen and (max-width: 700px) {
	.captainamerica .shield__wrapper {
		transform: scale(0.4);
	}
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.