html - 如何向文本添加过渡？

标签 html css

我正在尝试向我的网页添加过渡。我希望标题中的文本与 Mineplex 网站标题中的文本一样:http://www.mineplex.com/ .我想在文本从底部到顶部“突出显示”的地方使用它。我试过自己做，但我只成功地失败了。如果有人可以帮助，非常感谢!精心制作。

这是我的 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;
    }
}

最佳答案

您可以通过在 :hover 上设置 repeating-linear-gradient 的 background-position 动画来做到这一点:

Fiddle 

.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;
}


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;
}
<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>

关于html - 如何向文本添加过渡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27210251/

上一篇：CSS 响应能力推荐？

下一篇：html - 相对 div 中图像的对齐命令没有响应

相关文章：

css - 如何访问类的 href？

javascript - 如何在 CSS 中使用动态列数和行数均匀分布 float 元素？

javascript - mixItUp jQuery 插件不起作用

css - 如何删除事件元素的边框底部？

javascript - 添加新子元素时，父容器仅将子元素包裹到屏幕边缘(首选 IE 11 支持)

html - 为什么 anchor(<a ) 样式为 :visited color applies to all the anchor tags in Mozilla Firefox?

CSS3 在不影响笔画的情况下更改文本不透明度

HTML5 地理定位，仅限 GPS

css - 防止在 HTML5 中滚动

javascript - 带有 CSS 效果的 JQuery Ui .effect 不起作用

©2024 IT工具网  联系我们