CSS3全屏3D画布图片切换特效.zip资源-CSDN文库

共11个文件

jpg：6个

css：3个

js：1个

版权申诉

javascript

jQuery

HTML5

143 浏览量 2022-11-17 21:18:13 上传评论收藏 415KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3全屏3D画布图片切换特效.zip （11个子文件）

CSS3全屏3D画布图片切换特效

CSS3全屏3D画布图片切换特效.jpg 42KB

jiaoben5415

css

demo.css 582B

style.css 10KB

normalize.css 2KB

img

2.jpg 74KB

1.jpg 89KB

3.jpg 53KB

5.jpg 103KB

4.jpg 61KB

index.html 3KB

index.js 10KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3全屏3D画布图片切换特效 - 网页模板</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="slider" id="slider" style="--img-prev:url(img/1.jpg)"> <div class="slider__content" id="slider-content"> <div class="slider__images"> <div class="slider__images-item slider__images-item--active" data-id="1"><img src="img/1.jpg"></div> <div class="slider__images-item" data-id="2"><img src="img/2.jpg"></div> <div class="slider__images-item" data-id="3"><img src="img/3.jpg"></div> <div class="slider__images-item" data-id="4"><img src="img/4.jpg"></div> <div class="slider__images-item" data-id="5"><img src="img/5.jpg"></div> </div> <div class="slider__text"> <div class="slider__text-item slider__text-item--active" data-id="1"> <div class="slider__text-item-head"> <h3>Forest</h3> </div> <div class="slider__text-item-info"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> </div> </div> <div class="slider__text-item" data-id="2"> <div class="slider__text-item-head"> <h3>Lake</h3> </div> <div class="slider__text-item-info"> <p>“Mist to mist, drops to drops. For water thou art, and unto water shalt thou return”</p> </div> </div> <div class="slider__text-item" data-id="3"> <div class="slider__text-item-head"> <h3>Cliffs</h3> </div> <div class="slider__text-item-info"> <p>“Go to the edge of the cliff and jump off. Build your wings on the way down”</p> </div> </div> <div class="slider__text-item" data-id="4"> <div class="slider__text-item-head"> <h3>Mountains</h3> </div> <div class="slider__text-item-info"> <p>“What are men to rocks and mountains?”</p> </div> </div> <div class="slider__text-item" data-id="5"> <div class="slider__text-item-head"> <h3>Peaks</h3> </div> <div class="slider__text-item-info"> <p>“On all the peaks lies peace”</p> </div> </div> </div> </div> <div class="slider__nav"> <div class="slider__nav-arrows"> <div class="slider__nav-arrow slider__nav-arrow--left" id="left">to left</div> <div class="slider__nav-arrow slider__nav-arrow--right" id="right">to right</div> </div> <div class="slider__nav-dots" id="slider-dots"> <div class="slider__nav-dot slider__nav-dot--active" data-id="1"></div> <div class="slider__nav-dot" data-id="2"></div> <div class="slider__nav-dot" data-id="3"></div> <div class="slider__nav-dot" data-id="4"></div> <div class="slider__nav-dot" data-id="5"></div> </div> </div> </div> <script src="js/index.js"></script> </body> </html>

评论收藏

内容反馈

版权申诉