Canvas 头发模拟

Soure: http://soulwire.co.uk/experiments/muscular-hydrostats/

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Quicksand);
html,
body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q0NTY1NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2MyMzEzMSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -moz-radial-gradient(#d45656, #c23131 100%);
    background: -webkit-radial-gradient(#d45656, #c23131 100%);
    background: radial-gradient(#d45656, #c23131 100%);
}
canvas {
    width: 100%;
    height: 100%;
}
#tag.before {
    width: 0;
    left: 0;
    padding: 15px 0 0 0;
}
#tag.before h1,
#tag.before p,
#tag.before ul,
#tag.before span {
    opacity: 0;
    -moz-transform: translate3d(-50px, 0, 0);
    -ms-transform: translate3d(-50px, 0, 0);
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0);
}
#tag.in {
    width: 220px;
}
#tag {
    -moz-transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);
    -o-transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);
    -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);
    transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);
    position: fixed;
    width: 180px;
    height: 180px;
    top: 20px;
    left: 20px;
    font-family: "Quicksand", sans-serif;
    padding: 15px 0 0 20px;
    background-color: #000;
    color: #fff;
}
#tag h1,
#tag p,
#tag ul,
#tag span {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#tag h1 {
    -moz-transition: all 0.3s ease-in-out 0.3s;
    -o-transition: all 0.3s ease-in-out 0.3s;
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-transition-delay: 0.3s;
    transition: all 0.3s ease-in-out 0.3s;
    font-size: 30px;
    font-weight: 400;
    margin: 0;
}
#tag p {
    -moz-transition: all 0.3s ease-in-out 0.4s;
    -o-transition: all 0.3s ease-in-out 0.4s;
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-transition-delay: 0.4s;
    transition: all 0.3s ease-in-out 0.4s;
}
#tag ul {
    -moz-transition: all 0.3s ease-in-out 0.6s;
    -o-transition: all 0.3s ease-in-out 0.6s;
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-transition-delay: 0.6s;
    transition: all 0.3s ease-in-out 0.6s;
}
#tag p,
#tag ul a {
    font-size: 12px;
    font-weight: 700;
}
#tag a {
    color: white;
    text-decoration: none;
}
#tag a:hover {
    background-color: #333;
    color: white;
    border-bottom: 1px solid #d45656;
}
#tag span {
    -moz-transition: all 0.3s ease-in-out 0.7s;
    -o-transition: all 0.3s ease-in-out 0.7s;
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-transition-delay: 0.7s;
    transition: all 0.3s ease-in-out 0.7s;
    display: inline-block;
    margin-top: 20px;
    font-size: 10px;
}
#tag ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

HTML

Soure: http://soulwire.co.uk/experiments/muscular-hydrostats/

编辑器支持Emmet

快捷键

Soure: http://soulwire.co.uk/experiments/muscular-hydrostats/

Canvas 2D模拟3D动态水波

HTML5 Canvas 模拟汤汁泼溅在玻璃上的弹性炸开动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：