Question

我正在尝试向我的网页添加转换。我希望标题中的文字与Mineplex网站标题中的文字一样：http://www.mineplex.com/。我希望文本从底部到顶部“突出显示”。我试过自己这样做，但我只是成功失败了。如果有人可以提供帮助，非常感谢！ Craftd。

这是我的HTML：

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
    <link rel="stylesheet" type"text/css" href="styles.css" />
    <title>Craftd's Official Website</title>
</head>
<body class="body">
<header class="mainHeader">
<nav><ul>
    <li class="active">
        <li><a href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul></nav>
</header>

<div class="mainContent">
    <div class="content">   
            <article class="topcontent">    
                <header>
                    <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">Welcome!</a></h2>
                </header>

                <footer>
                    <p class="post-info">Welcome to my Channel!</p>
                </footer>

                <content>
                    <iframe width="580" height="300" src="http://www.youtube.com/embed/oetU4zNP91o" frameborder="0" allowfullscreen></iframe>
                </content>

            </article>

            <article class="bottomcontent"> 
                <header>
                    <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">First post</a></h2>
                </header>

                <footer>
                    <p class="post-info"></p>
                </footer>

                <content>
                    <p>Lorem ipsum dlior sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dliore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dlior in reprehenderit in vliuptate velit esse cillum dliore eu fugiat nulla pariatur. Duis aute irure dlior in reprehenderit in vliuptate velit esse cillum dliore eu fugiat nulla pariatur.</p>
                </content>

            </article>
    </div>

            <aside class="top-sidebar">
                <article>
                <h2><center>Q & A's!</center></h2>
                <p><ol><h6>
                    <li><i>What is your middle name?</i> Malosi.</li>
                    <li><i>Where do you live?</i> Australia.</li>
                    <li><i>What do you use to record?</i> Fraps, ands sometimes Camtasia.</li>
                    <li><i>What consoles do you play?</i> Just XBox 360.</li>
                    <li><i>What was your first ever game?</i> Mario Bros. on the GameBoy.</li>
                </p></ol></h6>
                </article>
            </aside>

            <aside class="middle-sidebar">
                <article>
                <h2><center>Latest News!</center></h2>
                <p><i><u><center>There are no new stories.</center></u></i></p>
            </article>
            </aside>                

            <aside class="bottom-sidebar">
                <article>
                <h2>Social Networks</h2>
                    <a href="http://www.facebook.com/CraftdMC" target="_blank"><img src="images/Facebook.png" width="64" height="64"></a>
                    <a href="http://www.instagram.com/CraftdMC" target="_blank"><img src="images/Instagram.png" width="64" height="64"></a>
                    <a href="http://www.twitter.com/CraftdMC" target="_blank"><img src="images/Twitter.png" width="64" height="64"></a>
                </article
            </aside>    
</div>

<footer class="mainFooter">
    <p>Copyright &copy; 2014 <a href="http://craftd.com/">Craftd</a></p>
</footer>


    </center>
</body>

这是我的CSS

/* ===========================
   ======= Body style ======== 
   =========================== */

body {
    background-image: url('images/image.png');
    color: #000305;
    font-size: 87.5%; /* Base font size: 14px */
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    }

.body {
    clear: both; 
    margin: 0 auto; 
    width: 70%;
}

/* ===========================
   ========= Headings ======== 
   =========================== */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 0.95em}  /* 14px */

h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: .8em;
}

/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
    outline: 0;
    }

a img {
    border: 0px; 
    text-decoration: none;
}

a:link, a:visited {
    color: #CF5C3F;
    padding: 0 1px;
    text-decoration: none;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
    text-decoration: none;
}

/* ===========================
   ===== Main Navigation ===== 
   =========================== */

.mainHeader nav {
    background: #666;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 30px auto;
    text-align: center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none; 
    margin: 0 auto;
}

.mainHeader nav ul li {
    float: left; 
    display: inline; 
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 23px;
    text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #FF9317;
    color: #fff;
    text-shadow: none !important;
}

.mainHeader nav li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader img {
    width: 30%;
    height: auto;
    margin: 3% 0;
}

/* ===========================
   ======= Content Area ====== 
   =========================== */

.mainContent {
    overflow: hidden;
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.topcontent {
    background-color: #EBE4DD;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    padding: 3% 5%; 
    margin-bottom: 3%;
}

.bottomcontent {
    background-color: #EBE4DD;  
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    padding: 3% 5%;
}

.content {
    width: 68%;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
}

.post-info {
    font-style: italic;
    color: #919191;
    font-size: 85%;
}

/* ===========================
   ======== Sidebar ========== 
   =========================== */

.top-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #EBE4DD;  
    padding: 2% 3%;
    margin-bottom: 2%;
}

.middle-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #EBE4DD;  
    padding: 2% 3%;
    margin-bottom: 2%;
}

.bottom-sidebar {
    width: 24%;
    float: left;
    margin-left: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    background-color: #EBE4DD;  
    padding: 2% 3%;
}

/* ===========================
   ========= Footer ========== 
   =========================== */

.mainFooter {
    width: 100%;
    float: left;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-left: 0;
    background-color: #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    color: #FFF;    
}

.mainFooter p {
    width: 91%;
    margin: 2% auto;
}

/* ===========================
   ====== Media Queries ====== 
   =========================== */

@media only screen and (min-width : 150px) and (max-width : 780px)
{
    .body {
        clear: both; 
        margin: 0 auto; 
        width: 90%;
        font-size: 90%;
    }

    .mainHeader nav {
        background: #666;
        font-size: 1.143em;
        height: 160px;
        line-height: 30px;
        margin-bottom: 0;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .mainHeader nav ul {
        list-style: none; 
        margin: 0 auto;
        padding-left: 0;
    }

    .mainHeader nav li {
        margin-left: 0 auto;
        width: 100%;
    }

    .mainHeader nav a:link, .mainHeader nav a:visited {
        color: #FFF;
        display: block;
        height: 30px;
        padding: 5px 0;
        text-decoration: none;
    }

    .mainHeader nav a:active,
    .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
        background: #CF5C3F;
        color: #fff;
        text-shadow: none !important;
    }

    .mainHeader nav li a {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .mainHeader img {
        width: 100%;
        height: auto;
        margin-bottom: 3%;
    }

    .mainContent {
        overflow: hidden;
        line-height: 25px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        margin-top: 4%;
        margin-bottom: 2%;
    }

    .topcontent {
        background-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        padding: 2% 5%;
        margin-bottom: 4%;
    }

    .bottomcontent {
        background-color: #FFF; 
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        padding: 2% 5%;
    }

    .content {
        width: 100%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
    }   

    .post-info {
        display: none;
    }

    .top-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0;
        padding: 0 7%;
        margin-bottom: 0;       
    }

    .top-sidebar p {
        width: 90%;
    }

    .middle-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0;
        padding: 0 7%;
        margin-bottom: 0;   
    }

    .middle-sidebar p {
        width: 90%;
    }

    .bottom-sidebar {
        width: 86%;
        float: left;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        background-color: #FFF; 
        margin-top: 4%;
        margin-left: 0%;
        padding: 0 7%;
        margin-bottom: 1%;
    }

    .bottom-sidebar p {
        width: 90%;
    }

    .mainFooter {
        width: 100%;
        float: left;
        margin: 2% 0;
        padding-left: 0;
        background-color: #666;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        color: #FFF;    
    }

    .mainFooter p {
        width: 86%;
        margin: 2% auto;
    }
}

Answer 1

你的CSS确实需要一些帮助......那里有很多重复和重叠。在尝试添加新内容之前，我建议首先进行清理。

如果有帮助，这里的CSS负责mineplex.com上的转换：

#top ul a:nth-child(-n+2):after, #top ul a:nth-child(n+4):after {
   position: absolute;
   content: "";
   width: 100%;
   height: 0%;
   left: 0;
   bottom: 0;
   z-index: -100;
   background: #63cae3;
   transition: height ease-in-out 0.5s;
}

：选择器在导航栏中的链接后插入内容。高度，宽度，左侧，底部和背景属性都非常简单。 position和z-index属性将新内容放在链接文本后面，而transition属性是动画的负责人。您可以详细了解here并试用here。

Answer 2

要完成类似于您链接的悬停效果，您可以使用：

-webkit-transition: 0.5s ease;

这增加了很好的平滑效果，可用于调整div高度。这将创建您正在寻找的效果。

我拼凑了一个示例JSFiddle项目，以更好地展示我的意思。你可以找到here.

Answer 3

您可以通过repeating-linear-gradient background-position动画:hover .mainHeader nav li a { background: repeating-linear-gradient(#666666, #666666 50%, #FF9317 50%, #FF9317 200%); background-size: 100% 200%; transition: all 0.5s; } .mainHeader nav a:hover { background-position: 0px -40px; }来实现此目的：

Fiddle

body {
    background-image: url('images/image.png');
    color: #000305;
    font-size: 87.5%;
    /* Base font size: 14px */
    font-family:'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
}
a {
    outline: 0;
}
a img {
    border: 0px;
    text-decoration: none;
}
a:link, a:visited {
    color: #CF5C3F;
    padding: 0 1px;
    text-decoration: none;
}
a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
    text-decoration: none;
}
.mainHeader nav {
    background: #666;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto;
    text-align: center;
    border-radius: 5px;
    margin-left: -40px;
}
.mainHeader nav ul {
    list-style: none;
    margin: 0 auto;
    width: 430px;
}
.mainHeader nav ul li {
    display: inline-block;
    vertical-align: top;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 23px;
    text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    color: #fff;
}
.mainHeader nav li a {
    background: -webkit-repeating-linear-gradient(#666666, #666666 41px, #FF9317 41px, #FF9317 82px);
    background: -moz-repeating-linear-gradient(#666666, #666666 41px, #FF9317 41px, #FF9317 82px);
    background: repeating-linear-gradient(#666666, #666666 41px, #FF9317 41px, #FF9317 82px);
    background-size: 100% 200%;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 0.5s;
}
.mainHeader nav a:hover {
    background-position: 0px -40px;
}
.mainHeader nav ul li h1 {
    height: 40px;
    line-height: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

＆＃13;

<header class="mainHeader">
    <nav>
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">Gallery</a>
            </li>
            <li> <font face="Space Age"><font color="red"><h1>CRAFTD</h1></font></font>
            </li>
            <li><a href="#">About</a>
            </li>
            <li><a href="#">Contact</a>
            </li>
        </ul>
    </nav>
</header>

＆＃13;

{{1}}

＆＃13;

如何添加到文本的转换？

3 个答案:

Fiddle