热腾腾的咖啡效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css?family=Passion+One:700&display=swap'); body { margin: 0; } .canvas { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh; overflow: hidden; background: linear-gradient( hsl(210, 80%, 55%), hsl(190, 80%, 70%) ); background: conic-gradient( from -150deg at 45% 50%, hsla(55, 100%, 60%, 0.7) 0deg 179.8deg, transparent 180deg 360deg ), linear-gradient( hsl(210, 80%, 55%), hsl(190, 80%, 70%) ); } .video { --height: 852; mix-blend-mode: screen; height: 100vmin; width: auto; top: calc(-165 / var(--height) * 100vmin); transform: translate(calc(100 / var(--height) * 100vmin), calc(-50 / var(--height) * 100vmin)); position: relative; } .svg { position: absolute; width: 100vw; height: 100vh; } .heading { position: absolute; t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0