javascript 如何在JS或CSS中绘制inspo悬停效果

muk1a3rh  于 2023-09-29  发布在  Java
关注(0)|答案(2)|浏览(102)

如何在图像上绘制点的效果,即在点上悬停时突出显示图像上的元素,并且还需要在图像上显示悬停在不同点后与元素连接的线条。
enter image description here

qlfbtfca

qlfbtfca1#

.dome {
                background: url(https://www.zdnet.com/a/img/resize/ba1b1ab92085d777ab5e313b34c66a94b7aa1236/2023/06/05/79a43eb8-ce38-488c-8cc0-e04699aaca7f/bing.jpg?auto=webp&width=1280);
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                height: 200px;
                width: 200px;
                margin: 0 auto;
                
        }
        .dome > .dome-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
/*          overflow: hidden;*/
            position: relative;
            cursor: pointer;
            animation: pulses 2s infinite;
        }
        .dome > .dome-icon > img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            z-index: 1;
            position: inherit;
            transition: .5s;
        }
        .dome > .dome-icon:hover > img {
            scale: 1.2;
        }
        .dome > .dome-icon:hover:after{
            opacity: 1;
            width: 210px;
            
        }
        .dome > .dome-icon:after {
            content: '';
            position: absolute;
            height: 2px;
            background: #ffd503;
            opacity: 0;
            
        }
        
        

        .dome > .dome-icon:nth-child(1):after,
        .dome > .dome-icon:nth-child(2):after{
            left: 42px;
        }

        .dome > .dome-icon:nth-child(1) {
            transform: translate(-113px, 61px);
        }
        .dome > .dome-icon:nth-child(2) {
            transform: translate(-120px, 132px);
        }

        .dome > .dome-icon:nth-child(1):after {
            top: 50%;
        }
        .dome > .dome-icon:nth-child(2):after {
            rotate: -10deg;
            top: 0;
        }
<div class="dome">
    <div class="dome-icon"><img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png"></div>
    <div class="dome-icon"><img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png"></div>
</div>
ffscu2ro

ffscu2ro2#

第一件事是通过在Map中使用区域标签在图像上添加坐标。area标签定义了一张图片map内部的区域。Area元素始终嵌套在map标签中。访问链接:area
如果你对这个解决方案不满意,那么第二个选择是使用css中的transform,并添加一些js以获得适当的解决方案。如果你需要这样的东西,也要澄清一下:video link

相关问题