CSS3 — реализация эффекта блеска шрифта при разблокировке iPhone

CSS

0. Предисловие

Вы еще помните, когда айфон скользил для разблокировки, на слове подсказки мигала белая лампочка, это было очень круто, поэтому я вдруг заинтересовался и захотел сделать белую лампочку при наведении мышки на шрифт( имитируя палец), и вспыхнул белый свет И еще, эффект подсветки шрифта.

滑动解锁.png

1. Идеи

В первую очередь необходимо сделать наклонный белый свет, который используется для достижения эффекта «освещения купели».

Paste_Image.png

После того, как этот шаг сделан, следующая вещь проста, то есть пусть сначала исчезнет белый свет, а затем, когда мышь наведет курсор на шрифт, белый свет появится и пересечет шрифт.

2. Производство белого света

Как вы можете видеть на картинке выше, край белого света не меняется напрямую с белого на черный, а постепенно меняется на черный. Поэтому, когда мы делаем этот белый свет, нам нужно использовать градиенты в CSS.<linear-gradient>

  1. Производственный процесс

    1. Во-первых, давайте создадим div и установим простой центрированный стиль по умолчанию.

    Код:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
  body{
    margin: 0;	
  }
  div{
    width: 700px;
    height: 200px;
    border: 1px solid black;
    margin: 0 auto;
  }
</style>
</head>
<body>
  <div></div>
</body>
</html>

 运行结果：

Paste_Image.png

  1. Установите градиент.

Настройте градиент от «Черный-> Белый-> Черный» с наклоном под углом.

Код:

background: -webkit-linear-gradient(-45deg,
  #000 100px,
  #FFF 140px,
  #FFF 220px,
  #000 260px);
/*角度设定的是-45°*/

На данный момент текущий результат:

Paste_Image.png

另外，关于渐变的起始方向角度问题说明：
1.如果没有设置渐变的方向和角度，那么默认是由上到下渐变；
2.如果设置了渐变的方向，那么就按照设置的方向来，
  如：设置了 <background: -webkit-linear-gradient(right,red,yellow，blue)> 
  渐变方向就是自右往左依次为红色，黄色，蓝色。
3.可以设置top right，right bottom，left bottom，top left，表示分别从 对应的四个角开始渐变
4.可以设置角度。线性渐变的角度开始是在X轴的负半轴为起点逆时针开始算的。这里角度设置的是-45°，
  所以，由左上角到右下角依次渐变。
  1. установить фоновый текст

На этом этапе у некоторых людей могут возникнуть вопросы: почему вы хотите установить фоновые слова отдельно?

Потому что здесь есть неясная ловушка!

Что это такое, я не буду объяснять здесь сначала, а будут конкретные явления, которые будут представлены вам позже.

Вот общая настройка шрифта.

font-size: 50px;
text-align: center;
line-height: 200px;
color: white;
/*设置的文字是：啦啦啦啦啦啦啦啦德玛西亚！！*/
  1. Эффект скольжения белого света

По этому поводу и говорить нечего.Пусть сначала исчезнет белый свет.При наведении мышки на div белый свет появляется,а потом пересекает.

直接上：

background-position: -1000px,0px;

Эффект:Paste_Image.png

эм... эм, как ситуация? ?

Ну и фон повторяется. Обязательно установите background-repeat здесь: no-repeat; (примечание: шрифт белый, поэтому текст пока отображаться не будет)

Установите динамический псевдокласс:

div:hover{
  background-position: 1000px,0px;
  transition:all 5s;
}

Для эффекта мы устанавливаем цвет фона всего тела на черный.

Эффект, когда мышь не перемещается по div, отображается только текст, а когда мышь помещается на div, поперек будет белый свет.

2.gif

3.фоновый клип: текст

Белый свет сделан, но он не такой, как мы себе представляли.

Вы знаете, результат отговорки, которую мы хотим, состоит в том, чтобы только подсветить текст, а не позволить вам провести по нему, как лазер.

Итак, на этот раз мы будем использовать тег:<background-clip:text>

Значение этой метки: все остальные фоны, кроме текста, могут быть удалены. Это позволит добиться нашего эффекта.

Однако следует отметить, что этот тег должен иметь префикс браузера при его использовании, потому что многие браузеры вообще не могут распознать его, когда нет префикса браузера.

Смотрите результаты напрямую.

Paste_Image.png

Нани? ! Почему это не работает? А как же мой белый свет?

В это время вы обнаружите, что при перемещении мыши вверх ничего не происходит. Феномен проходящего мимо белого света исчез!

Он действительно исчез?

Конечно нет, белый свет здесь действительно есть, но он заблокирован текстом.

Помните, почему я раньше выносил текст настройки отдельно? Потому что, если текст просто задает цвет один, это не сработает. Нам нужно придать тексту прозрачность, чтобы белый свет фона мог просвечивать сквозь текст.

В это время мы должны использовать метод rgba, чтобы установить цвет текста, чтобы придать тексту определенную степень прозрачности.

<color:rgba(255,255,255,0.1);>

Таким образом достигается эффект, который мы хотим подсветить шрифту. (^__^)

1.gif

Общий код прилагается ниже:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			margin: 0;
			background: #000;
		}
		div{
			width: 1000px;
			height: 200px;
			border: 1px solid black;
			margin: 0 auto;
			font-size: 70px;
			text-align: center;
			line-height: 200px;
			color:rgba(255,255,255,1);
			background: -webkit-linear-gradient(-45deg,
				#000 100px,
				#FFF 140px,
				#FFF 220px,
				#000 260px);
			/*角度设定的是-45°*/
		background-position: -1000px,0px;
		background-repeat: no-repeat;
		 -webkit-background-clip: text;
		}
		div:hover{
			background-position: 1000px,0px;
			transition:all 5s;
		}
	</style>
</head>
<body>
	<div>啦啦啦啦啦啦啦啦德玛西亚！！</div>
</body>
</html>
Категории