HTML Coding

29,542 questions in this forum

1. Анимация градиента

   Всем привет. Подскажите, как сделать плавное изменение градиента? Есть код: #change { border-top: 1px solid silver; background-color: #555; color: #ccc; width: 300px; height: 200px; background: -webkit-linear-gradient(top, white, black); -webkit-animation: 'grad' 3s infinite ease; } @-webkit-keyframes 'grad' { from {background: linear-gradient(top, white, black);} to {background: linear-gradient(top, black, white);} } Но он не работает. Пробовал указывать ключевые кадры - работает, но слишком громоздко получается. Может быть есть вариант по лучше? А то раздувать код не хочется, ведь слишком толсто будет..

   Asked by Sandr, January 27, 2013

   0 votes
   6 answers
2. Анимация - процесс идет

   Во время ajax - запроса нужно отображать иконку - анимацию, мол "Процесс идет". Часики песочные или точки бегают по кругу (как в винде) или тп. Где качнуть такоя?

   Asked by torsar, July 24, 2021

   0 votes
   1 answer
3. Анимация border

   Здравствуйте. Не получается реализовать эффект Задача: чтобы ширина нижнего бордера плавно уменьшалась из центра к бокам. С левой линий все просто. Но как добиться уменьшения ширины правой линии? (т..е. в направлении слева направо) Код того, что получилось: codepen.io

   Asked by BehemothOz, March 29, 2016

   0 votes
   2 answers
4. Анимация circle chart

   Здравствуйте. Как осуществить такую анимацию - https://dribbble.com/shots/1296229-Animation-Rectify-Stats От нее нужен сам круг и цифры в центре, ну и эффект тоже. На SVG? Вдруг у кого-то есть пример, поделитесь, пожалуйста.

   Asked by kattiperk, August 10, 2016

   • animation
   • svg
   0 votes
   12 answers
5. Анимация css

   Есть пример: http://jsfiddle.net/WqZGF/ . Возможно ли сделать плавный раскрывание и закрывание на CSS без явного указания высоты и JavaScript?

   Asked by afdw, July 13, 2014

   • анимация
   • css
   0 votes
   2 answers
6. Анимация css3

   Переписал весь код, который нашёл и почему ничего не происходит? http://jsfiddle.net/D3WX2/ Я только сейчас начал изучать анимацию

   Asked by DivMan, June 13, 2014

   0 votes
   10 answers
7. Анимация CSS3 или JavaScript

   Ребят, подскажите, пожалуйста, есть ли вообще смысл изучать и применять анимирование на CSS3, ведь javascript куда чаще используется для решения данных задач? Да и вообще, в каких случаях целесообразнее использовать CSS3, а когда javascript? Заранее спасибо всем кто обьяснит и поделиться своим опытом с бедненьким неучем!

   Asked by VIVA, December 21, 2015

   0 votes
   14 answers
8. Анимация Iframe - возможно ли?

   Как можно сделать чтобы текст из iframe плавно исчезал? Ну или предложите другие способы анимации ))

   Asked by romoga, January 27, 2014

   • iframe
   • анимация
   0 votes
   0 answers
9. анимация SVG

   Здравствуйте! Пытаюсь создать анимацию на сайте с использованием SVG изображения экспортированного с Corel Draw. Я в интернете нашел пример https://css-tricks.com/svg-line-animation-works/ где идет обрисовка изображения при помощи animation в css но когда я заменяю коде изображения в теги path - вставляю код экспортированного с Corel - а изображения в формате SVG то эта анимация не работает. Подскажите как с Corel Draw изображения SVG сделать анимацию в HTML

   Asked by WebPlus, June 13, 2016

   • svg
   • анимация
   0 votes
   5 answers
10. Анимация SVG с помощью CSS (несколько вопросов)

    Доброго времени суток, делаю прелоадер для сайта: http://codepen.io/karakym/pen/QNdvBj Есть несколько нюансов которые хотел бы узнать у знатоков. 1. На данный момент анимация простая, поворот нескольких элементов в противоположные стороны, так вот по окончанию загрузки сайта нужно остановить анимацию таким способом, что бы она доехала сначала до конца (все элементы прокрутились в исходные позиции) и лишь только тогда прелоадер можно плавно скрывать. Пробовал animation: paused; но это не совсем то что нужно, ведь анимация остановиться в последнем положении при котором загрузилась страница (то есть не докрутиться до изначального положения. Думал сделать способом убирания In…

    Asked by karakym, March 17, 2016

    • svg
    • animation
    • css
    • анимация
    0 votes
    6 answers
