css实现可交互名片效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现可交互名片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* 指定字型 相對位置 */ * { font-family: 微軟正黑體; position:relative; } /* 不同瀏覽器有不同的預設值,歸零 */ html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; } body { background-color: #94D0D4; } .namecard { width: 800px; height: 300px; padding: 30px; margin-left: auto; margin-right: auto; margin-top: 150px; background-color: #eee; letter-spacing: 1px; color: #666; transition-duration: 1s; border-radius: 15px; overflow: hidden; } img { position: absolute; width: 140px; height: 140px; margin-top: 20px; margin-left: 20px; border-radius: 8px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); } .right { position: absolute; margin-left: 180px; } .namecard h2 { font-size: 28px; letter-spacing: 8px; } .namecard h2 span { padding: 10px; font-size: 16px; color: #67BDCC; letter-spacing: 5px; } .namecard h5 { font-size: 20px; letter-spacing: 4px; } .namecard p { font-size: 15px; font-weight: 300; color: #FDE49; line-height: 22px } .circle{ width:100px;height:100px; border-radius:100%; position:absolute; transition-duration: 0.5s; } /* 動畫 */ .namecard:hover .circle2 { transform-origin: 50% 50%; transform: scale(0.0); transition-duration: 1s; right: 20p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0