CSS3 transition过渡效果-下拉框

自定义字体过渡

css3, dropdown

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@font-face {
    font-family: 'iconfont';
    src: url('/uploads/user_upload/36477/iconfont3.ttf');
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
}
.us {
    background: #009fca;
    height: 85px;
    line-height: 85px;
    font-size: 14px;
    font-weight: 900;
    padding: 0 30px;
    color: #fff;
    text-indent: 10px;
    position: relative;
    transition: 0.5s;
}
.us .box {
    width: 210px;
    height: 0px;
    background: #0082a5;
    position: absolute;
    top: 85px;
    left: 0;
    overflow: hidden;
    transition: 0.5s;
}
ul {
    list-style: none;
}
.us .box li {
    font-size: 20px;
    color: #fff;
    font-weight: 900;
    margin-top: 20px;
    line-height: 1em;
}
.us .box li span {
    font-size: 14px;
    color: #fff;
    font-weight: 100;
}
.us .box p {
    text-align: center;
    float: left;
    margin: 25px 5px 0 10px;
    color: #fff;
    line-height: 2em;
    font-size: 14px;
}
.us .box p img {
    display: block;
}
.us:hover {
    background-color: #0082a5;
}
.us:hover .box {
    height: 250px;
}

HTML

自定义字体过渡

css3, dropdown

编辑器支持Emmet

快捷键

自定义字体 过渡

css3, dropdown

CSS3 使用shape-outside属性生成圆形外框效果

CSS3 Flat和preserve-3d两种transform-style属性效果的演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

自定义字体过渡