css画十字架和靶心图标

.bottom {

position: absolute;

top: 230px;

/* left: 10px; */

}

.bottom button {

width: 30px;

height: 30px;

cursor: pointer;

border: none;

background: transparent;

/* color: #333;

box-shadow: 0px 1px 10px 2px rgb(10 10 10 / 50%);

padding-left: 10px;

border-radius: 50%;

font-size: 30px;*/

}

.cross {

width: 30px;

height: 30px;

position: relative;

}

.cross::before, .cross::after {

content: ""; /* 伪元素,用来绘制十字架的两条线 */

position: absolute; /* 绝对定位 */

width: 26px;

height: 4px;

background-color: #333; /* 设置为黑色 */

left: 0;

top: 16px;

}

.cross::before {

transform: rotate(90deg); /* 将第一条线旋转45度 */

}

.cross::after {

transform: rotate(-180deg); /* 将第二条线旋转-45度 */

}

.round4,.round5{

border-radius: 50%;

background-color: #333;

position: absolute;

z-index: 1;

}

.round4{

width: 20px;

height: 20px;

top: 8px;

left: 3px;

}

.round5{

width: 8px;

height: 8px;

border: 4px solid #fff;

margin: 2px 0 0 2px;

z-index: 1;

}

<div class="bottom">

<button id="centerPosition">

<!-- <div class="coordinate"></div>

<div class="point"></div> -->

<div class="cross"></div>

<div class="round4">

<div class="round5">

</div>

</div>

</button>

</div>

相关推荐
excel几秒前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着13 分钟前
全栈框架next.js入手指南
前端·next.js
你的人类朋友2 小时前
什么是API签名?
前端·后端·安全
会豪4 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子4 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶4 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子4 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_4 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23334 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin4 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js