vue滚动小狗拉长动画
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Cute+Font&display=swap"); body { background: #333; color: #fff; font-family: "Cute Font", cursive; } #app { padding: 30px; background: #333; } *:before, *:after { content: ""; position: absolute; } .content { height: 300px; min-width: 300vw; overflow-y: hidden; overflow-x: scroll; -ms-overflow-style: none; /* IE, Edge 対応 */ scrollbar-width: none; /* Firefox 対応 */ } .content::-webkit-scrollbar { /* Chrome, Safari 対応 */ display: none; } .margin { position: absolute; height: 300px; } .dog { position: absolute; bottom: 50px; background: #D24D57; height: 35px; border-radius: 10px; } .dog__face { position: absolute; top: -24px; left: 33px; width: 40px; height: 40px; border-radius: 30px; background: #D24D57; } .dog__face:before, .dog__face:after { background: #D24D57; } .dog__face:before { top: 21px; left: 7px; width: 46px; height: 16px; transform: rotate(-18deg); -webkit-transform: rotate(-18deg); -moz-transform: rotate(-18deg); border-radius: 50%; } .dog__face:after { top: 12px; left: 16px; width: 38px; height: 13px; transform: rotate(6deg); -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); border-radius: 20px; } .dog__eye { position: absolute; top: -15px; left: 35px; width: 12px; height: 22px; background: #D24D57; border: 1px solid #333; transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); border-radius: 20px 50%; z-index: 10; } .dog__eye:before { top: 4px; left: 22px; width: 3px; height: 3px; border-radius: 50%; background: #333; } .dog__eye:after { top: 25px; left: 3px; width: 28px; height: 14px; border-radius: 40%; transform: rotate(-60deg); -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); background: #D24D57; } .dog__front { position: absolute; top: 0; right: 0; width: 50px; height: 35px; background: #D24D57; border-radius: 10px 50% 50%; transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); } .dog__front .dog__foot + .dog__foot { left: 40px; } .dog__front .dog__foot + .dog__foot:before { content: none; } .dog__front-body { animation: face 0.3s linear alternate-reverse infinite; } .dog__back { position: absolute; top: -2px; left: -39px; width: 50px; height: 60px; } .dog__back-body { width: 100%; height: 35px; border-radius: 10px 0px 10px 10px; transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); background: #D24D57; } .dog__foot { position: absolute; top: 20px; left: -1px; width: 12px; height: 30px; border-radius: 30% 0% 10% 50%; background: #D24D57; -webkit-transition: 0.8s; transition: 0.8s; transform-origin: top center; -webkit-transform-origin: top center; } .dog__foot:before { top: 8px; right: -4px; width: 7px; height: 13px; border-radius: 50%; transform: rotate(19deg); -webkit-transform: rotate(19deg); -moz-transform: rotate(19deg); background: #D24D57; } .dog__foot.active { -webkit-transition: 0.8s; transition: 0.8s; animation: foot 0.3s linear alternate-reverse infinite; } .dog__foot + .dog__foot { left: 32px; } .dog__foot + .dog__foot.active { -webkit-transition: 0.8s; transition: 0.8s; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0