✔Заполнение по кругу | CSS - «Учебник CSS»

18 марта 2016 1 836 Справочник CSS / HTML, CSS, JavaScript. 0

Lea Verou предложила конический градиент [w3.org]. Когда браузеры начнут его поддержку реализацию плавного заполнения вероятно можно будет сделать ещё интересней. Сейчас же нужно немного похимичить. И без overflow: hidden; не обойтись.



	.button25 {

	position: relative;

	display: inline-block;

	width: 50px;

	height: 100px;

	border: solid transparent;

	border-width: 0 0 0 50px;

	border-radius: 100px;

	outline: none;

	overflow: hidden;

	-webkit-animation: background1 10s linear infinite;

	animation: background1 10s linear infinite;

	

	.button25:before {

	content: "";

	position: absolute;

	left: -50px;

	height: 100px;

	border-right: 50px solid transparent;

	border-left: 50px solid green;

	border-radius: 100px;

	-webkit-animation: rotate1 10s linear infinite;

	animation: rotate1 10s linear infinite;

	

	@-webkit-keyframes background1 {

	49.999% {border-width: 0 0 0 50px; border-color: transparent;

	50%, 100% {border-width: 0 50px 0 0; border-color: green;

	

	@-webkit-keyframes rotate1 {

	49.999% {left: -50px;

	50% {left: 0px;

	100% {-webkit-transform: rotate(360deg); left: 0px;

	

	@keyframes background1 {

	49.999% {border-width: 0 0 0 50px; border-color: transparent;

	50%, 100% {border-width: 0 50px 0 0; border-color: green;

	

	@keyframes rotate1 {

	49.999% {left: -50px;

	50% {left: 0px;

	100% {transform: rotate(360deg); left: 0px;

	

	

	

	
	.;

Или так. Нажмите на зелёный круг.



	.button26 {

	position: relative;

	display: inline-block;

	width: 50px;

	height: 100px;

	border: solid green;

	border-width: 0 0 0 50px;

	border-radius: 100px;

	outline: none;

	overflow: hidden;

	

	.button26:before {

	content: "";

	position: absolute;

	left: -50px;

	height: 100px;

	border-left: 50px solid transparent;

	border-right: 50px solid green;

	border-radius: 100px;

	

	.button26:focus {

	-webkit-animation: background 10s linear forwards;

	animation: background 10s linear forwards;

	

	.button26:focus:before {

	-webkit-animation: rotate 10s linear forwards;

	animation: rotate 10s linear forwards;

	

	@-webkit-keyframes rotate {

	49.999% {left: -50px;

	50% {left: 0;

	100% {-webkit-transform: rotate(360deg); left: 0;

	

	@-webkit-keyframes background {

	49.999% {border-width: 0 0 0 50px; border-color: green;

	50%, 100% {border-width: 0 50px 0 0; border-color: transparent;

	

	@keyframes rotate {

	49.999% {left: -50px;

	50% {left: 0;

	100% {transform: rotate(360deg); left: 0;

	

	@keyframes background {

	49.999% {border-width: 0 0 0 50px; border-color: green;

	50%, 100% {border-width: 0 50px 0 0; border-color: transparent;