宝马车营销文章界面设计

Blog post UI element 带些悬停折线变换效果。

h5, blog, 数字营销, template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
body {
    background-color: #ffffff;
    font-family: 'Noto Sans', sans-serif;
    text-align: center;
}
.main-wrapper {
    padding: 0 20px;
    position: relative;
}
.bg {
    height: 100%;
    width: 100%;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1;
}
.bg .bg-image {
    postion: absolute;
    width: 110%;
    margin-top: -5%;
    margin-left: -5%;
    height: 110%;
    background-image: url("/uploads/1905/bmw-M4.jpg");
    background-size: cover;
    display: block;
    filter: blur(10px);
    -webkit-filter: blur(10px);
}
.bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
}
h3 {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 700;
}
h3 span {
    font-weight: 400;
    padding-left: 8px;
    color: #9f9e9f;
    font-style: italic;
    font-size: 18px;
}
h3 span i {
    display: inline-block;
    width: 3px;
    margin-right: 6px;
    height: 14px;
    background-color: #6295ca;
    position: relative;
    transform: skewX(-15deg);
}
h3 span i:before {
    content: "";
    width: 3px;
    height: 14px;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 3px;
    background-color: #13274c;
}
h3 span i:after {
    content: "";
    width: 3px;
    height: 14px;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 6px;
    background-color: #d1253b;
}
p {
    color: #9f9e9f;
    font-size: 14px;
    line-height: 1.6em;
}
.blog-post-wrapper {
    position: relative;
    z-index: 4;
    padding: 150px 0;
}
.blog-post {
    background-color: #ffffff;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 0px 9px 13px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 9px 13px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 9px 13px 0px rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1);
}
.blog-post:hover .blog-post--image img {
    transform: scale(1.05);
}
.blog-post:hover:before {
    bottom: 33%;
}
.blog-post:before {
    content: "";
    display: block;
    background-color: #ffffff;
    bottom: 38%;
    left: -5%;
    z-index: 3;
    width: 150%;
    height: 25%;
    position: absolute;
    transform: rotate(8deg);
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.blog-post--image {
    position: relative;
    padding-bottom: 56.25%;
    margin: 0;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
}
.blog-post--image:hover:before {
    opacity: 1;
}
.blog-post--image:hover:after {
    opacity: 1;
    top: 50%;
}
.blog-post--image:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: block;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.blog-post--image:after {
    content: "+";
    font-weight: 700;
    color: #ffffff;
    position: absolute;
    width: 32px;
    height: 32px;
    line-height: 28px;
    border: 1px solid #ffffff;
    border-radius: 100%;
    top: 60%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
    font-size: 32px;
    line-height: 30px;
    z-index: 2;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.blog-post--image img {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    backface-visibility: hidden;
}
.blog-post--description {
    text-align: left;
    position: relative;
    z-index: 4;
    padding: 0 80px 30px 40px;
}
.blog-post--tools {
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}
.blog-post--tools:before {
    content: "";
    position: absolute;
    top: 0;
    left: 40px;
    width: 400px;
    height: 1px;
    background-color: #e0dfe1;
}
.icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0 8%;
    cursor: pointer;
}
.icon svg {
    fill: #e0dfe1;
    transition: all 0.2s ease-in;
}
.icon:hover svg {
    fill: #9f9e9f;
}
.icon span {
    text-transform: uppercase;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 11px;
}
#links {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50px;
    font-size: 13px;
    font-family: tahoma;
    color: #fff;
    z-index: 22;
}
#links a {
    text-decoration: none;
    font-size: 2.3em;
    color: #fff;
}
#twitter {
    position: absolute;
    bottom: 15px;
    right: 20px;
}
#pens {
    position: absolute;
    bottom: 15px;
    left: 20px;
}

HTML

<div class="bg">
    <i class="bg-image"></i>
