css3导航渐变 滑过显示动画

要点学习：【web前端25群】群号618237474

双背景设置
body{background:url("images/bg_title.jpg") top center repeat-x,url('images/bg.jpg');}

渐变背景色
#Logo{width:895px; height:45px; margin:50px auto;background-image: -webkit-linear-gradient(rgba(41, 41, 41, 0.75) 0%, rgba(54, 54, 54, 0.72) 50%, rgba(24, 23, 23, 0.94) 51%); border-radius:5px; box-shadow:1px 1px 33px #fff;}

鼠标滑过动画效果
#Logo ul li:hover ul{display:block;-webkit-animation:animated .5s ease;}
@-webkit-keyframes animated
        {
        0%                {-webkit-transform: rotate(0deg);opacity:0;}
        100%        {-webkit-transform: rotate(-360deg);opacity:1;}
        }