SVG悬停动画：塔楼和云梯 - 踏得网

SVG Hover Animation： The Tower

svg, stage

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #1e1e1e;
}
.center {
    text-align: center;
    padding: 60px;
}
#MonValley #BrightDoor {
    transition: all 0.3s ease-in-out;
    opacity: 0;
}
#MonValley:hover #BrightDoor {
    opacity: 1;
}
#MonValley #Step1 {
    transition: all .65s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step1 {
    transform: translate(0px, 0px);
}
#MonValley #Step2 {
    transition: all .6s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step2 {
    transform: translate(0px, 0px);
}
#MonValley #Step3 {
    transition: all .55s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step3 {
    transform: translate(0px, 0px);
}
#MonValley #Step4 {
    transition: all .5s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step4 {
    transform: translate(0px, 0px);
}
#MonValley #Step5 {
    transition: all .45s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step5 {
    transform: translate(0px, 0px);
}
#MonValley #Step6 {
    transition: all .4s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step6 {
    transform: translate(0px, 0px);
}
#MonValley #Step7 {
    transition: all .35s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step7 {
    transform: translate(0px, 0px);
}
#MonValley #Step8 {
    transition: all .3s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step8 {
    transform: translate(0px, 0px);
}
#MonValley #Step9 {
    transition: all .25s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step9 {
    transform: translate(0px, 0px);
}
#MonValley #Step10 {
    transition: all .2s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step10 {
    transform: translate(0px, 0px);
}
#MonValley #Step11 {
    transition: all .15s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step11 {
    transform: translate(0px, 0px);
}
#MonValley #Step12 {
    transition: all .1s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step12 {
    transform: translate(0px, 0px);
}
#MonValley #Step13 {
    transition: all .05s ease-in-out;
    transform: translate(0px, 132px);
}
#MonValley:hover #Step13 {
    transform: translate(0px, 0px);
}

HTML