</div>
<div class="main-wrapper">
    <div class="blog-post-wrapper">
        <div class="blog-post">
            <figure class="blog-post--image">
                <img src="/uploads/1905/bmw-M4.jpg" alt="" />
            </figure>
            <div class="blog-post--description">
                <h3>BMW<span><i></i>M4</span></h3>
                <p>Get behind the wheel of the M4 and prepare for explosive performance and the M division’s renowned handling capabilities. Power comes from a 425-hp twin-turbo inline six-cylinder, mated to either a six-speed manual or a paddle-shifted
                    seven-speed automatic and rear-wheel drive. For the ultimate M4, the Competition package makes 444 hp, with forged 20-inch wheels from the M4 GTS. Offered as a coupe or convertible, the M4 lives up to the legendary performance of the
                    M cars that came before it.</p>
            </div>
            <div class="blog-post--tools">
                <i class="icon icon-edit">
          <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 23.90625 3.96875 C 22.859286 3.96875 21.813178 4.3743215 21 5.1875 L 5.40625 20.78125 L 5.1875 21 L 5.125 21.3125 L 4.03125 26.8125 L 3.71875 28.28125 L 5.1875 27.96875 L 10.6875 26.875 L 11 26.8125 L 11.21875 26.59375 L 26.8125 11 C 28.438857 9.373643 28.438857 6.813857 26.8125 5.1875 C 25.999322 4.3743215 24.953214 3.96875 23.90625 3.96875 z M 23.90625 5.875 C 24.409286 5.875 24.919428 6.1069285 25.40625 6.59375 C 26.379893 7.567393 26.379893 8.620107 25.40625 9.59375 L 24.6875 10.28125 L 21.71875 7.3125 L 22.40625 6.59375 C 22.893072 6.1069285 23.403214 5.875 23.90625 5.875 z M 20.3125 8.71875 L 23.28125 11.6875 L 11.1875 23.78125 C 10.533142 22.500659 9.4993415 21.466858 8.21875 20.8125 L 20.3125 8.71875 z M 6.9375 22.4375 C 8.1365842 22.923393 9.0766067 23.863416 9.5625 25.0625 L 6.28125 25.71875 L 6.9375 22.4375 z" color="#000" overflow="visible" font-family="Bitstream Vera Sans"></path>
</svg>
          <span>Edit</span>
        </i>

<i class="icon icon-view">
          <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 16 4 C 13.856034 4 12.115821 5.7192819 12.03125 7.84375 C 8.4256342 9.3745502 6 12.943109 6 17 C 6 17.171429 5.9918718 17.361182 6 17.5625 C 4.8148148 18.259398 4 19.535137 4 21 C 4 23.197294 5.8027056 25 8 25 C 8.5746769 25 9.1294956 24.877678 9.625 24.65625 C 11.357552 26.112488 13.617671 27 16 27 C 18.382329 27 20.642448 26.112488 22.375 24.65625 C 22.870504 24.877678 23.425323 25 24 25 C 26.197294 25 28 23.197294 28 21 C 28 19.519644 27.174632 18.222803 25.96875 17.53125 C 25.984839 17.369789 26 17.208912 26 17 C 26 12.943109 23.574366 9.3745502 19.96875 7.84375 C 19.884179 5.7192819 18.143966 4 16 4 z M 16 6 C 17.116414 6 18 6.883586 18 8 C 18 9.116414 17.116414 10 16 10 C 14.883586 10 14 9.116414 14 8 C 14 6.883586 14.883586 6 16 6 z M 12.46875 9.84375 C 13.14027 11.11788 14.468937 12 16 12 C 17.531063 12 18.85973 11.11788 19.53125 9.84375 C 22.211252 11.143769 24 13.879438 24 17 C 21.802706 17 20 18.802706 20 21 C 20 21.894765 20.309727 22.70618 20.8125 23.375 C 19.474816 24.386517 17.755994 25 16 25 C 14.244006 25 12.525184 24.386517 11.1875 23.375 C 11.690273 22.70618 12 21.894765 12 21 C 12 18.802706 10.197294 17 8 17 C 8 13.879438 9.7887479 11.143769 12.46875 9.84375 z M 8 19 C 9.116414 19 10 19.883586 10 21 C 10 22.116414 9.116414 23 8 23 C 6.883586 23 6 22.116414 6 21 C 6 19.883586 6.883586 19 8 19 z M 24 19 C 25.116414 19 26 19.883586 26 21 C 26 22.116414 25.116414 23 24 23 C 22.883586 23 22 22.116414 22 21 C 22 19.883586 22.883586 19 24 19 z" color="#000" overflow="visible" font-family="Bitstream Vera Sans"></path>
</svg>
          <span>Share</span>
        </i>
            </div>
        </div>
    </div>
</div>

Blog post UI element 带些悬停折线变换效果。

h5, blog, 数字营销, template

编辑器支持Emmet

快捷键

Blog post UI element 带些悬停折线变换效果。

h5, blog, 数字营销, template

使用aos.js、css弹性框和网格布局实现的一款毛纺织品在线营销页面（响应式设计）

一款黄绿色调的信用卡付款界面设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：