Membuat Linkaran dengan CSS

Cipeget.com
23:54 WIB
Membuat Linkaran dengan CSS
Linkaran dengan CSS

Beberapa waktu yang lalu saya berbagi teknik untuk membuat segitiga dengan menggunakan CSS. Tahun lalu, saya telah memposting segitiga CSS, terutama ketika mencari untuk membuat tooltips atau elemen desain dengan pola pointer. Ada bentuk umum lain yang mudah untuk membuatnya, dan itu adalah lingkaran. Menggunakan border-radius, Anda dapat membuat lingkaran CSS yang indah.

CSS

Mengatur border-radius setiap sisi elemen 50% akan membuat tampilan lingkaran:

.circle {
	border-radius: 50%;
	width: 200px;
	height: 200px; 
	/* width and height can be anything, as long as they're equal */
}

Ini benar-benar sederhana ... tapi di posting kali ini kita sedikit menyentuh gradien CSS dan dasar animasi berputar:

/* Create the animation blocks */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Spinning, gradient circle; CSS only! */
#advanced {
	width: 200px;
	height: 200px;
	
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	
	animation-name: spin; 
	animation-duration: 3s; /* 3 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}

Silahkan copas coba di komputer anda masing masing

Set animasi lingkaran bisa bertindak sebagai animasi loading; penggunaan kreatif dari lingkaran terserah Anda.