css布局实现卡片右上角图标效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现卡片右上角图标效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <style> body { padding: 50px; } .cont { position: relative; width: 300px; height: 200px; background: url(//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90); } .github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out } @keyframes octocat-wave { 0%,100% { transform: rotate(0) } 20%,60% { transform: rotate(-25deg) } 40%,80% { transform: rotate(10deg) }} @media (max-width:500px) { .github-corner:hover .octo-arm { animation: none } .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out }} </style> </head> <body> <div class="cont"> <a class="github-corner" aria-label="View source on Github"><svg width="80" height=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0