HTML是一门非常有趣的网页制作语言,虽然它看起来很简单,但相信只要你用心去学,一定能创造出很多有趣的特效。下面,让我们来看一些常见的HTML特效代码。
/* 1、下拉菜单 */
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Who we are</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Our team</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
/* 2、图片轮播 */
<div class="slideshow-container">
<div class="mySlides fade">
<img src="image1.jpg">
</div>
<div class="mySlides fade">
<img src="image2.jpg">
</div>
<div class="mySlides fade">
<img src="image3.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
/* 3、下拉框选择 */
<select id="mySelect">
<option value="">Choose a fruit:</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="kiwi">Kiwi</option>
</select>
/* 4、视差滚动 */
<div class="parallax" style="background-image:url('image.jpg');">
<div class="parallax-text">
<h1>这里是标题</h1>
<p>这里是内容</p>
</div>
</div>
/* 5、模态框 */
<button onclick="document.getElementById('myModal').style.display='block'">打开模态框</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<p>这里是模态框内容</p>
</div>
</div>

以上是一些常用的HTML特效代码,它们不仅美观而且实用,让我们的网页更加活泼生动。