javascript - 如何为引导卡创建这些动画？这对我来说非常复杂，因为我是新手

标签 javascript css html bootstrap-4

https://bootsnipp.com/snippets/K52KK

该链接有一个用于引导卡的模板。 该链接有带动画的卡片，具有水平滑动功能。 我尝试仅将引导卡的属性继承到我的代码中。这些卡片把每一件事都做得过头了，并显示在最上面。 我尝试更改标题的 z-index，但它不起作用。有人可以帮我检索引导卡的属性吗？

nav h1 { vertical-align: middle;
background-color: rgb(0, 0, 0); border: 10px solid rgba(0, 0, 0, 0); text-align: center; position: fixed; position: top; min-width: 100%; z-index: 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{ display:block; margin-left: auto; margin-right: auto; width:335px; height:114.666666666666667px;

}

body{ background: linear-gradient(to right, rgb(39, 38, 38), rgb(177, 72, 72),rgb(39, 38, 38)) }

这是我的 CSS

IBAE-Information Library 

<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"

style="width:100%"> John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile 

            </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"

style="width:100%"> John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile 

            </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"

style="width:100%"> John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile 

            </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"

style="width:100%"> John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile 

                </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"

style="width:100%"> John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile 

                </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"

style="width:100%"> John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile 

                </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"

style="width:100%"> John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile 

                </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"

style="width:100%"> John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile 

                </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"

style="width:100%"> John Doe Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile 

                </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="anonymous">

这是我的html

我试图将引导卡片的动画继承到我的卡片中。我失败得很惨。即使在删除半透明属性后，卡片仍会覆盖整个页面。

最佳答案

您可以使用 CSS 属性 tranform: scale 并在 :hover 上使用它

要实现“jumpy”卡片效果，可以使用transition: cubic-bezier()

对于阴影效果，您可以向伪元素添加阴影，并在 :hover

上使用 opactiy 显示/隐藏它 

.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" />

Working JSFiddle here

关于javascript - 如何为引导卡创建这些动画？这对我来说非常复杂，因为我是新手，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50306207/

上一篇：javascript - 变量在函数内部改变它的值

下一篇：javascript - 单击 block 时如何不计算子 block (示例 .child 跨度)？

相关文章：

javascript - Jquery Mobile - $.mobile.changepage 没有进行转换

javascript - 在启动 javascript 函数的 c# 字符串中使用 '

jquery - 如何在运行时向 css 属性添加值？

ios - UIWebView 中的右填充/边距无法正常工作(嵌入式移动 safari)

javascript - 是否可以通过使用 javascript 来使用 <td> id 更改 <td> 内输入元素的输入类型？

javascript - 具有相同类的多个输入字段调用相同的函数不起作用

javascript - 为较小的屏幕 react 渲染 html

javascript - 在Javascript中实现倒带功能

javascript - 引用自己的对象属性

html - 如何在文本数量后调整输入大小

©2024 IT工具网  联系我们