使用CSS3弹性框布局flex-grow方法实现列宽弹性伸展动画效果

Flexbox Flex-Grow Example

css3, flexbox

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
.absolute-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
.home-mast {
    height: 100vh;
}
.home-mast__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
}
.home-mast__container > * {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 1em;
    -webkit-transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit-box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit-box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -webkit-box-flex 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, -ms-flex-positive 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.home-mast__container > *:hover {
    -webkit-box-flex: 3;
    -ms-flex-positive: 3;
    flex-grow: 3;
}
.home-mast__container > *:nth-child(1):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    background-color: #00a19b;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}
.home-mast__container > *:nth-child(1):hover:after {
    opacity: 0.65;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.home-mast__container > *:nth-child(2):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    background-color: #bb1654;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}
.home-mast__container > *:nth-child(2):hover:after {
    opacity: 0.65;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.home-mast__container > *:nth-child(3):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    background-color: #006ba6;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}
.home-mast__container > *:nth-child(3):hover:after {
    opacity: 0.65;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
.home-mast__container > *:nth-child(4):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    background-color: #e6661f;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}
.home-mast__container > *:nth-child(4):hover:after {
    opacity: 0.65;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

HTML

Flexbox Flex-Grow Example

css3, flexbox

编辑器支持Emmet

快捷键

Flexbox Flex-Grow Example

css3, flexbox

使用CSS3 flex弹性布局轻松实现区块悬停扩展动效

6个使用CSS3 transform-origin属性实现的方形翻转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：