Вопросы Теги

CSS анимация не работает, ничего не отображается в браузере [закрыто]

Какую версию Spring вы используете? Я тестировал это с помощью Spring 3.1.1.RELEASE, используя следующее простое приложение: 

Folder structure
-----------------------------------------------------------------------------------

spring-web
    |
     --- src
          |
           --- main
                 |
                  --- webapp
                         |
                          --- page
                         |     |
                         |      --- home.jsp
                         |
                          --- WEB-INF
                               |
                                --- web.xml
                               |
                                --- applicationContext.xml

home.jsp
-----------------------------------------------------------------------------------




    
        Welcome to Spring Web!
    
    
        Page URL: ${pageContext.request.requestURL}
    


web.xml
-----------------------------------------------------------------------------------




org.example.web


    spring-mvc-dispatcher
    org.springframework.web.servlet.DispatcherServlet
    
        contextConfigLocation
        /WEB-INF/webContext.xml
    
    1



    spring-mvc-dispatcher
    *.htm



applicationContext.xml
-----------------------------------------------------------------------------------

При доступе к http: // localhost: 8080 / spring- web / page / home.jsp , URL-адрес отображается правильно как http: // localhost: 8080 / spring-web / page / home.jsp .

-1
задан aditya prakash 18 January 2019 в 05:09
поделиться

1 ответ

Если вы используете точно такой же код, как упомянутый выше, в нем есть ошибки.

  1. Вы определили ключевые кадры слайда в свойствах класса слайдера, он должен быть автономным, поскольку он не является частью свойств класса слайдера напрямую, и его можно использовать с несколькими другими классами.

Ниже приведен исправленный полный код: 

<!doctype html>
<html lang="en">

<head>
  <title>Pure CSS Slider</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="author" content="https://akashshivanand.com">
  <style>
    .slider {
      width: 890px;
      height: 400px;
      background: url("http://lorempixel.com/890/400/sports");
      margin: 100px auto;
      animation-name: slide;
      animation-duration: 10s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      animation-direction: normal;
      animation-fill-mode: forwards;
    }
    
    @keyframes slide {
      25% {
        background: url(http://lorempixel.com/890/400/sports/1);
      }
      50% {
        background: url(http://lorempixel.com/890/400/sports/2);
      }
      75% {
        background: url(http://lorempixel.com/890/400/sports/3);
      }
      100% {
        background: url(http://lorempixel.com/890/400/sports/4);
      }
    }
  </style>
</head>

<body>

  <div class="slider"></div>

</body>

</html>

0
ответ дан Akash 18 January 2019 в 05:09
поделиться
Другие вопросы по тегам:

Похожие вопросы: