Плавное появление боков сайта на чистом CSS3 by Славик Краморенко
|
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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
.body2 { display: block; width: 100%; height: 100%; min-height: 500px; } .hd { width: 90%; height: 25%; margin: auto; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,ededed+100;White+3D+%231 */ background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); /* IE6-9 */ padding: 5px; opacity: 1; margin-top: 2%; border-radius: 10px; } .header { animation-name: Header; animation-duration: 3s; } @keyframes Header { 0% { opacity: 0; } 34% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 1; } } .cc { width: 20%; min-height: 200%; background-color: aquamarine; left: 5.1%; margin-top: 3%; position: absolute; opacity: 1; border-radius: 10px; padding-bottom: 30px; } .cont { animation-name: cont; animation-duration: 3s; } @keyframes cont { 0% { opacity: 0; } 33% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } .cs { position: absolute; width: 68%; height: 200%; right: 5.1%; min-height: 10%; margin-top: 3%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,ededed+100;White+3D+%231 */ background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); /* IE6-9 */ opacity: 1; border-radius: 10px; padding-bottom: 30px; } .content { animation-name: contentr; animation-duration: 3s; } @keyframes contentr { 0% { opacity: 0; } 20% { opacity: 0; } 66% { opacity: 1; } 100% { opacity: 1; } } |
|
1 2 3 4 5 |
<div class="body2"> <div class="hd header"></div> <div class="cc cont"></div> <div class="cs content"></div> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
