使用SVG和CSS3实现的波浪型页头模板

Wavy page header，可用于饮料、饮品类型的网站和移动应用首页。

html5, template

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #F69899;
    font-family: 'arcon';
    overflow: hidden;
}
body a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: color 0.25s cubic-bezier(0.64, 0.57, 0.67, 1.53);
    transition: color 0.25s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
body .underbackground {
    background-color: #FAFAFA;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 120px;
}
body .underbackground .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: calc(50% - 10px);
    left: 30px;
    right: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1000;
    color: #F69899;
    line-height: 32px;
}
body .underbackground .header a {
    font-size: 18px;
    padding: 0 10px;
}
body .underbackground .header a:hover {
    color: #AD5858;
}
body .underbackground .header .title {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
body .underbackground .header .title a {
    font-size: 32px;
}
body .backgrounds .background {
    position: absolute;
    height: 20px;
    left: 0px;
    right: 0px;
    top: 120px;
    -webkit-animation: bg 2s ease-in-out infinite;
    animation: bg 2s ease-in-out infinite;
}
body .backgrounds .background .head {
    position: absolute;
    bottom: 100%;
    left: 0px;
    right: 0px;
    height: 20px;
}
body .backgrounds .background.layer-3 {
    background-color: #FAF0F0;
    top: 110px;
}
body .backgrounds .background.layer-3 .head {
    background: url(/uploads/1703/grapefruitwave_3.svg);
    background-position: -60px 0px;
}
body .backgrounds .background.layer-2 {
    background-color: #FBD7D7;
    top: 114px;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}
body .backgrounds .background.layer-2 .head {
    background: url(/uploads/1703/grapefruitwave_2.svg);
    background-position: -40px 0px;
}
body .backgrounds .background.layer-1 {
    height: 30px;
    background-color: #F69899;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
body .backgrounds .background.layer-1 .head {
    background: url(/uploads/1703/grapefruitwave_1.svg);
}
body .backgrounds .strawimage {
    z-index: 10000;
    position: absolute;
    background-image: url(/uploads/1703/grapefruit_straw.svg);
    background-size: 30px 1316px;
    width: 30px;
    height: 1097px;
    top: 70px;
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
    right: 120px;
    -webkit-animation: straw 2s ease-in-out infinite;
    animation: straw 2s ease-in-out infinite;
}
body section.content {
    position: absolute;
    top: 150px;
    left: 20px;
    right: 220px;
    color: #fff;
}
body section.content h1,
body section.content h2,
body section.content h3,
body section.content h4,
body section.content h5,
body section.content h6,
body section.content p {
    margin: 0;
    font-weight: 400;
}
body section.content h1 {
    font-size: 32px;
}
@-webkit-keyframes bg {
    0%, 100% {
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
    }
    50% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}
@keyframes bg {
    0%, 100% {
        -webkit-transform: translateY(12px);
        transform: translateY(12px);
    }
    50% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}
@-webkit-keyframes straw {
    0%, 100% {
        -webkit-transform: translateY(-2px) rotate(6deg);
        transform: translateY(-2px) rotate(6deg);
    }
    50% {
        -webkit-transform: translateY(0px) rotate(6deg);
        transform: translateY(0px) rotate(6deg);
    }
}
@keyframes straw {
    0%, 100% {
        -webkit-transform: translateY(-2px) rotate(6deg);
        transform: translateY(-2px) rotate(6deg);
    }
    50% {
        -webkit-transform: translateY(0px) rotate(6deg);
        transform: translateY(0px) rotate(6deg);
    }
}

HTML

Wavy page header，可用于饮料、饮品类型的网站和移动应用首页。

html5, template

编辑器支持Emmet

快捷键

Wavy page header，可用于饮料、饮品类型的网站和移动应用首页。

html5, template

使用D3.js（Canvas）和SVG滤镜实现的彩色粘稠染料点滴滑落动画特效

使用SVG和CSS3滤镜实现的反乌托邦式（负能量）图像特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：