css+div实现个人照片悬浮堆叠动画效果代码
代码语言:html
所属分类:悬停
代码描述:css+div实现个人照片悬浮堆叠动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #313131; font-family: 'Poppins', sans-serif; } .box { display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; padding: 32px } .card { position: relative; width: 300px; height: 400px; background: #ffffff; border-radius: 3px; margin: 0 auto; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); } .card::before, .card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3px; background: #ffffff; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); z-index: -1; transition: .5s; } .card:hover::after { transform: rotate(10deg); } .card:hover::before { transform: rotate(20deg); } .card .imgBox { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background: #101010; z-index: 1; transition: .5s; } .card:hover .imgBox { bottom: 75px; } .card .imgBox img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover } .card .details { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 55px; } .card .details h2 { margin-top: 5px; padding: 0; font-weight: 900; font-size: 20px; color: #101010; te.........完整代码请登录后点击上方下载按钮下载查看
网友评论0