念念不忘
必有回响

B站网页特效学习 — 社交媒体按钮

看到B站讲的不错的网页特效视频,在GitHub也有分享的demo,顺便记录一下总结,需要引入的CDN资源

<!-- font-awesome --> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

演示效果:demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" /> <style> body { padding: 0; margin: 0; } .middle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .btn { display: inline-block; width: 90px; height: 90px; background: #f1f1f1; margin: 10px; border-radius: 30%; box-shadow: 0 5px 15px -5px #00000070; color: #3498db; overflow: hidden; position: relative; text-align: center; } .btn i { line-height: 90px; font-size: 26px; transition: 0.2s linear; } .btn:hover i { transform: scale(1.3); color: #f1f1f1; } .btn::before { content: ''; position: absolute; width: 120%; height: 120%; background: #3498db; transform: rotate(45deg); left: -110%; top: 90%; } .btn:hover::before { animation: flash 0.7s 1; top: -10%; left: -10%; } @keyframes flash { 0% { left: -100%; top: 90%; } 50% { left: 10%; top: -30%; } 100% { left: -10%; top: -10%; } } </style> </head> <body> <div class="middle"> <a class="btn" href="https://github.com/yyeexin"> <i class="fab fa-github"></i> </a> <a class="btn" href="https://weibo.com/u/3481962337"> <i class="fab fa-weibo"></i> </a> <a class="btn" href="https://public-1256942570.cos.ap-chengdu.myqcloud.com/qrcode.jpg"> <i class="fab fa-weixin"></i> </a> <a class="btn" href="https://public-1256942570.cos.ap-chengdu.myqcloud.com/qq_qccode.jpg"> <i class="fab fa-qq"></i> </a> <a class="btn" href="https://space.bilibili.com/11866444"> <i class="fab fa-twitch"></i> </a> </div> </body> </html>

效果图:

赞(0) 打赏
未经允许不得转载:小蚁上树 » B站网页特效学习 — 社交媒体按钮
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    学习学习

    1231年前 (2019-07-17)回复