<div class="center">
    <svg id="MonValley" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="400.001px" viewBox="0 0 300 300.001" enable-background="new 0 0 300 300.001" xml:space="preserve">
        <g id="Background">
            <path d="M300,275.612c0,13.506-10.949,24.456-24.455,24.456H24.455C10.949,300.068,0,289.118,0,275.612V24.523
		C0,11.017,10.949,0.067,24.455,0.067h251.089C289.05,0.067,300,11.017,300,24.523V275.612z" />
            <polygon fill="#213C45" points="180.745,294.673 189.226,299.762 216.677,299.762 216.677,103.068 180.745,124.628 	" />
            <path fill="#566560" d="M216.677,299.762h7.176c10.18,0,19.885-2.016,28.759-5.646V124.628l-35.935-21.56V299.762z" />
            <polygon fill="#738A91" points="216.677,103.068 180.745,124.628 216.677,146.188 252.612,124.628 	" />
            <polygon fill="#5E7887" points="216.677,110.83 193.681,124.628 216.677,138.426 239.675,124.628 	" />
            <polygon fill="#738A91" points="216.677,117.563 204.904,124.628 216.677,131.692 228.453,124.628 	" />
            <linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="150" y1="255.5474" x2="150" y2="-2.5565">
                <stop offset="0.0859" style="stop-color:#000000" />
                <stop offset="1" style="stop-color:#000000;stop-opacity:0" />
            </linearGradient>
            <path fill="url(#SVGID_13_)" d="M0,52.931v222.681c0,12.192,8.925,22.3,20.598,24.15h258.805
		c11.673-1.851,20.598-11.958,20.598-24.15V52.931H0z" />
            <path fill="#213C45" d="M52.325,295.804c7.606,2.554,15.739,3.958,24.205,3.958h20.712V62.351l-44.917,26.95V295.804z" />
            <polygon fill="#566560" points="97.242,299.762 142.159,299.762 142.159,89.301 97.242,62.351 	" />
            <polygon fill="#738A91" points="97.242,62.351 52.325,89.301 97.242,116.251 142.159,89.301 	" />
            <polygon fill="#5E7887" points="97.242,72.053 68.495,89.301 97.242,106.549 125.989,89.301 	" />
            <polygon fill="#738A91" points="97.242,80.47 82.524,89.301 97.242,98.131 111.96,89.301 	" />
            <polygon fill="#213C45" points="56.816,76.723 52.325,79.418 52.325,89.348 56.816,92.043 	" />
            <polygon fill="#566560" points="56.816,76.723 61.308,79.418 61.308,89.348 56.816,92.043 	" />
            <polygon fill="#738A91" points="56.816,76.723 52.325,79.418 56.816,82.113 61.308,79.418 	" />
            <polygon fill="#213C45" points="76.515,88.491 72.023,91.187 72.023,101.116 76.515,103.812 	" />
            <polygon fill="#566560" points="76.515,88.491 81.007,91.187 81.007,101.116 76.515,103.812 	" />
            <polygon fill="#738A91" points="76.515,88.491 72.023,91.187 76.515,93.882 81.007,91.187 	" />
            <polygon fill="#213C45" points="97.242,100.931 92.75,103.626 92.75,113.556 97.242,116.251 	" />
            <polygon fill="#566560" points="97.242,100.931 101.734,103.626 101.734,113.556 97.242,116.251 	" />
            <polygon fill="#213C45" points="116.941,64.057 112.449,66.752 112.449,76.682 116.941,79.377 	" />
            <polygon fill="#566560" points="116.941,64.057 121.433,66.752 121.433,76.682 116.941,79.377 	" />
            <polygon fill="#738A91" points="116.941,64.057 112.449,66.752 116.941,69.448 121.433,66.752 	" />
            <polygon fill="#738A91" points="97.242,100.931 92.75,103.626 97.242,106.321 101.734,103.626 	" />
            <polygon fill="#213C45" points="97.242,52.931 92.75,55.626 92.75,65.556 97.242,68.251 	" />
            <polygon fill="#566560" points="97.242,52.931 101.734,55.626 101.734,65.556 97.242,68.251 	" />
            <polygon fill="#738A91" points="97.242,52.931 92.75,55.626 97.242,58.321 101.734,55.626 	" />
            <polygon fill="#213C45" points="137.667,76.723 133.175,79.418 133.175,89.348 137.667,92.043 	" />
            <polygon fill="#566560" points="137.667,76.723 142.159,79.418 142.159,89.348 137.667,92.043 	" />
            <polygon fill="#738A91" points="137.667,76.723 133.175,79.418 137.667,82.113 142.159,79.418 	" />
            <path d="M120.976,122.937c-6.108,3.443-11.06,11.185-11.06,17.293v31.949l22.119-13.164v-31.253
		C132.035,121.654,127.084,119.494,120.976,122.937z" />
            <path fill="#213C45" d="M124.009,121.659c2.181,0.79,3.555,2.896,3.555,6.104v33.914l4.471-2.661v-31.253
		C132.035,122.707,128.641,120.368,124.009,121.659z" />
            <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="101.7681" y1="146.3892" x2="114.3482" y2="158.9693">
                <stop offset="0" style="stop-color:#000000" />
                <stop offset="1" style="stop-color:#213C45" />
            </linearGradient>
            <polygon fill="url(#SVGID_14_)" points="109.916,172.179 132.035,159.015 132.035,159.015 109.916,147.739 	" />
        </g>
        <g id="Step1">
            <polygon fill="#213C45" points="133.888,157.904 106.938,174.074 106.938,301.608 133.888,317.777 	" />
            <polygon fill="#566560" points="114.089,178.202 141.04,162.032 141.04,301.608 114.089,317.777 	" />
            <polygon fill="#738A91" points="133.888,157.904 106.938,174.074 114.063,178.202 141.013,162.032 	" />
        </g>
        <g id="Step2">
            <polygon fill="#213C45" points="141.04,168.053 114.089,184.223 114.089,311.757 141.04,327.926 	" />
            <polygon fill="#566560" points="121.241,188.351 148.191,172.181 148.191,311.757 121.241,327.926 	" />
            <polygon fill="#738A91" points="141.04,168.053 114.089,184.223 121.214,188.351 148.165,172.181 	" />
        </g>
        <g id="Step3">
            <polygon fill="#213C45" points="148.191,178.203 121.241,194.373 121.241,321.907 148.191,338.076 	" />
            <polygon fill="#566560" points="128.392,198.5 155.342,182.331 155.342,321.907 128.392,338.076 	" />
            <polygon fill="#738A91" points="148.191,178.203 121.241,194.373 128.366,198.5 155.316,182.331 	" />
        </g>
        <g id="Step4">
            <polygon fill="#213C45" points="155.342,188.352 128.392,204.522 128.392,332.056 155.342,348.225 	" />
            <polygon fill="#566560" points="135.543,208.65 162.494,192.48 162.494,332.056 135.543,348.225 	" />
            <polygon fill="#738A91" points="155.342,188.352 128.392,204.522 135.517,208.65 162.467,192.48 	" />
        </g>
        <g id="Step5">
            <polygon fill="#213C45" points="162.494,198.501 135.543,214.671 135.543,342.206 162.494,358.375 	" />
            <polygon fill="#566560" points="142.695,218.799 169.645,202.629 169.645,342.206 142.695,358.375 	" />
            <polygon fill="#738A91" points="162.494,198.501 135.543,214.671 142.668,218.799 169.619,202.629 	" />
        </g>
        <g id="Step6">
            <polygon fill="#213C45" points="169.645,208.651 142.695,224.821 142.695,352.355 169.645,368.524 	" />
            <polygon fill="#566560" points="149.846,228.949 176.796,212.779 176.796,352.355 149.846,368.524 	" />
            <polygon fill="#738A91" points="169.645,208.651 142.695,224.821 149.82,228.949 176.77,212.779 	" />
        </g>
        <g id="Step7">
            <polygon fill="#213C45" points="176.796,218.8 149.846,234.97 149.846,362.504 176.796,378.673 	" />
            <polygon fill="#566560" points="156.998,239.098 183.948,222.928 183.948,362.504 156.998,378.673 	" />
            <polygon fill="#738A91" points="176.796,218.8 149.846,234.97 156.971,239.098 183.921,222.928 	" />
        </g>
        <g id="Step8">
            <polygon fill="#213C45" points="183.948,228.95 156.998,245.12 156.998,372.654 183.948,388.823 	" />
            <polygon fill="#566560" points="164.149,249.248 191.099,233.078 191.099,372.654 164.149,388.823 	" />
            <polygon fill="#738A91" points="183.948,228.95 156.998,245.12 164.123,249.248 191.073,233.078 	" />
        </g>
        <g id="Step9">
            <polygon fill="#213C45" points="191.099,239.099 164.149,255.269 164.149,382.803 191.099,398.972 	" />
            <polygon fill="#566560" points="171.3,259.397 198.25,243.227 198.25,382.803 171.3,398.972 	" />
            <polygon fill="#738A91" points="191.099,239.099 164.149,255.269 171.274,259.397 198.224,243.227 	" />
        </g>
        <g id="Step10">
            <polygon fill="#213C45" points="198.25,249.249 171.3,265.418 171.3,392.953 198.25,409.122 	" />
            <polygon fill="#566560" points="178.452,269.546 205.402,253.376 205.402,392.953 178.452,409.122 	" />
            <polygon fill="#738A91" points="198.25,249.249 171.3,265.418 178.425,269.546 205.375,253.376 	" />
        </g>
        <g id="Step11">
            <polygon fill="#213C45" points="205.402,259.398 178.452,275.568 178.452,403.102 205.402,419.271 	" />
            <polygon fill="#566560" points="185.603,279.696 212.553,263.526 212.553,403.102 185.603,419.271 	" />
            <polygon fill="#738A91" points="205.402,259.398 178.452,275.568 185.577,279.696 212.527,263.526 	" />
        </g>
        <g id="Step12">
            <polygon fill="#213C45" points="212.553,269.547 185.603,285.717 185.603,413.251 212.553,429.42 	" />
            <polygon fill="#566560" points="192.754,289.845 219.705,273.675 219.705,413.251 192.754,429.42 	" />
            <polygon fill="#738A91" points="212.553,269.547 185.603,285.717 192.728,289.845 219.678,273.675 	" />
        </g>
        <g id="Step13">
            <polygon fill="#213C45" points="219.705,279.697 192.754,295.867 192.754,423.401 219.705,439.57 	" />
            <polygon fill="#566560" points="199.906,299.995 226.856,283.825 226.856,423.401 199.906,439.57 	" />
            <polygon fill="#738A91" points="219.705,279.697 192.754,295.867 199.879,299.995 226.83,283.825 	" />
        </g>
        <g id="DarkFade">
            <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="150" y1="319.3403" x2="150" y2="189.902">
                <stop offset="0.0859" style="stop-color:#000000" />
                <stop offset="1" style="stop-color:#000000;stop-opacity:0" />
            </linearGradient>
            <path fill="url(#SVGID_15_)" d="M0,188.362v87.25c0,12.192,8.925,22.3,20.598,24.15h258.805
		c11.673-1.851,20.598-11.958,20.598-24.15v-87.25H0z" />
        </g>
        <g id="BrightDoor">
            <path fill="#C2DE9B" d="M120.976,122.937c-6.108,3.443-11.06,11.185-11.06,17.293v31.949l22.119-13.164v-31.253
		C132.035,121.654,127.083,119.494,120.976,122.937z" />
            <path fill="#738A91" d="M124.009,121.659c2.182,0.79,3.555,2.896,3.555,6.104v33.914l4.471-2.661v-31.253
		C132.035,122.707,128.64,120.368,124.009,121.659z" />
            <linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="101.7686" y1="146.3906" x2="136.0163" y2="180.6384">
                <stop offset="0" style="stop-color:#FFFCDF" />
                <stop offset="1" style="stop-color:#213C45" />
            </linearGradient>
            <polygon fill="url(#SVGID_16_)" points="109.916,172.179 132.035,159.015 132.035,159.015 109.916,147.739 	" />
        </g>
    </svg>
</div>