Как создать эти анимации для загрузочных карт?Это невероятно сложно для меня, так как я новичок - PullRequest
Новая
       0

Как создать эти анимации для загрузочных карт?Это невероятно сложно для меня, так как я новичок

0 голосов
/ 12 мая 2018

https://bootsnipp.com/snippets/K52KK

Ссылка содержит шаблон для загрузочных карт. Ссылка имеет карты с анимацией, имеет возможность горизонтального скольжения. Я попытался унаследовать только свойства загрузочных карт для моего кода. Карты перестарались и показывают сверху. Я попытался изменить z-index для моего заголовка, но он не работает. Могут ли некоторые помочь мне получить только свойства карт начальной загрузки?

nav h1 { выравнивание по вертикали: среднее;
цвет фона: rgb (0, 0, 0); граница: 10px solid rgba (0, 0, 0, 0); выравнивание текста: по центру; положение: фиксированное; положение: сверху; минимальная ширина: 100%; z-индекс: 3; 

} .nav ul  {
vertical-align: middle;
-webkit-font-smoothing:antialiased;
text-shadow:0 1px 0 rgba(255, 255, 255, 0);
background: rgb(0, 0, 0);
list-style: none;
margin: 0;
padding: 0;
width: 100%;
z-index: 3; } .nav li  {
vertical-align: middle;
float: left;
margin: 0;
padding: 100; 
position: relative;
min-width: 20%;
z-index: 3; } .nav a  {
vertical-align: middle;
background: rgb(0, 0, 0);
display: block;
font: bold 15px/50px helvetica;
padding: 0 0 0 0px;
text-align: center;
text-decoration: none !important;
color: rgb(255, 255, 255);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
        transition: all .25s ease;
        z-index: 3; } .nav .dropdown:after  {
content: ''; } .nav .dropdown:hover:after {
content:'' } .nav li:hover a  {
color: white;
background: rgb(0, 0, 0); } .nav li ul  {
vertical-align: middle;
float: left;
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 4;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
        transition: all .25s ease; } .nav li:hover ul  {
opacity: 1;
top: 50px;
visibility: visible; } .nav li ul li  {
float: none;
width: 100%; } .nav li ul a:hover  {
background: rgb(255, 0, 0); }

.logo img { Дисплей: блок; поле слева: авто; поле справа: авто; ширина: 335px; высота: 114.666666666666667px;

}

тело { фон: линейный градиент (справа, rgb (39, 38, 38), rgb (177, 72, 72), rgb (39, 38, 38))}

Это мой CSS

IBAE-Информационная библиотека 

<body>
    <nav>
        <h1 style="font-family:Helvetica;">
            <ul class="nav">
                <li><a href="#">menu1</a>
                    <ul>
                        <li><a href="#">Sub-menu Item 1</a></li>
                        <li><a href="#">Sub-menu Item 2</a></li>
                        <li><a href="#">Sub-menu Item 3</a></li>
                    </ul>
                </li>
                <li><a class="dropdown" href="#">menu2</a>
                    <ul>
                        <li><a href="#">Sub-menu Item 1</a></li>
                        <li><a href="#">Sub-menu Item 2</a></li>
                        <li><a href="#">Sub-menu Item 3</a></li>
                    </ul>
                </li>
                <li><font size="+4", color="white">IBAE</font> <br></li>
                <li><a href="#">menu 3</a>
                    <ul>
                        <li><a href="#">Sub-menu Item 1</a></li>
                        <li><a href="#">Sub-menu Item 2</a></li>
                        <li><a href="#">Sub-menu Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">menu 4</a>
                    <ul>
                        <li><a href="#">Sub-menu Item 1</a></li>
                        <li><a href="#">Sub-menu Item 2</a></li>
                        <li><a href="#">Sub-menu Item 3</a></li>
                    </ul>
                </li>
            </ul>
        </h1>
    </nav>
    <br>
    <br>
    <br>
    <br>

   <div class="container">
       <!--first row-->
        <div class="row">
            <div class="col-sm-3">
                    <div class="card img-fluid" style="width:600px">
                        <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image"

