В сегодняшнем видео-кратком совете я покажу вам изящную технику: мы будем использовать простой и простой CSS для имитации событий кликов. Ключ должен использовать псевдокласс Полезный :target .
Окончательный источник
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″ />
<title></title>
<style>
figure { background: #e3e3e3;
#zoom {
width: 200px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
/* Compliance = IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#zoom:target {
width: 400px;
}
</style>
</head>
<body>
<h1> «Click» Effect with CSS </h1>
<figure>
<img id=»zoom» src=»http://d2o0t5hpnwv4c1.cloudfront.net/871_dryEE/dry-ee.png» alt=»EE» />
<figcaption>
<ul>
<li>
<a href=»#zoom»>Zoom In</a>
</li>
<li>
<a href=»#»>Zoom Out</a>
</li>
</ul>
</figcaption>
</figure>
</body>
</html>
|
Вывод
Так что ты думаешь? Довольно аккуратно, а? Кроме того, в комментариях я хотел бы знать, что вы думаете о том, как я использовал элемент figcaption для размещения ссылок «Zoom», связанных с изображением. Как вы думаете, это справедливое использование элемента? Спасибо за просмотр!