Блок с анимированными волнами на CSS3
|
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 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
.box { width: 300px; height: 300px; border-radius: 5px; box-shadow: 0 2px 30px rgba(0,0,0,0.2); background: #fbfcee; position: relative; overflow: hidden; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); margin: 20px 100px; } .wave { opacity: .4; position: absolute; top: 3%; left: 50%; background: #0af; width: 500px; height: 500px; margin-left: -250px; margin-top: -250px; -webkit-transform-origin: 50% 48%; transform-origin: 50% 48%; border-radius: 43%; -webkit-animation: drift 3000ms infinite linear; animation: drift 3000ms infinite linear; } .wave.-three { -webkit-animation: drift 2500ms infinite linear; animation: drift 2500ms infinite linear; } .wave.-two { -webkit-animation: drift 5000ms infinite linear; animation: drift 5000ms infinite linear; opacity: .1; background: #ff0; } .box:after { content: ''; display: block; left: 0; top: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top,#e8a,rgba(221,238,255,0) 80%,rgba(255,255,255,0.5)); background: linear-gradient(to bottom,#e8a,rgba(221,238,255,0) 80%,rgba(255,255,255,0.5)); z-index: 11; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .title { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; line-height: 300px; text-align: center; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); color: #fff; text-transform: uppercase; font-family: tahoma; letter-spacing: .4em; font-size: 24px; text-shadow: 0 1px 0 rgba(0,0,0,0.1); text-indent: .3em; } @-webkit-keyframes drift { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes drift { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } |
|
1 2 3 4 5 6 |
<div class='box'> <div class='wave -one'></div> <div class='wave -two'></div> <div class='wave -three'></div> <div class='title'>ВОЛНЫ</div> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
