61 lines
1.7 KiB
CSS
61 lines
1.7 KiB
CSS
body {
|
|
background: #f5f7fa;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cdefs%3E%3Cstyle%3E.f%7Bfont-family:serif;font-size:18px;fill:%23003366;opacity:0.1%7D%3C/style%3E%3C/defs%3E%3Ctext x='20' y='40' class='f'%3E∫%3C/text%3E%3Ctext x='200' y='100' class='f'%3E∑%3C/text%3E%3Ctext x='80' y='180' class='f'%3E∂%3C/text%3E%3Ctext x='300' y='250' class='f'%3E∇%3C/text%3E%3Ctext x='150' y='320' class='f'%3E∞%3C/text%3E%3CanimateTransform attributeName='transform' type='translate' values='0,0; 10,10; 0,0' dur='20s' repeatCount='indefinite'/%3E%3C/svg%3E");
|
|
background-size: 400px 400px;
|
|
animation: bgScroll 60s linear infinite;
|
|
}
|
|
|
|
@keyframes bgScroll {
|
|
from { background-position: 0 0; }
|
|
to { background-position: 400px 400px; }
|
|
}
|
|
|
|
header, main, footer {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Ограничение максимального размера всех изображений */
|
|
main img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
margin: 20px auto;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Специальные классы для управления размером */
|
|
.img-left {
|
|
float: left;
|
|
max-width: 300px;
|
|
margin: 0 20px 20px 0;
|
|
}
|
|
|
|
.img-right {
|
|
float: right;
|
|
max-width: 300px;
|
|
margin: 0 0 20px 20px;
|
|
}
|
|
|
|
.img-center {
|
|
max-width: 500px;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.img-thumbnail {
|
|
max-width: 150px;
|
|
border: 2px solid #ddd;
|
|
} |