纯css实现链接悬停背景变化效果代码
代码语言:html
所属分类:悬停
代码描述:纯css实现链接悬停背景变化效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"); body { top: 0; left: 0; width: 100vw; height: 100vh; margin: 0; padding: 2rem 0 0; font-size: 16px; font-family: 'Libre Baskerville', serif; color: #333; background: #fff; overflow-x: hidden; } body .message { position: absolute; left: 0.5vw; top: 1vw; max-width: 60vw; font-size: 0.75em; } body .message a { color: inherit; text-decoration: none; border-bottom: 1px solid #444; } body .message a:hover { border-width: 3px; } body p { display: block; box-sizing: border-box; width: 100%; max-width: 600px; margin: 1rem auto; padding: 1em; text-align: center; font-size: 1em; line-height: 1.5; } body p a { display: inline-block; position: relative; color: #333; text-decoration: none; } body p a:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; background: #e2d509; overflow: hidden; z-index: -1; transition: all 0.5s ease; } body p:nth-of-type(1) a:before { top: auto; bottom: 0; height: 100%; } body p:nth-of-type(1):hover a:before { width: 100%; } body p:nth-of-type(2) a:before { top: 0.1em; height: 100%; transform: rotate(-2deg); transform-origin: left center; } body p:nth-of-type(2):hover a:before { width: 100%; } body p:nth-of-type(3) a:before { top: 0.1em; left: -10%; height: 100%; transform: rotate(-2deg); transform-origin: left center; transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45); background: rgba(226, 213, 9, 0.75); } body p:nth-of-type(3):hover a:before { width: 120%; } body p:nth-of-type(4) a:before { top: 0.15em; left: -10%; height: 100%; transform: rotate(-3deg); transform-origin: left center; transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45); background: linear-gradient(to right, rgba(226, 213, 9, 0.75), rgba(226, 213, 9, 0.25)); } body p:nth-of-type(4):hover a:before { width: 120%; } body p:nth-of-type(5) a:before { top: 0.15em; left: -10%; height: 100%; transform: rotate(-3deg); transform-origin: left center; transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45); background: linear-gradient(to right, rgba(226, 213, 9, 0.95), rgba(226, 213, 9, 0)); } body p:nth-of-type(5):hover a:before { width: 140%; } body p:nth-of-type(6) a:before { top: 0.15em; left: -10%; height: 100%; border-radius: 0.2em; transform: rotate(-3deg); transform-origin: left center; transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45); background: linear-gradient(to right, rgba(226, 213, 9, 0.95), rgba(226, 213, 9, 0)); } bo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0