xstate实现折叠延伸动画效果
代码语言:html
所属分类:动画
代码描述:xstate实现折叠延伸动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:before, *:after { box-sizing: border-box; } body { width: 100vw; height: 100vh; background-color: #000; } .inspiration { position: fixed; bottom: 0; right: 0; padding: 10px; } .inspiration img { width: 25px; -webkit-filter: brightness(5); filter: brightness(5); } .center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 450px) { .center { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .netflix { position: relative; } .netflix:before { content: ''; position: absolute; left: 0; bottom: -40px; width: 100%; height: 40px; border-radius: 100%; background-color: #000; -webkit-transform: scale(1.5); transform: scale(1.5); z-index: 2; } .netflix span { position: absolute; top: 0; width: 60px; height: 100%; } .netflix span:nth-child(1) { left: 0; background-color: #b00612; -webkit-transform-origin: bottom center; transform-origin: bottom center; } .netflix span:nth-child(2) { left: 0; box-shadow: 0 0 40px #000; background-color: #e50815; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: skewX(var(--angle)) scale(1, 0); tra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0