Навигация по панели анимации / переход с использованием только CSS - PullRequest
Новая
       10

Навигация по панели анимации / переход с использованием только CSS

0 голосов
/ 24 января 2019

Итак, я пытаюсь создать симпатичную панель меню навигации с допингом анимация / переход для моего веб-сайта, чтобы создать эффект эффектного вида. Моя цель здесь - использовать только CSS, а не добавлять какие-либо javascript, которые только усложняют ситуацию. Эта ссылка имеет вид анимации Я ищу. Просто чтобы дать вам, ребята, идею. ( Просто просматривая W3 Schools, чтобы увидеть, какую анимацию я ищу ).

Идея состоит в том, чтобы изменить topnav background-color со страницы на страницу в качестве плавного перехода.

Вот то, что у меня есть для стиля CSS. Мне нравится мой текущий стиль, но я просто хочу добавить переход от страницы к странице, чтобы background-color действовал как ползунок в некотором роде 

ul.topnav li a:hover:not(.active) {
  background-color: #4d4dff;
  transition: 0.5s;
}

ul.topnav li a.active {
  background-color: #00cc99;
  color: black;
  /* I would like to add in some sort of animations / transition here. */
}
<ul class="topnav">
  <label for="toggle">&#9776;</label>
  <input type="checkbox" id="toggle">
  <div class="menu">
    <li><a href="#" class="active">Home</a>
      <!--Background when active-->
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <!--If I click on this page, it would transition the background COLOR to this page-->
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact Me</a></li>
  </div>
</ul>

РЕДАКТИРОВАТЬ КОММЕНТАРИЙ ДЛЯ ОТВЕТА НА МУЛЬЖАЯН

Посмотрите на этот пример здесь https://youtu.be/oCUCWnbre0k?t=1014 и следуйте этому коду.

HTML 

* {
  margin: 0;
  padding: 0;
}

