hexaflip实现图片三维翻转轮播图幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:hexaflip实现图片三维翻转轮播图幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/hexaflip.css"> <style> #choose-time { margin: 80px auto; width: 300px; text-align: center; } #set-button, #submit { background-color: #888; color: #fff; -webkit-border-radius: 3px; border-radius: 3px; padding: 2px 6px; padding-bottom: 4px; cursor: pointer; margin-left: 5px; opacity: 0.95; filter: alpha(opacity=95); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; font-size: 20px; } #set-button:hover, #submit:hover { opacity: 1; -ms-filter: none; filter: none; } .demo { margin: 0 auto; -webkit-filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3)); -moz-filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3)); filter: drop-shadow(30px 30px 23px rgba(0,0,0,0.3)); } #hexaflip-demo1, #hexaflip-demo2 { margin-bottom: 4rem; } #hexaflip-demo1 .hexaflip-cube, #hexaflip-demo2 .hexaflip-cube { opacity: 0.9; filter: alpha(opacity=90); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } #hexaflip-demo1 .hexaflip-cube .hexaflip-left, #hexaflip-demo2 .hexaflip-cube .hexaflip-left, #hexaflip-demo1 .hexaflip-cube .hexaflip-right, #hexaflip-demo2 .hexaflip-cube .hexaflip-right { background-color: #222 !important; } #hexaflip-demo1 .hexaflip-cube > div, #hexaflip-demo2 .hexaflip-cube > div { font-weight: 100; text-shadow: none; } #hexaflip-demo1 .hexaflip-cube > div:nth-child(1n+1), #hexaflip-demo2 .hexaflip-cube > div:nth-child(1n+1) { background-color: #069ad5; } #hexaflip-demo1 .hexaflip-cube > div:nth-child(2n+2), #hexaflip-demo2 .hexaflip-cube > div:nth-child(2n+2) { background-color: #fc5215; } #hexaflip-demo1 .hexaflip-cube > div:nth-child(3n+3), #hexaflip-demo2 .hexaflip-cube > div:nth-child(3n+3) { background-color: #30b71d; } #hexaflip-demo1 .hexaflip-cube > div:nth-child(4n+4), #hexaflip-demo2 .hexaflip-cube > div:nth-child(4n+4) { background-color: #eee; color: #222; } #hexaflip-demo2 { margin-bottom: 6rem; } #hexaflip-demo5 .hexaflip-cube > div { color: rgba(255,255,255,0.3); font-weight: 900 !important; letter-spacing: -3px; text-shadow: none; } #h.........完整代码请登录后点击上方下载按钮下载查看
网友评论0