11. Анимация SVG средствами JS

    Привет. Подскажите, пожалуйста, почему данный код может не работать: var svgDoc; window.onload = function() { svgDoc = document.getElementById("switchid").contentDocument; } var switch_ = svgDoc.getElementById("switch"); switch_.onclick = function() { current_position = Number(switch_.getAttribute("y")); if(current_position == 32) { // off switch_.setAttribute("y", "9"); switch_.setAttribute("style", "fill:#00ff00"); } else { switch_.setAttribute("y", "32"); switch_.setAttribute("style", "fill:#ff0000"); } } Суть проста. Подключаюсь к svg на странице. И хочу по клику на определенный прямоугольник (id="switch") переводить его из одного положения в…

    Asked by ioprst, March 19, 2018

    • js
    • svg
    0 votes
    2 answers
12. Анимация блока с текстом

    Добрый день! Столкнулся с такой вот проблемой (или это не проблема вовсе) при анимации блока с текстом внутри. Код: codepen.io Вопрос. Так и должно быть? Т.е. текст как будто немного искажается на долю секунды. В Хроме плавно искажается. В Мозиле этого почти не видно. В Опере немного похуже.

    Asked by BehemothOz, March 31, 2016

    0 votes
    1 answer
13. Анимация в CSS3

    Собственно, недавно хотел проявить участие в мини-конкурсе (про Новый год) на этом форуме. Там надо сделать зацикленную анимацию. Я сначала подумал, куда ж тут без JavaScript. Я-то тогда думал, что анимацию в CSS3 можно делать только при наведении курсора (transition). Ну и забросил, я в JavaScript не очень разбираюсь (только если со справочником чего путного могу сделать), я больше по серверным технологиям. Так вот, поучаствовал в другом мини-конкурсе и начал рассматривать работы конкурентов. Увидел у одного участника такой код: animation: roll 1s infinite linear;Удивился. Откуда такое свойство взялось? Весь HTMLBook перерыл, не нашел такого. Этот пропуск в информации н…

    Asked by iKNG, November 20, 2013

    0 votes
    3 answers
14. Анимация в обратном порядке

    $(document).ready(function(){ $('div').click(function(){ $('div').toggleClass('a1').removeClass('a2'); }); $('p').click(function(){ $('div').toggleClass('a2').removeClass('a1'); }); }); div { width: 200px; height: 200px; background: black; position: relative; } .a1 { animation: vras 3s forwards; } .a2 { animation: vras 3s alternate-reverse forwards; } @keyframes vras{ from { left: 0; } 33% { left: 85%; } 66% { left: 0; } to{ left: 500px; } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div></div> &l…

    Asked by aqua.77, January 9, 2017

    0 votes
    1 answer
15. Анимация выпадения ксс3

    http://www.volkswagen.ru/ru.html как сделать через ксс3 анимацию выподания меню, как на примере у верхнего меню

    Asked by aquapasha, March 4, 2014

    0 votes
    3 answers
16. Анимация глючит

    Есть резиновая дивная вёрстка с анимацией скрытия боковых блоков: http://maestro-magnifico.ru/ Используется jQueryUI. Проблема в том, что при анимации боковых блоков, текст в центральном блоке не разъезжается плавно. CSS центрального блока: #center_column { margin: 0px 190px; /* ширина боковых блоков + отступы */ border: 2px solid red; /* для наглядности */ } Если сюда добавить ещё: display: inline-block; то, анимация текста становится плавной, но сам центральный блок опускается под высоту боковых блоков: http://savepic.net/1291355.png Как это исправить? =\

    Asked by Freakmeister, May 27, 2011

    0 votes
    6 answers
17. Анимация градиента svg в safari

    Здравствуйте. Есть такой пример. По окончании анимации path должен закрашиватся градиентом. Везде работает, кроме safari на ios, фон остается белым. Подскажите в чем причина и как это исправить?

    Asked by alex_web64, September 14, 2019

    0 votes
    1 answer
18. Анимация загрузки картинок

    http://svyatoslavdesign.com.ua/works/cottege/1/ Пытаюсь сделать так, чтобы при клике на миниатюру внизу, во время смены сорса основной картинки последняя была скрыта, а поверх нее показывался див с анимацией загрузки (гиф). Код онклика миниатюры: onclick="imgOn('large/1.jpg','s5')" Код смены основной картинки + анимация function imgOn(imgSrc,imgId) { document.getElementById('central_photo').style.visibility = "hidden"; // скрываю основную картинку document.getElementById('load').style.visibility = "visible"; // показываю скрытый див с гиф анимацией img = new Image(); img.src = imgSrc; // делаю предгазрузку картинки в Image document.getElementById('central_photo').src…

    Asked by danie, February 23, 2011

    0 votes
    11 answers
19. анимация закрывает выпадающее меню, помогите решить.

    я использовал анимированное слайдшоу и сверху поставил выпадающее меню, проблема в том что анимация закрывает выпадающее меню,если убрать позирование relactive в id=window и в class=slideshow,то выпадающий список становиться поверх фото,но анимация перестает функционировать. скажите плиз, как решить проблему. вот ссылка http://vibor-kzn.ru/menu/ исходные данные http://vibor-kzn.ru/menu.zip

    Asked by dinaron, March 19, 2011

    0 votes
    2 answers
20. Анимация картинки при наведении на нее

    Здравствуйте, люди! Учусь верстать сайты, и в процессе столкнулась с интересным вопросом. Хочу реализовать анимацию картинки при наведении на нее мыши. Но че-то ищу в инете и найти не могу... Вот прям как на этом сайте: http://www.karusel-tv.ru/, очень нравится простенькая анимация при наведении на иконки меню. Кто-нибудь может подсказать, как это делается? Спасибо заранее!

    Asked by Yulik, June 18, 2014

    0 votes
    7 answers
21. Анимация картинки при открытии сайта

    Как сделалать так, чтоб при открытии сайта всплывала картинка с маленького до большого размера? Как на этом сайте https://kirkorov.ru/

    Asked by llipam, November 19, 2021

    0 votes
    1 answer
22. Анимация картинок работает только в потоке

    Метод Animation работает только в отдельном потоке, почему? Объясните, почему не работает в этом коде анимация картинок(теория) Наверное через таймер работать будет, но я спрашиваю именно почему так не работает Вот код: using System; using System.Collections.Generic; using System.Drawing; using System.Windows.Forms; namespace AnimaciyaIsKartinok { public partial class MainForm : Form { public List<Image> ImageList = new List<Image>(); public MainForm() { InitializeComponent(); } private void MainForm_Load(object sender, EventArgs e) { LoadTexture(); Animation(); } void Animation() { for (int index = 0; index >= 0; index++) { if (index &g…

    Asked by Аниме Любитель, April 25, 2018

    0 votes
    0 answers
23. анимация кнопки при наведении курсора

    Здравствуйте, господа программисты и верстальщики! Хочу обратиться к вам с такой просьбой: у меня есть html- страничка, сделанная по шаблону. В числе прочего там присутствует вертикальное меню из 10 кнопок, оформленное с помощью background-image в css. Поверьте, я перелопатил в гугле достаточно, но не смог приспособить программный код под свои задачи и в результате чувствую себя чайником, в котором вся вода выкипела и он вот-вот сгорит на плите нафик... Зарегился я недавно и в соответствующем разделе для лодырей и.т.д у меня пока нет возможности создать нужную тему... . Поэтому, если кому-то не совсем влом, помогите пожалуйста разобраться с этим злосчастным вертикальны…

    Asked by saint_12, December 6, 2011

    0 votes
    0 answers
24. Анимация кнопки через animation

    Подскажите кто сталкивался с анимированием эффекта нажатия через animation? Через transition понятно как, но вот тут http://landing-animation.powercode.pro/ верхние правые кнопки уж очень приятно выглядят, пробовал повторить через инспектор, но безуспешно. Или где-то ошибаюсь или есть какая-то особенность. Спасибо.

    Asked by Highlander, September 2, 2017

    • animation
    • css
    • button
    0 votes
    7 answers
25. Анимация меню

    Есть сайт http://odinzzov.com/#/biography он на флеш, там когда кликаешь по меню есть анимация подчеркивания, у одного пункта оно исчезает плавно и у другого появляется. Как можно без флеш такое реализовать?

    Asked by okunev2, January 14, 2015

    0 votes
    6 answers