在CSS中,可以使用伪元素(:before和:after)来实现两个点之间的连线效果。下面我们来分步骤实现。 首先,在HTML中定义两个点的位置,可以使用div标签,并为其设置position属性。
<div class="dot1"></div> <div class="dot2"></div>
.dot1, .dot2 { width: 10px; height: 10px; border-radius: 50%; background-color: black; position: absolute; z-index: 1; } <br> .dot1 { top: 50px; left: 50px; } <br> .dot2 { top: 100px; left: 100px; }
.dot1:before { content: ""; position: absolute; top: 5px; left: 5px; border: 1px solid black; width: 100px; z-index: 0; transform-origin: top left; transform: rotate(45deg); } <br> .dot2:before { content: ""; position: absolute; top: 5px; left: 5px; border: 1px solid black; width: 100px; z-index: 0; transform-origin: top left; transform: rotate(-45deg); }
<html> <head> <style> .dot1, .dot2 { width: 10px; height: 10px; border-radius: 50%; background-color: black; position: absolute; z-index: 1; } <br> .dot1 { top: 50px; left: 50px; } <br> .dot2 { top: 100px; left: 100px; } <br> .dot1:before { content: ""; position: absolute; top: 5px; left: 5px; border: 1px solid black; width: 100px; z-index: 0; transform-origin: top left; transform: rotate(45deg); } <br> .dot2:before { content: ""; position: absolute; top: 5px; left: 5px; border: 1px solid black; width: 100px; z-index: 0; transform-origin: top left; transform: rotate(-45deg); } </style> </head> <body> <div class="dot1"></div> <div class="dot2"></div> </body> </html>
粉丝
0
关注
0
收藏
0