js+css实现照片挂在墙上摆动选择效果代码
代码语言:html
所属分类:画廊相册
代码描述:js+css实现照片挂在墙上摆动选择效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway&family=Poppins&display=swap"); body { display: flex; font-family: "Open Sans", sans-serif; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; } .badge { position: absolute; top: -5px; right: -25px; width: 20px; border-radius: 50%; background: #f00; } .photo[active] { /* transition: all 0.5s; transform: scale(1.3); */ &:hover { /* transition: all 0.5s; transform: scale(1.6) rotate(-3deg); */ } } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; max-width: 800px; padding: 10px; background-color: white; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background: linear-gradient(to left top, #888, #ddd); } .photo { text-align: center; opacity: 0.8; &:hover { transition: all 0.5s; /* transform: translateY(15px) scale(1.1) rotate(3deg); */ opacity: 1; animation-play-state: paused; & figcaption { transition: all 0.7s; color: black; } } } .photo img { max-width: 100%; height: auto; border-radius: 5px; margin-bottom: 10px; background: white; padding: 10px 10px 35px; text-align: center; text-decoration: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); transition: all 0.15s linear; z-index: 0; position: relative; } .photo figcaption { position: relative; left: 10px; right: 10px; top: -45px; font-size: 14px; color: lightgray; } figure { offset-anchor: top; transform-origin: top; animation: swing 2s infinite cubic-bezier(0.25, 0.1, 0.25, 1); &:hover { animation-play-state: paused; } } @keyframes swing { 25% { transform: rotate3d(0, 0, 1, 3deg); } 75% { transform: rotate3d(0, 0, 1, -3deg); } } </style> </head> <body> <div class="gallery"> <figure class="photo"> <img src="//repo.bfw.wiki/bfwrepo/image/626903b0b64e2.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_250,h_335,/quality,q_90" alt="Pink and blue clouds at sunset. " title="Photo by Jeremy Doddridge for Unsplash"> <figcaption>8 PM, Summer</figcaption> </f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0