CSS3创意3D鞋子产品切换特效.zip资源-CSDN文库

共8个文件

png：5个

html：1个

js：1个

jQuery特效

CSS特效

网页特效

190 浏览量 2023-11-02 22:56:40 上传评论收藏 1.37MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3创意3D鞋子产品切换特效.zip （8个子文件）

jiaoben6951

script.js 302B

img

3.png 244KB

1.png 291KB

5.png 299KB

4.png 277KB

2.png 297KB

css

style.css 8KB

index.html 4KB

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS3创意3D鞋子产品切换特效 - 【更多源码：www.96flw.com】</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="app"> <div class="shoe-selector"> <div class="shoe" data-active> <div class="shoebox" data-animate> <div class="side top"> <div class="lid"></div> </div> <div class="side front"></div> <div class="side back"></div> <div class="side left"></div> <div class="side right"></div> <div class="side bottom"></div> <img src="img/2.png" alt=""> </div> <header class="shoe-header"> <small class="shoe-subheading" data-animate>Men's Shoe</small> <h2 class="shoe-heading" data-animate>Converse High Top</h2> </header> <div class="shoe-price"> <span data-animate>$190</span> </div> <div class="shoe-rating"> <span data-animate>4.6</span> </div> </div> <div class="shoe"> <div class="shoebox" data-animate> <div class="side top"> <div class="lid"></div> </div> <div class="side front"></div> <div class="side back"></div> <div class="side left"></div> <div class="side right"></div> <div class="side bottom"></div> <img src="img/3.png" alt=""> </div> <header class="shoe-header"> <small class="shoe-subheading" data-animate>Men's Shoe</small> <h2 class="shoe-heading" data-animate>Nike Air Force 270</h2> </header> <div class="shoe-price"> <span data-animate>$140</span> </div> <div class="shoe-rating"> <span data-animate>3.9</span> </div> </div> <div class="shoe"> <div class="shoebox" data-animate> <div class="side top"> <div class="lid"></div> </div> <div class="side front"></div> <div class="side back"></div> <div class="side left"></div> <div class="side right"></div> <div class="side bottom"></div> <img src="img/4.png" alt=""> </div> <header class="shoe-header"> <small class="shoe-subheading" data-animate>Ladies' Shoe</small> <h2 class="shoe-heading" data-animate>New Balance 996</h2> </header> <div class="shoe-price"> <span data-animate>$180</span> </div> <div class="shoe-rating"> <span data-animate>4.4</span> </div> </div> <div class="shoe"> <div class="shoebox" data-animate> <div class="side top"> <div class="lid"></div> </div> <div class="side front"></div> <div class="side back"></div> <div class="side left"></div> <div class="side right"></div> <div class="side bottom"></div> <img src="img/5.png" alt=""> </div> <header class="shoe-header"> <small class="shoe-subheading" data-animate>Ladies' Shoe</small> <h2 class="shoe-heading" data-animate>Converse Comme Des Garcons</h2> </header> <div class="shoe-price"> <span data-animate>$150</span> </div> <div class="shoe-rating"> <span data-animate>4.3</span> </div> </div> <div class="shoe"> <div class="shoebox" data-animate> <div class="side top"> <div class="lid"></div> </div> <div class="side front"></div> <div class="side back"></div> <div class="side left"></div> <div class="side right"></div> <div class="side bottom"></div> <img src="img/1.png" alt=""> </div> <header class="shoe-header"> <small class="shoe-subheading" data-animate>Men's Shoe</small> <h2 class="shoe-heading" data-animate>Converse High Top</h2> </header> <div class="shoe-price"> <span data-animate>$140</span> </div> <div class="shoe-rating"> <span data-animate>4.8</span> </div> </div> </div> </div> <script src="js/script.js"></script> </body> </html>

评论收藏

内容反馈