使用CSS3 transform:matrix3d实现的搜索框变形动画

Search Box Animation using CSS3 Matrix3d Transforms CSS3 matrix3d使用4*4的齐次矩阵来描述变换，完成复杂的位移、旋转功能。 Read more on: https://dev.opera.com/articles/understanding-the-css-transforms-matrix/

css3, search, widget

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    transition: 0.5s ease all;
    font-family: "Avenir", "Helvetica Neue";
}
.background {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: #225faa;
    background: linear-gradient(135deg, #7C7CB9 0%, #484887 100%);
    overflow: scroll;
}
.main {
    margin: 200px auto;
    width: 90%;
    max-width: 600px;
}
.search {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    animation: hide 500ms ease;
    margin: 0px auto;
}
.search input {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    position: absolute;
    left: 0px;
    width: 80%;
    border: 0;
    outline: 0;
    border-radius: 5px;
    padding: 5px 20px;
}
.search:hover {
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}
.search.active {
    width: 100%;
    border-radius: 5px;
    text-align: left;
    padding: 0 10px;
    animation: show 500ms ease;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1);
}
.search.active input {
    display: block;
}
.search.active .ion-ios-search {
    display: none !important;
}
.search.active .ion-ios-close-empty {
    float: right;
    display: block !important;
}
.search .icon {
    font-size: 1.2em;
    line-height: 40px;
}
.search .icon.ion-ios-search {
    display: block;
}
.search .icon.ion-ios-close-empty {
    display: none;
    font-size: 1.6em;
    padding: 0px 10px;
}
@keyframes hide {
    0% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1);
    }
    20% {
        transform: rotate(-5deg) matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, -20, 1, 1);
    }
    100% {
        transform: rotate(0deg) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1);
    }
}
@keyframes show {
    0% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1);
    }
    10% {
        transform: rotate(10deg) matrix3d(1.1, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 10, 1, 1);
    }
    80% {
        transform: rotate(-5deg) matrix3d(1, 0.1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1);
    }
    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1);
    }
}

HTML

Search Box Animation using CSS3 Matrix3d Transforms CSS3 matrix3d使用4*4的齐次矩阵来描述变换，完成复杂的位移、旋转功能。 Read more on: https://dev.opera.com/articles/understanding-the-css-transforms-matrix/

css3, search, widget

编辑器支持Emmet

快捷键

Search Box Animation using CSS3 Matrix3d Transforms CSS3 matrix3d使用4*4的齐次矩阵来描述变换，完成复杂的位移、旋转功能。 Read more on: https://dev.opera.com/articles/understanding-the-css-transforms-matrix/

css3, search, widget

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

使用CSS3矩阵变换（transform:matrix）实现的圆周运动

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：