.navigation {
  margin: 200px 20px;
  background: #383838;
  color: #FFF;
  overflow: hidden;
  height: 50px;
  width: 1000px;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.navigation li {
  width: 100px;
  border-bottom: 1px solid #666;
  border-right: 2px ridge #585858;
  float: left;
  list-style-type: none;
  font-family: 'ambleregular';
  font-weight: normal;
  font-size: 15px;
  line-height: 28px;
  padding: 10px 10px 10px 10px;
  -webkit-transition: all .9s;
  -moz-transition: all .9s;
  -o-transition: all .9s;
  -ms-transition: all .9s;
  transition: all .9s;
}

.navigation li:hover {
  background: #FE980F;
  border-bottom: 1px solid #FFF;
}

.navigation li a {
  text-decoration: none;
  color: #FFF;
}

.navigation li a:hover {
  color: #333;
}


/* Search box    */

.search_box {
  float: right;
  border: 1px solid #3C3C3C;
  background: #FFF;
  border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  -o-border-radius: 0.3em;
  position: absolute;
  margin-top: 8px;
  margin-right: 15px;
  width: 228px;
  left: 765px;
  top: 204px;
}

.search_box form input[type="text"] {
  border: none;
  outline: none;
  background: none;
  font-size: 12px;
  color: #acacac;
  width: 75%;
  padding: 5px;
}


/* Final STEP  */

.search_box form input[type="submit"] {
  border: none;
  cursor: pointer;
  background: url(images/search.png) no-repeat 0px 7px;
  position: absolute;
  right: 0;
  width: 20px;
  height: 25px;
}
<body bgcolor="#faf7fd">
  <ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

  <div class="search_box">
    <form>
      <input type="text" value="Search" onfocus="this.value = ''; {this.value='Search' ;}">
      <input type="submit " value=" ">
    </form>
  </div>
</body>

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Я использовал переходы на li и анимацию на тегах a для достижения необходимых эффектов. на каждой странице без JavaScript вы должны будете изменить классы для активной страницы вручную. Пример: На странице about у тега about будет класс lnk, а у всех других тегов a будет aLnk, то есть для выделения текущей страницы. 

.menu {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #333333;
  height: 50px;
  float: left;
}

ul {
  width: 100%;
  float: left;
  color: #ffffff;
}

li {
  width: 100px;
  height: 34px;
  float: left;
  list-style: none;
  background-color: transparent;
  transition: ease-in-out .9s;
  text-align: center;
  padding-top: 10px;
}

li:hover {
  background-color: orange;
  transition: ease-in-out .9s;
}

.aLnk {
  width: 100%;
  height: 100%;
  float: left;
  text-decoration: none;
  color: #ffffff;
  transition: ease-in-out .9s;
}

.aLnk:hover {
  color: yellow;
  transition: ease-in-out .9s;
  animation-name: changeColor;
  animation-duration: .9s;
  animation-iteration-count: infinate;
}

@keyframes changeColor {
  10% {
    color: #000000;
  }
  100% {
    color: yellow;
  }
}

.active {
  background-color: orange;
}

.lnk {
  color: yellow;
  text-decoration: none;
}

.lnk:hover {
  color: yellow;
}
<div class="menu">
  <ul class="topnav">
    <li class="active"><a class="lnk" href="index.html">Home</a></li>
    <li><a class="aLnk" href="about.html">About</a></li>
    <li><a class="aLnk" href="portfolio.html">Portfolio</a></li>

  </ul>
</div>
0 голосов
/ 24 января 2019

Я думаю, что это невозможно сделать с чистым CSS . Причина в том, что когда вы нажимаете на ссылку, она загружает новую страницу. Для создания желаемого эффекта необходимо сохранить в памяти предыдущий цвет фона, чтобы вызвать переход.

Например, если конечные цвета фона следующие

  • home page => blue
  • о странице => красный
  • страница портфолио => зеленый

Если вы переходите с домашней страницы на страницу about, переход должен быть с голубого на красный, но, допустим, вы переходите со страницы портфолио на страницу about, переход должен быть с зеленого на красный.

С чистым CSS невозможно узнать, был ли на предыдущей странице синий или зеленый цвет, чтобы перейти на красный на странице about.

Я бы посоветовал вам изучить некоторые рамки, такие как React, Vue или Angular. С теми, 

* {
  margin: 0;
  padding: 0;
}
    
.navigation {
  margin: 200px 20px;
  background: #383838;
  color: #FFF;
  overflow: hidden;
  height: 50px;
  width: 1000px;
  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
    
.navigation li {
  width: 100px;
  border-bottom: 1px solid #666;
  border-right: 2px ridge #585858;
  float: left;
  list-style-type: none;
  font-family: 'ambleregular';
  font-weight: normal;
  font-size: 15px;
  line-height: 28px;
  padding: 10px 10px 10px 10px;
  -webkit-transition: all .9s;
  -moz-transition: all .9s;
  -o-transition: all .9s;
  -ms-transition: all .9s;
  transition: all .9s;
}

.navigation .active {
  background: #FE980F;
  border-bottom: 1px solid #FFF;
  animation: animatedNav 1s;
  animation-timing-function: ease-in;
}

@keyframes animatedNav {
  0% {background: #383838;}
  100% {background: #FE980F;}
}

.navigation li a {
  text-decoration: none;
  color: #FFF;
}

.navigation .active a {
  color: #333;
}
<!-- home.html --> 

     <body bgcolor="#faf7fd">
        <ul class="navigation">
          <li class="active"><a href="./index.html">Home</a></li>
          <li><a href="./products.html">Products</a></li>
        </ul>
      </body>

<!-- products.html -->

     <body bgcolor="#faf7fd">
        <ul class="navigation">
          <li><a href="./index.html">Home</a></li>
          <li class="active"><a href="./products.html">Products</a></li>
        </ul>
      </body>

Вы можете создавать довольно впечатляющие переходы страниц.

На боковой ноте проверьте код, указанный ниже, и посмотрите, какой эффект вы хотите.

Проблема заключается в том, что ранее посещенная ссылка не будет иметь перехода

...