css实现悬浮切换背景动画特效
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Only CSS: Usually Button</title> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'> <style> :root { --base-color: rgba(255, 255, 255, 1); --hover-color: rgba(220, 120, 150, 1); } body { height: 100vh; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-family: 'Anton', sans-serif; background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); } .horizontal { display: flex; justify-content: center; align-items: center; position: relative; width: 400px; height: 120px; margin: 20px; border: 10px solid var(--base-color); font-size: 4rem; cursor: pointer; } .horizontal > .text { position: relative; color: transparent; background-image: linear-gradient(90deg, var(--hover-color) 0%, var(--hover-color) 50%, var(--base-color) 50%, var(--base-color) 100%); background-repeat: repeat; background-size: 200%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; transition: background-position 300ms; } .horizontal::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--base-color); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; } .horizontal:hover .text { background-position: 0 0; } .horizont.........完整代码请登录后点击上方下载按钮下载查看
网友评论0