Сегодня в этом блоге вы узнаете, как создать красочный светящийся эффект при наведении курсора, используя только HTML и CSS. Как вы можете видеть на изображении, есть два объекта с красочными светящимися эффектами. Есть одна кнопка с наведением текста и один круг загрузки с таким же текстом наведения. Предполагая, что эти два объекта являются кнопками.
Сначала эти кнопки находятся в начальной стадии, когда на них нет эффектов свечения. Но когда вы наведете на него курсор, он начнет светиться на заднем плане. Если вам трудно понять, что я говорю. Вы можете посмотреть полный видеоурок по этой программе (Colorful Glowing Effect on Hover).
Пример:
Надеюсь, вам понравился этот светящийся эффект, и вы поняли основные коды и концепции. Как вы видели в видео, я использовал HTML и CSS только для создания этой анимации. Если вы новичок и имеете базовые знания HTML и CSS, вы также можете создать этот тип анимации.
Если вам нравится эта программа (Colorful Glowing Effect on Hover) и вы хотите получить исходные коды. Вы можете легко получить исходные коды этой программы. Чтобы получить исходные коды, вам просто нужно прокрутить вниз.
Красочный эффект свечения CSS [Исходные коды]
Для создания этой программы (Colorful Glowing Effect on Hover). Во-первых, вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл.
Сначала создайте файл HTML с именем index.html и вставьте данные коды в свой файл HTML. Помните, что вы должны создать файл с расширением .html.
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Gradient Color Effect | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="center">
<div class="outer button">
<button>Hover Me</button>
<span></span>
<span></span>
</div>
<div class="outer circle">
<button>Hover Me</button>
<span></span>
<span></span>
</div>
</div>
</body>
</html>
Во-вторых, создайте файл CSS с именем style.css и вставьте данные коды в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
CSS КОД:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #000;
}
.center{
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}
.outer{
position: relative;
margin: 0 50px;
background: #111;
}
.button{
height: 70px;
width: 220px;
border-radius: 50px;
}
.circle{
height: 200px;
width: 200px;
border-radius: 50%;
}
.outer button, .outer span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.outer button{
background: #111;
color: #f2f2f2;
outline: none;
border: none;
font-size: 20px;
z-index: 9;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
}
.button button{
height: 60px;
width: 210px;
border-radius: 50px;
}
.circle button{
height: 180px;
width: 180px;
border-radius: 50%;
}
.outer span{
height: 100%;
width: 100%;
background: inherit;
}
.button span{
border-radius: 50px;
}
.circle span{
border-radius: 50%;
}
.outer:hover span:nth-child(1){
filter: blur(7px);
}
.outer:hover span:nth-child(2){
filter: blur(14px);
}
.outer:hover{
background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}
@media (max-width: 640px){
.center{
flex-wrap: wrap;
flex-direction: column;
}
.outer{
margin: 50px 0;
}
}
Вот и все, теперь вы успешно создали красочный светящийся эффект при наведении курсора с помощью HTML и CSS. Если ваш код не работает или вы столкнулись с какими-либо ошибками/проблемами, прокомментируйте или свяжитесь с нами со страницы контактов.