div+css实现照片悬浮折叠动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现照片悬浮折叠动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } .container { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #2f364f; } .box { width: 640px; height: 360px; display: flex; background: transparent; transform: rotate(-25deg) skew(25deg); transition: 0.5s; } .box:hover { transform: rotate(-25deg) skew(-25deg) translateY(-10px); } .box span { width: 25%; height: 100%; display: block; background: url(//repo.bfw.wiki/bfwrepo/image/6359f297c8f3a.png); background-size: cover; background-position: calc(-160px * var(--i)); borde.........完整代码请登录后点击上方下载按钮下载查看
网友评论0