div+css实现文字卡片悬浮背景伸缩变化效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现文字卡片悬浮背景伸缩变化效果代码
代码标签: div css 文字 卡片 悬浮 背景 伸缩 变化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> .card-title { color: #262626; font-size: 1.5em; line-height: normal; font-weight: 700; margin-bottom: 0.5em; } .small-desc { font-size: 1em; font-weight: 400; line-height: 1.5em; color: #452c2c; } .small-desc { font-size: 1em; } .go-corner { display: flex; align-items: center; justify-content: center; position: absolute; width: 2em; height: 2em; overflow: hidden; top: 0; right: 0; background: linear-gradient(135deg, #6293c8, #384c6c); border-radius: 0 4px 0 32px; } .go-arrow { margin-top: -4px; margin-right: -4px; color: white; font-family: courier, sans; } .card { display: block; position: relative; max-width: 300px; max-height: 320px; background-color: #f2f8f9; border-radius: 10px; padding: 2em 1.2em; margin: 12px; text-decoration: none; z-index: 0; overflow: hidden; background: linear-gradient(to bottom, #c3e6ec, #a7d1d9); font-family: Arial, Hel.........完整代码请登录后点击上方下载按钮下载查看
网友评论0