animat实现绳子变形效果
代码语言:html
所属分类:动画
代码描述:animat实现绳子变形效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.min.css"> <style> @import "https://fonts.googleapis.com/css?family=Space+Mono:400,700,700i"; :root { --c-brand: #f04e45; --c-brand-alt: #eca6ca; --c-bg: #f0f0e6; } body, html { font-family: 'Space Mono', ipm, Menlo, 'Courier New', monospace; color: var(--c-brand); text-align: center; margin: 0; padding: 0; } body::before { position: fixed; background: var(--c-bg); content: ''; top: 10vmin; right: 10vmin; left: 10vmin; bottom: 10vmin; } .svg { width: 300vmin; height: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -45%); transform: translate(-50%, -45%); } .title { fill: var(--c-brand); font-family: 'Space Mono'; font-size: 80px; font-weight: 700; font-style: italic; } .elastiq { fill: none; stroke: var(--c-brand-alt); stroke-width: 11.4px; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); } .bla { fill: blue; } span { position: fixed; bottom: 20vmin; left: 50%; font-size: 5vmin; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #212121; } a { color: #212121; text-decoration: none; position: fixed; bottom: 0; right: 8vmin; padding: 3vmin; font-size: 4vmin; } </style> </head> <body translate="no"> <div class="logo"> <svg class="svg" width="500" height="500" viewBox="0 0 500 500" @click="click"> <text class=&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0