Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2019, 17:15
Аватар для fenix_63
Аспирант
Отправить личное сообщение для fenix_63 Посмотреть профиль Найти все сообщения от fenix_63
 
Регистрация: 05.06.2014
Сообщений: 92

Анимированный border
Всем привет. Хочу закрасить у блока border при наведении курсора, по аналогии как вот тут сделано:

https://codepen.io/giana/full/yYBpVY/


Вот мой код: https://jsfiddle.net/aum95wto/

А именно самый первый блок Draw.

Пока у меня есть вот такой вот код:

<div class="center">
		<div class="block">
			123
		</div>
	</div>


Стили:

.center{
			width: 80%;
			margin: 0 auto;
		}

		.block{
			width: 100px;
			height: 100px;
			border-color: blue;
			box-shadow: inset 0 0 0 2px blue;
			border: 0;
			transition: color 1s;
			/*animation: left_to_right 0.5s ease-in-out infinite alternate;*/	
		}

		.block:hover{
			border-color: red;
		}

		.block::before{
			top: 0;
    		left: 0;
    		width: 0;
		    height: 0;
			border: 2px solid transparent;
		}

		.block::after{
			bottom: 0;
    		right: 0;

    		width: 0;
		    height: 0;
			border: 2px solid transparent;
		}

		.block:hover::before{
			border-top-color: red;
			border-right-color: red;
			transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
			width: 100%;
			height: 100%;
		}

	
		.block:hover::after{
			border-bottom-color: red;
			border-left-color: red;
			transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
			width: 100%;
			height: 100%;
		}


Но нужного эффекта так и не происходит. Вообще при наводке курсора ничего не происходит. Помогите пожалуйста, что я делаю не так.

P.S. Возможно тут JS-анимация требуется, и CSS будет недостаточно, поэтому и пишу сюда.
Ответить с цитированием
  #2 (permalink)  
Старый 17.01.2019, 17:58
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

<button>Hello</button>
<button>Codepen</button>
<button>Rolling Text</button>
<style>
	html {
		background: #1a1a20;
		font: bold 200% monospace;
	}
	
	button {
		--color: white;
		--hover-color: #f06;
		background: none;
		border: 0;
		padding: 1em 2em;
		box-shadow: inset 0 0 0 3px var(--color);
		color: var(--color);
		position: relative;
		transition: color .25s;
		font: inherit;
	}

	button::before,
	button::after {
		box-sizing: inherit;
		content: '';
		position: absolute;
		border: 3px solid transparent;
		width: 0;
		height: 0;
	}

	button::before {
		top: 0;
		left: 0;
	}

	button::after {
		bottom: 0;
		right: 0;
	}

	button:hover {
		color: var(--hover-color);
	}

	button:hover::before,
	button:hover::after {
		width: 100%;
		height: 100%;
	}

	button:hover::before {
		border-top-color: currentColor;
		border-right-color: currentColor;
		transition:
			width .25s ease-out,
			height .25s ease-out .25s;
	}

	button:hover::after {
		border-bottom-color: currentColor;
		border-left-color: currentColor;
		transition:
			border-color 0s ease-out .5s,
			width .25s ease-out .5s,
			height .25s ease-out .75s;
	}

</style>


Это в ширину и высоту растягиваются псевдо-элементы.

Последний раз редактировалось Malleys, 17.01.2019 в 18:04.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
border shadow в таблице rafaello (X)HTML/CSS 4 20.07.2016 12:08
Помогите с рандомными значениями злобная_пипа Элементы интерфейса 6 02.10.2015 21:11
Анимированный счётчик балерун Общие вопросы Javascript 8 15.11.2013 14:52
Анимированный курсор Marakaya Javascript под браузер 9 16.08.2012 18:43
Разбор вложенных структур (парсинг CSS) monolithed Общие вопросы Javascript 17 29.01.2012 21:26