个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 01:15:12 24 4
gpt4 key购买 nike

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/

24 4 0
文章推荐： javascript - 单击 block 时如何不计算子 block (示例 .child 跨度)？
文章推荐： c++ - 输出小数点后的两位数
文章推荐： c++ - 使用 OpenGL 进行 alpha 混合的最佳方式？
文章推荐： javascript - 变量在函数内部改变它的值
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com