CSS3-制作响应式放大菜单

第二章 CSS3基础项目

2.2 使用CSS3动画制作响应式放大菜单

功能要求：基于CSS3动画技术制作响应式放大菜单，当鼠标悬浮于菜单选项上时产生对该菜单进行放大的动画效果。

效果图如下：

放大后：

2.2.1动画效果的实现

首先在CSS内部样式表中使用@keyframes设置动画效果，并为其自定义动画名称。下面的代码表示在动画刚开始时缩放元素为原本的大小，然后逐步放大元素的宽和高，直到动画即将结束时将元素放大到原来的1.3倍。

/*自定义动画效果*/
@keyframes myframe{
    from{
        transform:scale(1.0,1.0);
    }
    to{
        transform:scale(1.3,1.3);
    }
}

然后在CSS内部样式表中为

元素设置鼠标悬浮时的样式变化，下面的代码表示动画持续时间为0.5s。

/*鼠标悬浮事件设置*/
div:hover{
    animation