使用Web动画接口实现的模糊淡入引用语动画

Quote Effect w/ Web Animation API

html5, web animation api

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@charset "UTF-8";
keyframes fadeQuotes to {
    opacity: 1;
}
* {
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    background: #000;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
blockquote {
    font-size: 3rem;
}
cite {
    display: block;
    text-align: right;
}
blockquote q {
    font-family: Georgia, serif;
    font-style: italic;
    letter-spacing: .1rem;
}
blockquote q span {
    will-change: opacity, filter;
    opacity: 0;
    -webkit-filter: blur(0px);
    filter: blur(0px);
}
cite {
    font-family: Verdana, Arial, sans-serif;
    margin-top: 1rem;
    font-size: .9rem;
    color: #aaa;
    font-style: normal;
    opacity: 1;
}
q {
    quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
    margin-right: .8rem;
}
q:after {
    content: close-quote;
}
q:before,
q:after {
    color: #ccc;
    font-size: 4rem;
}

HTML

Quote Effect w/ Web Animation API

html5, web animation api

编辑器支持Emmet

快捷键

Quote Effect w/ Web Animation API

html5, web animation api

使用WebAnimation接口实现的随机图片堆叠动画

使用SVG turbulence实现的水中月（水面倒影）动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：