文字视觉滑动效果
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sliding Perspective</title> <style> /* I found James Bosworth's codepen the other day (https://codepen.io/bosworthco/) and saw his work on shifted perspective and wanted to learn how to make it. I also found this Youtube video (https://www.youtube.com/watch?v=LgiadQQM6mo&list=PLbu98QxRH81KxxMclY_ZRmm4Dac-n7cSA) which is a great tutorial of the project. Enjoy! */ html { height: 100%; } body { display: flex; align-items: center; justify-content: center; background: #f1f1f1; overflow: hidden; margin-left: auto; margin-right: auto; margin-top: 250px; } .perspective-text { color: white; font-family: Arial; font-size: 58px; font-weight: 900; letter-spacing: -2px; text-transform: uppercase; } .perspective-line { height: 50px; overflow: hidden; position: relative; } p { margin: 0; height: 50px; line-height: 50px; transition: all 0.5s ease-in-out; } .perspective-line:nth-child(odd) { transform: skew(60deg, -30deg) scaleY(0.667); } .perspective-line:nth-child(even) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0