стиль = "ширина: 100%"> Джон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Немного пример текста пример текста. Некоторые примеры текстов некоторые примеры текст.

Посмотреть профиль Джон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текстов некоторые примеры текст.
Посмотреть профиль 
            </div>
            <div class="col-sm-3">
                    <div class="card img-fluid" style="width:600px">
                            <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image"

стиль = "ширина: 100%"> Джон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текстов некоторые примеры текст.

Посмотреть профиль 
            </div>
            <div class="col-sm-3">
                    <div class="card img-fluid" style="width:600px">
                            <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image"

стиль = "ширина: 100%"> Джон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текстов некоторые примеры текст.

Посмотреть профиль 
            </div>
        </div><br>
        <!--second row-->
        <div class="row">
                <div class="col-sm-3">
                        <div class="card img-fluid" style="width:600px">
                            <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image"

стиль = "ширина: 100%"> Джон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текстов некоторые примеры текст.

Посмотреть профильДжон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текстов некоторые примеры текст.
Посмотреть профиль 
                </div>
                <div class="col-sm-3">
                        <div class="card img-fluid" style="width:600px">
                                <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image"

стиль = "ширина: 100%"> Джон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текстов некоторые примеры текст.

Посмотреть профиль 
                </div>
                <div class="col-sm-3">
                        <div class="card img-fluid" style="width:600px">
                                <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image"

стиль = "ширина: 100%"> Джон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текстов некоторые примеры текст.

Посмотреть профиль 
                </div>
        </div><br>
        <!--third row-->
        <div class="row">
                <div class="col-sm-3">
                        <div class="card img-fluid" style="width:600px">
                            <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image"

стиль = "ширина: 100%"> Джон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текстов некоторые примеры текст.

Посмотреть профиль Джон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текстов некоторые примеры текст.
Посмотреть профиль 
                </div>
                <div class="col-sm-3">
                        <div class="card img-fluid" style="width:600px">
                                <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image"

стиль = "ширина: 100%"> Джон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текстов некоторые примеры текст.

Посмотреть профиль 
                </div>
                <div class="col-sm-3">
                        <div class="card img-fluid" style="width:600px">
                                <img class="card-img-top" src="/Users/jeevabharathi/Desktop/test.jpg" alt="Card image"

стиль = "ширина: 100%"> Джон Доу Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текста Некоторые примеры текста. Некоторые примеры текстов некоторые примеры текст.

Посмотреть профиль 
                </div>
        </div><br>
   </div>


   <!--test-->








   <script src="/Users/jeevabharathi/Documents/Website/IBAE.js"></script>
    <script   src="https://code.jquery.com/jquery-3.3.1.js"   integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="

crossorigin = "анонимный">

Это мой HTML

Я пытался унаследовать анимацию загрузочных карт в своих картах. Я с треском провалился. Карты продолжали покрывать всю страницу даже после удаления полупрозрачного свойства.

1 Ответ

0 голосов
/ 12 мая 2018

Вы можете использовать свойство CSS tranform: scale и использовать его на :hover

Для достижения эффекта карты " jumpy " вы можете использовать transition: cubic-bezier()

Для эффекта теней вы можете добавить тень к псевдоэлементу и показать / скрыть ее с помощью opactiy на :hover

.kitten {
  margin: 50px;
  max-height: 200px;
  transition: 0.2s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.kitten:hover {
  transform: scale(1.2);
  transition: 0.2s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
}

.kitten:hover:before {
  opacity: 1;
}

.kitten:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
    transition: .15s all ease-out;
    opacity: 0;
    border-radius: 5px;
}
<img src="http://www.catster.com/wp-content/uploads/2017/12/A-gray-kitten-meowing.jpg" class="kitten" />

Рабочая JSFiddle здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...