个人中心
gpt4 book ai didi

html - CSS3 滚动动画不起作用

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

我制作了一个向下滚动的动画按钮，但动画不起作用。我不知道怎么了。我用 -webkit-animation: sdb10 2s infinite 和 animation: sdb10 2s infinite 试过了，但看起来没有效果。 

.scrolldown span {
    position: absolute;
    top: 0;
    width: 30px;
    height: 50px;
    border: 2px solid #1F1F1F;
    border-radius: 50px;
    box-sizing: border-box;
}
.scrolldown {
    position: fixed;
    width: 30px;
    height: 75px;
    bottom: -25px;
    left: 50%;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    letter-spacing: .1em;
    text-decoration: none;
    transition: opacity .3s;
}
.scrolldown span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #1F1F1F;
    border-radius: 100%;
    -webkit-animation: sdb10 2s infinite;
    animation: sdb10 2s infinite;
    box-sizing: border-box;
}
.scrolldown span::after {
	position: absolute;
	bottom: -20px;
	left: 50%;
	width: 18px;
	height: 18px;
	content: '';
	margin-left: -9px;
	border-left: 2px solid #1F1F1F;
	border-bottom: 2px solid #1F1F1F;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb05 1.5s infinite;
	animation: sdb05 1.5s infinite;
	box-sizing: border-box;
}
<div class="scrolldown">
	<span></span>
</div>

最佳答案 

body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}


.intro-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

.about-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

.services-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}
<!DOCTYPE html>
<html lang="en">

<head>

   
    <title>Bubbology</title>

   
    <link href="css/maincss/bootstrap.min.css" rel="stylesheet">


    <link href="css/maincss/scrolling-nav.css" rel="stylesheet">

   

</head>



<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

   
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top"></a>
            </div>

           
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                   
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
          
        </div>
      
    </nav>


 
    <section id="about" class="about-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>About Section</h1>
                </div>
            </div>
        </div>
    </section>

  
    <section id="services" class="services-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Services Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Contact details</h1>
                 <div style="float:left;"><p>Mobile No:</p></div>
                     <div style="float:left;"><p></p></div>
                </div>
                    <div style="float:left;" >
                 <p><a>Contact Us:</a></p>
                </div>
                 <div style="float:left;">
                 <p><a href=""></a></p>
                </div>
            </div>
        </div>
    </section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Scrolling Nav JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/scrolling-nav.js"></script>

</body>

</html>

关于html - CSS3 滚动动画不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38896535/

26 4 0
文章推荐： html - Internet Explorer 给表格巨大的负宽度
文章推荐： java - 如何连接到android内部本地主机
文章推荐： java - ColdFusion 到 JSP 的转换
文章推荐： html - Flexbox 中的 SVG 在 IE11 中无法正确缩放
太空宇宙
个人简介

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

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