卡片悬浮动画特效
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Card Hover Effect | SASS | Cubic Bezier</title> <style> @import url("https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap"); * { margin: 0px; padding: 0; } body { font-family: 'Poppins'; overflow: hidden; } .container { width: 100%; height: 100vh; background-color: #232323; display: flex; justify-content: center; align-items: center; } .container .post { width: 350px; height: 500px; display: flex; flex-direction: column; position: relative; } .container .post:hover .header_post { margin-top: -20px; } .container .post:hover .body_post { height: 50%; } .container .post .header_post { width: 100%; height: 40%; background: #ddd; position: absolute; top: 0; -webkit-transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) 320ms; -moz-transition: cubic-bezier(0..........完整代码请登录后点击上方下载按钮下载查看
网友评论0