HTML5 性感的微博/微信个人网页模板

可用于移动应用中的个人主页。

profile, template

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
    font-size: 16px;
}
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    float: left;
}
body {
    background: #f0efed;
    background-image: -webkit-linear-gradient(top, #e5e4e5, #c2c1c2);
    background-image: linear-gradient(to bottom, #e5e4e5, #c2c1c2);
    font-family: 'ProximaNova-Regular', Helvetica neue, sans-serif;
}
.container {
    max-width: 350px;
    width: 100%;
    height: 100%;
    position: relative;
    margin: auto;
}
.card-profile {
    float: left;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 530px;
    background: #fff;
    border-radius: 10px;
    z-index: 1;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.card-profile:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    box-shadow: 0 36px 64px -34px black, 0 16px 14px -14px rgba(0, 0, 0, 0.6), 0 22px 18px -18px rgba(0, 0, 0, 0.4), 0 22px 38px -18px black;
    -webkit-transform: scaleX(0.7) scaleY(1.3) translateY(-15%);
    -ms-transform: scaleX(0.7) scaleY(1.3) translateY(-15%);
    transform: scaleX(0.7) scaleY(1.3) translateY(-15%);
    z-index: -1;
    opacity: 0.25;
}
.card-profile_visual {
    height: 68%;
    overflow: hidden;
    position: relative;
    background: -webkit-linear-gradient(top, #3b3c3f, #263d85, #172551);
    background: linear-gradient(to bottom, #3b3c3f, #263d85, #172551);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.card-profile_visual:before,
.card-profile_visual:after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    background: url(/uploads/160501/face.jpg) no-repeat center center/cover;
    opacity: 0.5;
    mix-blend-mode: lighten;
}
.card-profile_visual:before {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.card-profile_visual:after {
    z-index: 2;
    mix-blend-mode: lighten;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAABUUlRERkRMSkxMTkxEQkT490VOAAAAAXRSTlMAQObYZgAAAoxJREFUOI0dlImR5DAIRRXDbgaAEwCcAOAEZE/+qczTdFf1JQH/otd4SJWWf5+m7GjR28Z0TZW38pLjj1aWJl9eWaGfaCq/y4y012hPhqySnnbXe7Q6ulK6nZeV5bpjhyo9xLj7apvFSk3zSXEmtEZmNngYbhWhkmKne7XalnDrYcZMNwMlwuQuj/ezS2dJmpjEFwLe7T7zWE0zo22icr4dNZnfOLUp72rNcA8vcx3Y8r3MZpYOPSAC6mfSGRQBD1sZyFPd9b0mohN70CQTSa6+Ik15RifUaCjWq6zp2/9T697e5VsRKGUl4I4WnWpOxVAI7FoMEsrp2gLUCgH9J84B8o1Sgrb+0auEdrpocIQzU94mHBmMuliIlFemt0s8w3mUe0ssLnaecjllDunTW20d33ZxkUOoSIJbrWxZiHjdhV190e5AzjwONn4ASvTCC5CcKfywuFMBe1QpYjG0x38nJYAcR26k54o8YiXqeC7Hcth54lfwSPlHOBfOE9F0rGguJsr1V+GroafdEC+3qK2HX8Qsf0lWEwX0J29Pkh2lmFB33wKZBB8Rlhpj5AVBd6mTMYBC4cZzKNb6SygJJ3dnNIqkHnuwVgvaoCFcomyI6c+QEvxq0tKEiQCe9QoS18kaKFMl7wqEqJ2A6XkQMejE1dEcu7G/g1JRmHMOkjGIvqXHErayVgdJIIJsGBw1LzaijlFdExOIInKEOZ/oReBCsDlepSPBvRCAj/n10gfjFIml8rVSUDz2ISKeDxmFuviLVSzJOCqxtXToeJpNJr9Pnij+LQ4A/cgXDyuATWyPkrJ1En1cvPk3sB8VfMLIvwO5CKu+uC1OFNLvvoe0h97ieKNjsUkc/zQ6V/0CAoboTZwdKY4AAAAASUVORK5CYII=);
    opacity: 1;
}
.card-profile_user-infos {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    margin: auto;
    top: calc(68% - 100px);
    color: #fff;
    text-align: center;
}
.card-profile_user-infos a {
    width: 64px;
    height: 64px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #f96b4c;
    background-image: -webkit-linear-gradient(#f96b4c, #f23182);
    background-image: linear-gradient(#f96b4c, #f23182);
    display: block;
    clear: both;
    margin: auto;
    border-radius: 100%;
    top: calc(500% + 66px);
    box-shadow: 0 2px 0 #d42d78, 0 3px 10px rgba(243, 49, 128, 0.15), 0 0px 10px rgba(243, 49, 128, 0.15), 0 0px 4px rgba(0, 0, 0, 0.35), 0 5px 20px rgba(243, 49, 128, 0.25), 0 15px 40px rgba(243, 49, 128, 0.75), inset 0 0 15px rgba(255, 255, 255, 0.05);
    overflow: hidden;
}
.card-profile_user-infos a:after {
    content: '';
    font-style: normal;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background-image: url("/uploads/160501/icon-add-f.svg");
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: center center;
    left: 0;
    top: 0;
}
.card-profile_user-infos .infos_name,
.card-profile_user-infos .infos_nick {
    display: block;
    clear: both;
    padding: 0.5em 0;
    padding-top: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    top: 8px;
    font-weight: 800;
}
.card-profile_user-infos .infos_nick {
    top: 32px;
    font-size: 14px;
    font-weight: 300;
}
.card-profile_user-stats {
    background: #fff;
    float: left;
    width: 100%;
    height: calc(100% - 68% + 2px);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.card-profile_user-stats .stats-holder {
    position: absolute;
    width: 100%;
    top: calc(70% + 4em);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.card-profile_user-stats .user-stats {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
}
.card-profile_user-stats .user-stats strong {
    display: block;
    float: left;
    clear: both;
    width: 100%;
    color: #b3b1b2;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.2px;
}
.card-profile_user-stats .user-stats span {
    font-size: 26px;
    color: #5e5e5e;
    padding: 0.18em 0;
    display: inline-block;
}

HTML

可用于移动应用中的个人主页。

profile, template

编辑器支持Emmet

快捷键

可用于移动应用中的个人主页。

profile, template

HTML5 CSS3很棒的一个弹性框栅格网站首页布局模板

HTML5 Zepto.js 移动版本（微信H5）的2015春节回家温情动画网页应用模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：