表白
代码语言:html
所属分类:表白
代码描述:666
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css?family=Economica:700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Economica', sans-serif; font-size: 2rem; text-transform: uppercase; min-height: 100vh; background-color: black; color: orchid; display: flex; align-items: center; justify-content: center; } .wrapper { width: 546px; height: 500px; position: relative; } .line1 .word, .line2 .char { offset-path: path('M.5 159.7C-.9 341.1 228.4 500 273.2 500.5S546.1 350.1 546 159.7c0-75.9-32.9-131.6-97.2-149.8-116.5-33.1-153.6 48.4-175.6 47.8-24.2-.6-66.9-80.5-172.7-50C33.1 27.1 1.1 82 .5 159.7z'); offset-position: top; offset-anchor: center left; position: absolute; top: 0; left: 0; } .line1 .word { --i: calc(var(--word-total) - var(--word-index)); offset-distance: calc(var(--i) * 4.2rem + 37rem); offset-rotate: auto 90deg; opacity: 0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0