react实现鼠标跟随悬浮照片层叠移动交互动画效果代码
代码语言:html
所属分类:悬停
代码描述:react实现鼠标跟随悬浮照片层叠移动交互动画效果代码
代码标签: react 鼠标 跟随 悬浮 照片 层叠 移动 交互 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic'> <style> *, *::after, *::before { box-sizing: 0; margin: 0; padding: 0; background-color: rgb(197, 197, 197); } body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; } .container { width: 200px; height: 200px; position: relative; } img { width: 100%; position: absolute; transition: 0.3s left linear, 0.3s bottom linear; border-radius: 20px; cursor: pointer; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 10px 0px; } </style> </head> <body class="preload"> <div id="root"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script> <script type="text/babel"> const imgArray = [ { src: "//repo.bfw.wiki/bfwrepo/image/625a18709b084.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90", alt: "a white kitten with brown and black spots sitting with its paws slightly outstretched. ", title: "Photo by The Lucky Neko for Unsplash", caption: "Kitten: Ollie (12 Weeks)", }, { src: "//repo.bfw.wiki/bfwrepo/image/625a1881508fa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90", alt: "a brown French bulldog puppy laying down and looking up with a hopeful look in its eyes. ", title: "Photo by Karsten Winegeart for Unsplash", caption: "Puppy: Barney (9 Weeks)", }, { src: "//repo.bfw.wiki/bfwrepo/image/625a188caa9f1.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90", alt: "A large long-haired orange cat with a white belly. ", title: "Photo by Kabo for Unsplash", caption: "Cat: Walter (5 Years)", }, { src: "//repo.bfw.wiki/bfwrepo/image/625a18b16d81a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90", alt: "A light brown, long-haired chihuahua sitting next to three rubber duckies.", title: "Photo by Sergey Semin for Unsplash", caption: "Dog: Miss Sunshine (2 Years)", }, { src: "//repo.bfw.wiki/bfwrepo/image/625a18cd69bb2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90", alt: "A tabby kitten with green eyes. ", title: "Photo by Giacomo Lucarini for Unsplash", caption: "Kitten: Reese (8 Weeks)", }, ]; const scaleValue = (rangeMin, rangeMax, minValue, maxValue, value) => { return (rangeMax - rangeMin) * ((value - minValue) / (maxValue - minValue)) + rangeMin; }; function Gallery({ imgArray }) {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0