HTML5 SVG页面滚动时雾凇样式的背景图片揭露特效

Image Mask Reveal Animation, 模拟窗户上的冰雾消融的视觉特效。带向下滚动提示箭头动画。

svg, polygon, mask

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    height: 2000px;
}
h1 {
    position: fixed;
    top: 50%;
    left: 50%;
    font-family: sans-serif;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
h1 svg {
    width: 14px;
    display: block;
    margin: 10px auto;
}
h1 svg .arrow {
    -webkit-animation: scroll .35s ease-in alternate infinite;
    animation: scroll .35s ease-in alternate infinite;
}
@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
}
@keyframes scroll {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
}
#cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://images.unsplash.com/45/Ss2c5MVASdGkVHOwG6n9_Imogene%20Pass.jpg?dpr=1&auto=format&fit=crop&w=1500&h=997&q=80&cs=tinysrgb&crop=");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-mask: url("/uploads/1705/video-clip-mask.png?v=1");
    mask: url("/uploads/1705/video-clip-mask.png?v=1");
    -webkit-mask-size: 1800% 100%;
    mask-size: 1800% 100%;
}

HTML

Image Mask Reveal Animation, 模拟窗户上的冰雾消融的视觉特效。带向下滚动提示箭头动画。

svg, polygon, mask

编辑器支持Emmet

快捷键

Image Mask Reveal Animation, 模拟窗户上的冰雾消融的视觉特效。带向下滚动提示箭头动画。

svg, polygon, mask

HTML5 SVG联系我们页面的一个按钮变形和弹窗动画

HTML5 SVG很有趣的一个跳跃式分页动画控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：