d3fc打造一个三维K线图牛市上升交互效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：d3fc打造一个三维K线图牛市上升交互效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/d3fc/5.2.0/d3fc.min.css'>
<style>
#viewport {
    margin: 20px auto;
    background: black;
    overflow: hidden;
    perspective: 100px;
    transform-style: preserve-3d;
}

@keyframes camera-path {
    from {
        transform: rotateX(13deg) rotateY(9deg) translate3d(165px, -4px, 26px);
    }
    to {
        transform: rotateX(-1deg) rotateY(8deg) translate3d(165px, -4px, 52px);
    }
}

#camera {
    padding-bottom: 56.25%;
    transform-style: preserve-3d;
    animation: camera-path 15s linear 0s infinite alternate;
}

#background {
    position: absolute;
    transform: translateZ(-30px);
}

#midground {
    position: absolute;
}

#foreground {
    position: absolute;
    transform: translateZ(20px);
}

.annotation>line {
    stroke: rgb(255, 255, 51);
    stroke-dasharray: 0;
    stroke-opacity: 0.5;
}

.gridline {
    stroke: white;
    stroke-dasharray: 1, 2;
}

.candlestick>.up {
    fill: white;
    stroke: rgba(77, 175, 74, 1);
}
.candlestick>.down {
    fill: black;
    stroke: rgba(77, 175, 74, 1);
}

.bollinger-bands>.area,
.bollinger-bands>.average {
    visibility: hidden;
}
.bollinger-bands>.upper>path {
    stroke: rgba(55, 126, 184, 1);
    stroke-width: 2px;
}
.bollinger-bands>.lower>path {
    stroke: rgba(77, 175, 74, 1);
    stroke-width: 2px;
}

.ema>path {
    stroke: rgba(228, 26, 28, 1);
    stroke-width: 2px;
}

.label {
    stroke: white;
    text-anchor: initial;
}
</style>

</head>
<body translate="no">
<div id="viewport">
<div id="camera">
<svg id="background" viewbox="0 0 1024 576" mask="url(#mask)">
<g id="vertical-lines" />
</svg>
<svg id="midground" viewbox="0 0 1024 576">
<defs>
<mask id="mask">
<rect width="1024" height="576" fill="white" />
<rect width="1024" height="576" fill="url(#mask-horizontal-gradient)" />
<rect width="1024" height="576" fill="url(#mask-vertical-gradient)" />
<linearGradient id="mask-horizontal-gradient" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-opacity="1" />
<stop offset="30%" stop-opacity="0" />
<stop offset="70%" stop-opacity="0" />
<stop offset="100%" stop-opacity="1" />
</linearGradient>
<linearGradient id="mask-vertical-gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-opacity="1" />
<stop offset="30%" stop-opacity="0" />
<stop offset="70%" stop-opacity="0" />
<stop offset="100%" stop-opacity="1" />
</linearGradient>
</mask>
<filter id="blur" x="0%" y="0%" width="30%" height="100%">
<feImage xlink:href="#series" x="0" y="0" width="1024" height="576" result="image" />
<feGaussianBlur in="image" stdDeviation="5" />
</filter>
<mask id="blur-mask" x="0%" y="0%" width="30%" height="100%">
<rect width="1024" height="576" fill="url(#blur-mask-gradient)" />
<linearGradient id="blur-mask-gradient" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="white" />
<stop offset="30%" stop-color="black" />
</linearGradient>
</mask>
<mask id="inverted-blur-mask" x="0%" y="0%" width="100%" height="100%">
<rect width="1024" height="576" fill="url(#inverted-blur-mask-gradient)" />
<linearGradient id="inverted-blur-mask-gradient" x1="0" x2="1" y1="0" y2="0">
<stop offset="0%" stop-color="black" />
<stop offset="30%" stop-color="white" />
</linearGradient>
</mask>
<filter id="flare" x="40%" y="30%" width="11%" height="40%">
<feImage xlink:href="#series" x="0" y="0" width="1024" height="576" result="image" />
<feFlood flood-color="white" result="white-flood" />
<feComposite in="white-flood" in2="image" operator="atop" result="white-image" />
<feGaussianBlur in="white-image" stdDeviation="3" result="white-blur" />
<feColorMatrix type="saturate" in="image" values=".........完整代码请登录后点击上方下载按钮下载查看