<div class="sun"></div>
* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 1rem;
	min-height: 100vh;
	background: linear-gradient(to bottom, deepSkyBlue 20%, lightSteelBlue);
	background-attachment: fixed;
}

.sun {
	width: 40rem;
	height: 40rem;
	margin: 3rem auto;
	position: relative;
	background: radial-gradient(transparent 50%, white), radial-gradient(yellow, transparent 70%);
	-webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
	mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
	border-radius: 50%;
	
	&::after,
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform-origin: center;
		border-radius: 50%;
		-webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
	mask-image: radial-gradient(rgba(0, 0, 0, 1.0) 40%, transparent 65%);
	}
	
	&::before {
		background: repeating-conic-gradient(from 0deg, yellow 0deg 20deg, transparent 20deg 40deg);
		animation: rotate 720s linear, scale 3s linear infinite;
	}
	
	&::after {
		background: radial-gradient(yellow, orange 27%, transparent calc(27% + 3px) 100%), radial-gradient(gold, transparent 70%), repeating-conic-gradient(from 0deg, gold 0deg 5deg, transparent 5deg 10deg);
		transform: rotate(15deg);
		animation: rotate 360s linear;
	}
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes scale {
	0% {
		transform: scale(1);
	}
	20% {
		transform: scale(1.2);
	}
	40% {
		transform: scale(0.8);
	}
	60% {
		transform: scale(1.1);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.