CSS3菜单下划线浮动悬停动效

CSS3 Underline Hover Effect

css3, menu, hover

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3076
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu:700);
body {
    background-color: #f0f0f0;
    font-family: 'Ubuntu', sans-serif;
}
ul {
    list-style-type: none;
    margin: 0;
    text-align: center;
    margin-top: 10%;
}
ul li {
    display: inline-block;
    margin: 0 20px;
}
a {
    font-size: 20px;
    color: #584e4a;
    position: relative;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 8px;
}
a:before,
a:after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #f37272;
}
a:before {
    opacity: 0;
    -webkit-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-transition: -webkit-transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
    transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s;
}
a:after {
    opacity: 0;
    -webkit-transform: translateY(4px);
    -ms-transform: translateY(4px);
    transform: translateY(4px);
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}
a:hover:before,
a:hover:after,
a:focus:before,
a:focus:after {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
a:hover:before,
a:focus:before {
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}
a:hover:after,
a:focus:after {
    -webkit-transition: -webkit-transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
    transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s;
}

HTML

CSS3 Underline Hover Effect

css3, menu, hover

编辑器支持Emmet

快捷键

CSS3 Underline Hover Effect

css3, menu, hover

CSS3 2个实用的鼠标悬停文本下划线动画效果

HTML5 CSS3沿着对角线遮掩拉开浮层的图片悬停动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：