网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款纯HTML5+CSS实现的卡片之间切换,炫酷旋转效果。
使用方法:
1.在HTML页面中加载必要的CSS文件。
<link rel="stylesheet" href="css/common.css" media="all" />
<link rel="stylesheet" href="css/screen.css" media="screen" />
<link rel="stylesheet" href="css/print.css" media="print" />
2.将幻灯片添加到html页面中,如下所示:
<section id="slide1">
<h2>CSS Only Presentation</h2>
<a class="next" href="#slide2"></a>
<span id="hint">Click to continue ↑</span>
<ul>
<li>CSS</li>
<li>Script</li>
<li>Com</li>
</ul>
</section>
<section id="slide2">
<h2>Slide 2</h2>
<a class="prev" href="#slide1"></a>
<a class="next" href="#slide3"></a>
Slide 2 Content
</section>
<section id="slide3">
<h2>Slide 3</h2>
<a class="prev" href="#slide2"></a>
<a class="next" href="#slide4"></a>
Slide 3 Content
</section>
<section id="slide4">
<h2>Slide 4</h2>
<a class="prev" href="#slide3"></a>
<a class="next" href="#slide5"></a>
Slide 4 Content
</section>
<section id="slide5">
<h2>Slide 5</h2>
<a class="prev" href="#slide4"></a>
Slide 5 Content
<p><a id="reset" href="#">Reset?</a></p>
</section>
<section id="start">
<a href="#slide1">Click here to start the presentation…</a>
</section>
<aside id="time"></aside>
转载请注明来源:HTML5+CSS卡片之间切换旋转动画特效代码
本文永久链接地址:https://www.moyouyouw.cn/code/700.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论