div+css实现卡通可爱番茄悬浮张嘴摆动动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现卡通可爱番茄悬浮张嘴摆动动画效果代码
代码标签: div css 卡通 可爱 番茄 悬浮 张嘴 摆动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> ::-moz-selection{background:#1A1A1A;color:#FFF} ::selection{background:#1A1A1A;color:#FFF} a{text-decoration:none;cursor:pointer} a:hover{text-decoration:underline} html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline} html,body{overflow-X:hidden} .kolor-tla{background-color:#CD4F5D;-webkit-transition:background .3s ease-in-out;transition:background .3s ease-in-out} .pozycja{display:table;position:absolute;height:100%;width:100%} .srodek{display:table-cell;vertical-align:middle;padding:20px 0px} span{display:block} #qlogo{width:200px;height:240px;margin:0 auto;text-align:center;position:relative;border:3px solid transparent;-webkit-transition:border-color .3s ease-in-out;transition:border-color .3s ease-in-out} .poziomq{text-align:center;position:relative;top:33%;display:inline-block;width:105px;-webkit-animation:ruchLewitacja 3s ease-in-out infinite;animation:ruchLewitacja 3s ease-in-out infinite} .cialo{background:#F67872;margin:0 auto;width:105px;height:105px;border-radius:25%;position:relative} .liscie{position:relative} .liscie .lodyga{width:25px;height:45px;border:10px solid #44A48E;border-bottom:none;border-right:none;position:absolute;top:-60px;left:50%;margin-left:-5px;border-top-left-radius:30px} .liscie .lisc-lewy{width:0px;height:10px;border:10px solid #44A48E;border-top:none;position:absolute;top:-25px;left:20px;border-bottom-left-radius:10px} .liscie .lisc-lewy.drugi{left:31px} .liscie .lisc-prawy{width:0px;height:10px;border:10px solid #44A48E;border-top:none;position:absolute;top:-25px;right:21px;border-bottom-right-radius:10px} .liscie .lisc-prawy.drugi{right:32px} .liscie .after{content:"";display:block;width:0px;height:0px;positi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0