文字穿透动画效果
代码语言:html
所属分类:视觉差异
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Opposites</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Kanit:900&display=swap" rel="stylesheet"> <style> /* Reset */ *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } /* Generic */ body, .form { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; cursor: none; font-size: 64px; font-weight: bolder; font-family: 'Kanit', sans-serif; } .left, .right { position: absolute; top: 0; left: 0; width: 50%; height: 100%; color: #FFB300; background: #2196F3; z-index: 100; overflow: hidden; } .right { width: 100%; color: #2196F3; background: #FFB300; z-index: 50; } .pointer { display: flex; justify-content: center; align-items: center; position: relative; z-index: 200; width: 40px; height: 40px; border-radius: 50%; transition: .15s ease; } .pointer--b { background: #2196F3; } .pointer--w { background: #FFB300; } .split { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; width: 400px; height: 75px; transform: translate(-50%, -50%); z-index: 400; transition: .35s ease; le.........完整代码请登录后点击上方下载按钮下载查看
网友评论0