如何将过渡元素添加到我的主页？ [英] How do add transition elements to my homepage?

问题描述

请有人帮我解决这个问题，我的转换代码无法在我网站的主页上工作...

Please someone help me with this problem, my transition codes aren't working on the home page of my website...

<div id="container">
        <header>
            <h1></h1>
        </header>

        <div id="banner">
        <h2></h2>
    </div>

    <div id="content">
        <p>THIS IS JUST THE TEXTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
    </div>

    <div class="nav">
        <ul class="group">
            <li><a href="Home.html">Home</li></a>
            <li><a href="Herbs.html">Herbs</li></a>
        </div>
            <div class="nav2">
                <ul class="group">
            <li><a href="locations.html">Locations</li></a>
            <li><a href="about.html">About</li></a>
        </ul>
    </div>
</div>

body {
    text-align:center;
    background-color:#90EE90;


}

header {
    background-image: url("../Secret Of Beauty.jpg");
    width:2000px;
    height:165px;
    background-position: right center;
    position: fixed;
    margin-left:-90px;
    z-index:505;
    margin-top:27px;
    border:5px solid black;
}

#banner {
    width: 100%;
    height: 500px;
    position: fixed;
    top: 100px;
    background-color: rgba(0,255,0,.25);
}

#content {
    width:2000px;
    position: relative;
    top: 500px;
    height: 1500px;
    background-repeat: no-repeat;
}

#container {
    z-index:509;
    position:fixed;
    background-position: right center;
    margin-top:-1115px;
}

li {
    list-style: none;
    float:left;
    margin-left:40px;
    padding-top:10px;
    z-index:510;
}

a {
    text-decoration: none;
    padding: 20px 39.9px;
    border:5px solid black;
    color: black;
    z-index:510;
    font-size:137%;
}

.nav {
    float:right;
    margin-top: -1430px;
    position: absolutes;
    position:fixed;
    margin-left: -85px;
    z-index:512;
}
.site-nav a {
    display:block;
    color:#FFF;
    padding:10px 20px;
    background-color:##90EE90;
    transition-property:color;
    trasition-duration:2s;

}
.site-nav a:hover {
    background-color:#FFF;
    color:#90EE90;
}
#video {
    position:relative;
    min-width:100%;
    min-height:120%;
    background-size:cover;
    z-index:-1;
    border:5px solid black;
    margin-left:-5px;
}

.nav2 {
    float:right;
    margin-top: -1430px;
    position: absolute;
    position:fixed;
    margin-left: 1450px;
    z-index:512;
}

推荐答案

您的示例中没有任何内容可以显示您的过渡效果。你需要有一些元素，比如< a class =site-nav> ...< / a> 。此外，并非所有浏览器都可以响应与转换相关的CSS属性;兼容性做法可能需要使用浏览器特定的。



请参阅：

http://www.w3schools.com/css/css3_transitions.asp [ ^ ]。



本文有一个带有悬停属性的生活示例。查看页面来源以了解它是如何工作的。

-SA

There is nothing in your example that could manifest your transition effects. You need to have some element like <a class="site-nav">…</a>. Besides, not all browsers may respond to your CSS properties related to transition; compatibility practices may require using browser-specific ones.

Please see:
http://www.w3schools.com/css/css3_transitions.asp[^].

This article has a life example with "hover" property. Look at the page source to see how it works.

—SA

这篇关于如何将过渡元素添加到我的主页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！