luge实现图片卡片封面鼠标悬浮交互动画效果代码
代码语言:html
所属分类:悬停
代码描述:luge实现图片卡片封面鼠标悬浮交互动画效果代码
代码标签: luge 图片 卡片 封面 鼠标 悬浮 交互 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/luge.css"> <style> .wrapper { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; align-items: center; background-color: #FFEDEC; justify-content: center; overflow: hidden; } .work { position: relative; width: 560px; max-width: 60vw; cursor: pointer; } .work:before { display: block; padding-top: 100%; content: ""; } .work__image { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #9EA9FF; border: 3px solid #8a97ff; object-fit: cover; z-index: 2; } .work__shadows { position: absolute; top: 5%; left: 5%; width: 100%; height: 100%; z-index: 1; } .work__shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid #8a97ff; } .work__shadow:nth-child(5) { background-color: #9EA9FF; } .work__shadow:nth-child(4) { background-color: #FFFFFF; } .work__shadow:nth-child(3) { background-color: #76D7BA; } .work__shadow:nth-child(2) { background-color: #FFAD2D; } .work__shadow:nth-child(1) { background-color: #FF7474; } .toggle { position: absolute; bottom: 30px; left: calc( 50% - 25px ); width: 50px; height: 30px; z-index: 3; } .toggle input { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; } .toggle input:checked + .toggle__slider:before { transform: translate3d(20px, 0, 0); } .toggle__slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #9EA9FF; border-radius: 999em; z-index: 1; } .toggle__slider:before { display: block; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; background-color: #FFFFFF; border-radius: 50%; content: ""; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .toggle__label:before, .toggle__label:after { position: absolute; top: 8px; color: #3E4365; font: 700 13px/1 sans-serif; letter-spacing: 0.1em; text-transform: uppercase; } .toggle__label:before { right: calc( 100% + 10px ); content: "2D"; } .toggle__label:after { left: calc( 100% + 10px ); content: "3D"; } .lg-cursor .lg-cursor-pointer:nth-child(1):before { margin: -15px 0 0 -15px; width: 30px; height: 30px; background: rgba(158, 169, 255, 0.25); } .lg-cursor .lg-cursor-pointer:nth-child(2):before { background-color: white; } .lg-cursor .lg-cursor-trail path { stroke: rgba(158, 169, 255, 0.25); stroke-width: 3px; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="wrapper"> <div class="work" data-lg-hover> <img src='//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png' class="work__image" alt=''> <div class="work__shadows"> <div class="work__shadow"></div> <div class="work__shadow"></div> <div class="work__shadow"></div> <div class="work__shadow"></div> <div class="work__shadow"></div> </div> </div> <label class="toggle" data-lg-hover> <input name="style" type="checkbox" value="3d" /> <span class="toggle__slider" /> <span class="toggle__label" /> </label> </div> <div data-lg-cursor data-lg-cursor-hide> <div data-lg-cursor-pointer data-lg-cursor-inertia="0.1"></div> <div data-lg-cursor-pointer>&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0