- 0
Asked by
d0ublezer0,
-
Similar Content
-
By ZeteM
Всем привет! Пытаюсь сделать анимацию так, чтобы второй блок появлялся только после того, как первый полностью уйдёт влево. Ну просто никак, пыталась нагуглить, но получается только одновременное движение двух блоков. Может, кто-то опытный хотя бы намекнёт, что не так в моём коде?
https://codepen.io/20ZeteM02/pen/WNwwEEp
-
By Libiros
Всем привет! Столкнулся со следующей проблемой:
Верстаю макет на Bootstrap и столкнулся с тем, что не получается нормально отпозиционировать элементы, имеющие, во-первых, свойство
transform: rotate(-90deg); во-вторых, абсолютное позиционирование для того, чтобы прилепить их к правому краю экрана.
Итак, вот исходный код файлов:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <title>Туризм</title> </head> <body> <div class="container-fluid turism_main"> <div class="row"> <div class="company-name"> <p>LuckyFox</p> <p>Travel</p> </div> <div class="aside_main col-xs-12"> <a href="#"><img src="img/afterparty.png" alt=""></a> </div> </div> <div class="aside-content"> <div class="aside-contact"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i> Связаться с нами </div> <div class="aside-mail"> <i class="fa fa-envelope-o" aria-hidden="true"></i> Подписаться </div> <div class="aside-calendar"> <a href="#">Календарь</a> </div> <div class="aside-lang"> <span class="active">EN</span> / RU </div> </div> </div> </body> </html> А вот здесь style.css:
.turism_main { background: gray; background-size: cover; height: 100vh; width: 100vw; color: #fff; position: relative; } .company-name { font-size: 2em !important; letter-spacing: 2px; opacity: .7; position: absolute; right: 45%; left: 45%; text-align: center !important; display: block; line-height: 1; margin-top: 15px; width: 200px; } .aside_main { text-align: right; padding: 0; } .aside-content { z-index: 999; position: absolute; right: -195px; top: 400px; transform: rotate(-90deg); font-size: .8em; background: black; } .aside-content div, .aside-content a{ display: inline-block; color: white; } .aside-content i { padding-right: 10px; color: #e9ba02; font-weight: bold; } .aside-contact, .aside-mail { padding: 5px 10px 5px 10px; border: 1px solid white; margin-right: 20px; } .aside-calendar, .aside-lang { margin-left: 20px; } Не спрашивайте меня, почему я сделал кривую строку .row и засунул в нее эту ссылку справа. Изначально можно было сделать ее position: absolute, я так и сделал, но потом стал мучаться с сабжем и переделал, в надежде, что поможет.
Если вам потребуется вообще переделать напрочь весь .aside-*, то пожалуйста, лишь бы было понятно, почему вы это делаете. Потому что мне нужно понять.
И еще есть один вопрос:
Почему, когда я вписываю что-то в .aside-content , то он начинает ехать влево? Ведь у него не увеличивается ни длина, ни ширина. А если я увеличиваю width, например, то он тоже уезжает далеко...
Еще раз повторю задачу:
Нужно сделать так, чтобы весь блок .aside-content был прилеплен к правому краю и каким-то образом был адаптирован, если я уменьшаю экран по вертикали. В данный момент этот блок просто под .container-fluid ...
Как быть?
Сначала решил не прикреплять картинку, потом, все же, решил. Чтобы было нагляднее...
-
By Vic-Tor
Как сделать анимацию цикличной?
Есть блок, который маячит, привлекает, но делает он это всего 1 раз.
Как и можно ли с помощью всего лишь css придать ему цикличность с заданными пробелами (остановками).
Пример:
.info-box {background : #c2ddf9;border : #CD0000 solid 1px;color : #CD0000; font-weight : 700; animation: spin 0.050s linear 3s alternate;animation-iteration-count: 10;}@keyframes spin { 0% {transform: scale(1.05, 1.05);}100% {transform: scale(0.9, 0.9);}}
Спасибо!
-
By veremey
Привет. У меня возникла проблема:
Есть такой пентагон, который при клике на пункт меню поворачивается в его сторону https://yadi.sk/i/Xv1jCEZkghMH6
проблема в том, что пентагон должен крутиться по короткому пути к активному пункту.
-
By Евгений_SB
Ребят помогите разобраться почему не работает свойство rotate и как сделать что бы по клику на .list:after список выпадал?
Заранее спасибо огромное
скрин списка
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"></head><body><div class="list"> <select name="lictsat" id="lictsat"> <option selected="Home">HomePage</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> <option value="firstchaild">firstchaild</option> </select></div> </body></html>* { margin: 0; padding: 0;}.list { margin: 50px;}.list select { padding: 6px 30px; color: #888; text-transform: uppercase; width: 185px; height:30px;}.list:after { content: "< >"; padding: 6px; margin: 0px -38px 0px; cursor:pointer; background: #eee; transform:rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); -webkit-transform:rotate(90deg);}
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
d0ublezer0
http://leveler.ru/i-icons/demo.html
Cлепил из svg набор иконок в icomoon, приклеил анимацию вращения. Не вращается
В найденном примере вроде всё так же. Но при этом - работает:
https://codepen.io/Keyamoon/pen/aHxuq
Что я сделал не так?
UPD: не хватало
Edited by d0ublezer0Link to comment
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.