HTML5带倒影动画特效的泰陵（皇宫陵园）图标

html5, gsap, tower

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

TweenMax.defaultEase = CustomEase.create("dedf", "M0,0 C0.324,0.174 0.434,0.972 0.634,1.07 0.835,1.168 0.82,0.95 1,1");

var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    container = select('.container'),
    spacer = 4;

TweenMax.set('svg', {
    visibility: 'visible'
})

CustomEase.create('ripple1', 'M0,0 C0.388,0.228 0.3,0.852 0.458,1 0.65,1.18 0.586,0.094 1,0');
CustomWiggle.create('wiggle1', {
    wiggles: 3,
    ease: 'ripple1'
})

TweenMax.set('.taj', {
    scale: 7,
    x: 278,
    y: 120
})
var linesTl = new TimelineMax();

function makeLines() {

for (var i = 0; i < 40; i++) {
        var line = select('.myLine').cloneNode(true);
        container.appendChild(line);

TweenMax.set(line, {
            scaleX: Math.sin(i / 11.6),
            transformOrigin: '50% 50%',
            x: 0,
            y: 303 + (i * spacer),
            alpha: 0
        })
    }

linesTl.staggerTo('.myLine', 4.2, {
        scaleX: 0.4,
        repeat: -1,
        ease: 'wiggle1'
    }, 0.25);

linesTl.seek(1000);
}
makeLines();

var buildTl = new TimelineMax();
var mainTl = new TimelineMax({
    delay: 0.8
});

buildTl.from(['.outline', '.maskCircle'], 1, {
        scale: 0,
        transformOrigin: '50% 50%'
    })
    .from('.water', 1, {
        scaleX: 0,
        transformOrigin: '50% 50%'
    }, '-=1')
    .staggerFrom(['.botSemi', '.topSemi'], 1, {
        cycle: {
            y: [260, -260]
        },
        ease: Sine.easeOut
    }, 0.2, '-=1')

.from('.taj', 0.5, {
    y: 400,
    ease: Expo.easeOut
}, '-=0.36')

.staggerTo(['.botGrad', '.topGrad'], 1, {
    alpha: 1,
    ease: Power1.easeOut
}, 0.005)

.staggerTo('.container line', 1, {
    alpha: 1,
    ease: Power2.easeOut
}, 0.05)

mainTl.add(buildTl, 0);
//mainTl.add(linesTl, 0);

document.body.onclick = function() {

mainTl.play(0);
}

编译

CSS

HTML

</clipPath>
        <clipPath id="waterMask">
            <polygon fill="#000" stroke="none" stroke-width="0" stroke-miterlimit="10" points="73.1,579.1 380.2,300 421,300 742,579.1 
	" />
        </clipPath>
        <clipPath id="topSemiMask">
            <rect id="topSemi" width="100%" height="300" y="0" />

</clipPath>
    </defs>

</svg>
  
  <script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script><script src='/uploads/161101/CustomEase.min.js'></script><script src='/uploads/161101/CustomWiggle.min.js'></script>

html5, gsap, tower

编辑器支持Emmet

快捷键

html5, gsap, tower

美轮美奂的HTML5/Canvas散影（焦外成像）背景动画特效

HTML5柏林噪音算法实现的墨汁浸染背景图片过渡动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：