Question

该点在电话摄像机上,但每当屏幕重新定位直线变化的位置时。我想确保,每当屏幕重新布置时,总线上下方,而是在电话摄像机上。是否有任何人指责我在这里做什么错?

CSS 代码

.spec::before { /* TO MODIFY THE SPECS WRITINGS OF THE HEADER PHOTOS */
    content:   ;
    background: var(--secondary);
    width: 6em;
    height: 1px;
    position: absolute;
    bottom: -2.2em;
    left: 50%;
}

.phone .spec::before {
    transform:
        translateX(-145%) rotate(-45deg);
}

.tablet .spec::before {
    transform:
        translateX(-50%) rotate(45deg);
}

.dot {
    position: absolute; 
    bottom: -5em;
    height: 1.8em;
    width: 1.8em;
    border: 1px var(--primary) solid;
    border-radius: 50%;
    animation: expand 1s ease-in-out infinite;
}

.phone .dot {left: -30%;} 
.phone .dot {bottom: -240%;}/* change the dot placement */
.tablet .dot {left: 65%;}

.dot::before, .pagination a::before {
    content:   ;
    background: var(--accent);
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: inherit;
}

Answer 1

我认为,你所期待的是<条码>>地图。

You can see how it work right there https://www.w3schools.com/html/html_images_imagemap.asp

If you want to add onClick Can I have an onclick event on a imagemap area element?

希望能帮助你们

友情链接