jquery+css实现电影海报鼠标悬浮视觉差异交互效果代码
代码语言:html
所属分类:视觉差异
代码描述:jquery+css实现电影海报鼠标悬浮视觉差异交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!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"> <style> body, html { height: 100%; min-height: 100%; } body { background: -webkit-linear-gradient(top, #f6f7fc 0%, #d5e1e8 40%); background: linear-gradient(to bottom, #f6f7fc 0%, #d5e1e8 40%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(800px); transform: perspective(800px); } .btn { text-decoration: none; color: #fff; background: #AEBEC7; font-size: 12px; border-radius: 3px; padding: 10px; text-transform: uppercase; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); position: absolute; left: 50%; top: 75px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .poster { width: 320px; height: 500px; position: absolute; top: 50%; left: 50%; margin: -200px 0 0 -160px; border-radius: 5px; box-shadow: 0 45px 100px rgba(0, 0, 0, 0.4); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; /* overflow:hidden;*/ } @media only screen and (max-width:768px){ .poster{ margin: -100px 0 0 -160px; } } .poster .shine { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%); z-index: 100; } .poster div[class*="layer-"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background-size: 100% auto; background-repeat: no-repeat; background-position: 0 0; border-radius: 5px; } .poster .layer-1 { background-image: url("//repo.bfw.wiki/bfwrepo/images/effect/1.png"); } .poster .layer-2 { background-image: url("//repo.bfw.wiki/bfwrepo/images/effect/2.png"); } .poster .layer-3 { background-image: url("//repo.bfw.wiki/bfwrepo/images/effect/3.png"); } .poster .layer-4 { background-image: url("//repo.bfw.wiki/bfwrepo/images/effect/4.png"); } .poster .layer-5 { background-image: url("//repo.bfw..........完整代码请登录后点击上方下载按钮下载查看
网友评论0