使用SVG图片实现的3D悬挂标语（标牌）

可用来制作3d铭牌、指示牌等。

svg, 3d, label

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
    window.onload = function() {

var label = document.getElementById("label"),
            labelBg = document.getElementById("labelBg"),
            rope = document.getElementById("rope"),
            wrapper = document.getElementById("wrapper");

TweenMax.set(wrapper, {
            perspective: 600
        });
        TweenMax.set(label, {
            transformStyle: "preserve-3d",
            transformOrigin: "50% 0%",
            rotationX: 45,
            rotationY: -2
        });

var mainTl = new TimelineMax({
            repeat: -1
        });

function getTl1() {
            var tl1 = new TimelineMax();
            tl1.to(label, 1.5, {
                    rotationX: -45,
                    rotationY: 2,
                    autoAlpha: 1,
                    ease: Sine.easeInOut,
                }),

tl1.to(label, 1.5, {
                    rotationX: 45,
                    rotationY: -2,
                    autoAlpha: 1,
                    ease: Sine.easeInOut,
                });
            return tl1;
        }

function getTl2() {
            var tl2 = new TimelineMax();
            tl2.to([labelBg, rope], 1.5, {
                    attr: {
                        fill: "#d0b5ff"
                    },
                    ease: Sine.easeInOut,
                }),
                tl2.to([labelBg, rope], 1.5, {
                    attr: {
                        fill: "#fff"
                    },
                    ease: Sine.easeInOut,
                });

return tl2;
        }

function init() {
            mainTl
                .add(getTl1(), 0).add(getTl2(), 0);
        }
        init();

};
});

编译

CSS

HTML

</div>
            </div>
        </foreignobject>
    </svg>
</div>

可用来制作3d铭牌、指示牌等。

svg, 3d, label

编辑器支持Emmet

快捷键

可用来制作3d铭牌、指示牌等。

svg, 3d, label

使用SVG滤镜和CSS3实现的按钮悬停粘稠（肿胀）变形动画

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：