<!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>基于Anime.js的全屏视差效果图片切换插件</title> <style> .slider__arrow slider__arrow_next{ background-color: red;width: 100px;height: 100px; } </style> <!--可无视--> <link rel="stylesheet" type="text/css" href="./normalize.css" /> <link rel="stylesheet" type="text/css" href="./reset.css"> <!--主要样式--> <link rel="stylesheet" type="text/css" href="./demo.css" /> </head> <body> <section class="page-wrapper" id="coidea"> <div class="slider"> <ul class="slider-list"> <li class="slider-list__item slider-list__item_active"> <span class="back__element"> <img src="./back_apple_002.png" /> </span> <span class="main__element"> <img src="./bottle_apple_002.png" /> </span> <span class="front__element"> <img src="./front_apple_002.png" /> </span> <span class="title__element"> <span class="title">apple</span> </span> <span class="more__element"> <span class="content"> <span class="headline">apple</span> <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span> <span class="link"> <div class="fill"></div> <a href="#">Open catalog</a> </span> </span> </span> </li> <li class="slider-list__item"> <span class="back__element"> <img src="./back_grapes_001.png" /> </span> <span class="main__element"> <img src="./bottle_grapes_001.png" /> </span> <span class="front__element"> <img src="./front_grapes_001.png" /> </span> <span class="title__element"> <span class="title">grapes</span> </span> <span class="more__element"> <span class="content"> <span class="headline">grapes</span> <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span> <span class="link"> <div class="fill fill-dark"></div> <a href="#">Open catalog</a> </span> </span> </span> </li> <li class="slider-list__item"> <span class="back__element"> <img src="./back_strawberry_003.png" /> </span> <span class="main__element"> <img src="./bottle_strawberry_003.png" /> </span> <span class="front__element"> <img src="./front_strawberry_003.png" /> </span> <span class="title__element"> <span class="title">strawberry</span> </span> <span class="more__element"> <span class="content"> <span class="headline">strawberry</span> <span class="excerpt">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ratione nisi perferendis? Nemo in accusamus cupiditate officiis.</span> <span class="link"> <div class="fill"></div> <a href="#">Open catalog</a> </span> </span> </span> </li> </ul> <div class="slider__nav-bar"> <a class="nav-control"></a> <a class="nav-control"></a> <a class="nav-control"></a> </div> <div class="slider__controls"> <a class="slider__arrow slider__arrow_prev" style="color: red;font-weight: bolder;font-size: 40px;">左边</a> <a class="slider__arrow slider__arrow_next" style="color: red;font-weight: bolder;font-size: 40px;">右边</a> </div> </div> </section> <script src="./anime.min.js" type="text/javascript"></script> <script src="./demo.js"></script> </body> </html>
基于Anime.js的全屏视差效果图片切换插件
标签:
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
下一篇:
纯CSS3实现3D展开动画的图标菜单