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