Пример:
HTML:
|
1 2 3 4 |
<div class="control play"> <span class="left"></span> <span class="right"></span> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
.control-wrap { text-align: center; } .control, .control * { box-sizing: content-box; letter-spacing: 0; } .control { border: 11px solid #337AB7; border-radius: 50%; margin: 20px; padding: 28px; width: 112px; height: 112px; font-size: 0; white-space: nowrap; text-align: center; cursor: pointer; } .control, .control .left, .control .right, .control:before { display: inline-block; vertical-align: middle; transition: border 0.2s, width 0.2s, height 0.2s, margin 0.2s; } .control:before { content: ""; height: 112px; } .control.pause .left, .control.pause .right { margin: 0; border-left: 36px solid #337AB7; border-top: 0 solid transparent; border-bottom: 0 solid transparent; height: 98px; } .control.pause .left { border-right: 22px solid transparent; } .control.play .left { margin-left: 18px; border-left: 48px solid #337AB7; border-top: 28px solid transparent; border-bottom: 28px solid transparent; border-right: 0px solid transparent; height: 56px; } .control.play .right { margin: 0; border-left: 48px solid #337AB7; border-top: 28px solid transparent; border-bottom: 28px solid transparent; height: 0px; } .control:hover { border-color: #2d6b9f; } .control:hover .left, .control:hover .right { border-left-color: #2d6b9f; } |
JS:
|
1 2 3 |
$('.control').on('click', function() { $(this).toggleClass('pause play'); }); |
Найдено на codepen.io у пользователя Caroline Artz
Добавить комментарий: