![](/img/trans.png)
[英]Can I draw a line from one element to another in css or javascript?
[英]JavaScript or CSS: How can I make a transition of one element to another?
我正在自定義主頁上工作,我想將一個元素轉換為另一個元素。
這是我的HTML代碼:
<div id="index-features">
<ul>
<li>
<h5 id="feature-1" class="feature-title">Instant access</h5>
<span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
<h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
<span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
<h5 id="feature-3" class="feature-title">Modern techniques</h5>
<span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
<h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
<span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
<h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
<span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
</ul>
<ul>
<li>
<h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
<span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
<h5 id="feature-7" class="feature-title">High quality support</h5>
<span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the <a href="#" target="_blank" style="border-bottom: 2px solid;">support forum</a> so that we can fix your problem very quickly.</span>
</li>
<li>
<h5 id="feature-8" class="feature-title">Custom framework</h5>
<span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
<h5 id="feature-9" class="feature-title">Extra features</h5>
<span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
<h5 id="feature-10" class="feature-title">Test title</h5>
<span id="feature-10-description" class="feature-description">Test</span>
</li>
</ul>
</div>
CSS:
#index-features
{
position: relative;
margin-top: 15px;
text-align: center;
}
#index-features li
{
border-bottom: #CCCCCC 1px solid;
margin: 0 -20px 20px -20px;
padding: 0 20px; 0 20px;
}
#index-features ul:last-child li:last-child
{
border-bottom: none;
}
.feature-title
{
display: inline-block;
font-weight: bold;
}
.feature-title:before
{
content: "";
float: left;
background: url("../images/index-features-sprite.png") no-repeat;
width: 32px;
height: 32px;
margin-right: 5px;
}
.feature-description
{
display: block;
margin: 0 0 20px 37px;
}
#feature-1:before
{
background-position: 0 0;
}
#feature-2:before
{
background-position: -32px 0;
}
#feature-3:before
{
background-position: -64px 0;
}
#feature-4:before
{
background-position: 0 -32px;
}
#feature-5:before
{
background-position: -32px -32px;
}
#feature-6:before
{
background-position: 0 -64px;
}
#feature-7:before
{
background-position: -32px -64px;
}
#feature-8:before
{
background-position: -64px -32px;
}
#feature-9:before
{
background-position: -64px -64px;
}
如您所見,我有兩個ul標簽,我想要做的是將第一個ul過渡到另一個ul: http : //prntscr.com/7ftax4 ,第二個ul: http : //prntscr.com / 7ftba6
想法是顯示第一個ul,10秒鍾后,第二個ul越過第一個ul。
請問如何使用JavaScript或CSS?
這是一段jQuery,它將在<ul>
元素上依次添加一個活動類。 然后,使用CSS可以隱藏<ul>
元素,並在應用.active
類時顯示.active
$(function(){ $('#index-features ul').first().addClass('active'); setInterval(loop,10000); function loop(){ var $active=$('ul.active'); var $next=$active.nextAll('ul').first(); if($next.length===0)$next=$active.prevAll('ul').last(); $active.removeClass('active') $next.addClass('active'); } });
#index-features { position: relative; margin-top: 15px; text-align: center; } #index-features li { border-bottom: #CCCCCC 1px solid; margin: 0 -20px 20px -20px; padding: 0 20px; 0 20px; } #index-features ul:last-child li:last-child { border-bottom: none; } .feature-title { display: inline-block; font-weight: bold; } .feature-title:before { content: ""; float: left; background: url("../images/index-features-sprite.png") no-repeat; width: 32px; height: 32px; margin-right: 5px; } .feature-description { display: block; margin: 0 0 20px 37px; } #feature-1:before { background-position: 0 0; } #feature-2:before { background-position: -32px 0; } #feature-3:before { background-position: -64px 0; } #feature-4:before { background-position: 0 -32px; } #feature-5:before { background-position: -32px -32px; } #feature-6:before { background-position: 0 -64px; } #feature-7:before { background-position: -32px -64px; } #feature-8:before { background-position: -64px -32px; } #feature-9:before { background-position: -64px -64px; } #index-features ul { position: absolute; top: 0; opacity: 0; transition: opacity 0.5s; } #index-features ul.active { opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="index-features"> <ul> <li> <h5 id="feature-1" class="feature-title">Instant access</h5> <span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span> </li> <li> <h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5> <span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span> </li> <li> <h5 id="feature-3" class="feature-title">Modern techniques</h5> <span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span> </li> <li> <h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5> <span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span> </li> <li> <h5 id="feature-5" class="feature-title">Optional copyright removal</h5> <span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span> </li> </ul> <ul> <li> <h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5> <span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span> </li> <li> <h5 id="feature-7" class="feature-title">High quality support</h5> <span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the <a href="#" target="_blank" style="border-bottom: 2px solid;">support forum</a> so that we can fix your problem very quickly.</span> </li> <li> <h5 id="feature-8" class="feature-title">Custom framework</h5> <span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span> </li> <li> <h5 id="feature-9" class="feature-title">Extra features</h5> <span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span> </li> <li> <h5 id="feature-10" class="feature-title">Test title</h5> <span id="feature-10-description" class="feature-description">Test</span> </li> </ul> </div>
這可以使用純CSS完成,但是您需要動畫和動畫延遲。 我做了一個小提琴,其中一個div
將在10秒后被另一個div
覆蓋,所以請耐心等待: http : //jsfiddle.net/Lcek5s21/
#number1, #number2 {
height:100px;
width: 100px;
}
#number1 {
background-color:red;
}
#number2 {
background-color:green;
-webkit-animation: mymove 3s infinite;/* Chrome, Safari, Opera */
-webkit-animation-delay: 10s;/* Chrome, Safari, Opera */
animation: mymove 3s infinite;
animation-delay: 10s;
position:relative;
opacity:0;
}
@-webkit-keyframes mymove {
0% {
top: 0px;
opacity: 0;
}
100% {
top: -100px;
opacity: 1;
}
}
/* Standard syntax */
@keyframes mymove {
0% {
top: 0px;
opacity: 0;
}
100% {
top: -100px;
opacity: 1;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.