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>

相关推荐
草梅友仁35 分钟前
草梅 Auth 1.6.0 发布密码强度组件 Twilio 短信支持 | 2025 年第 36 周草梅周报
前端·开源·github
正义的大古1 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
Hashan1 小时前
深入理解:Webpack编译原理
前端·webpack
雲墨款哥2 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程2 小时前
深入JS(一):手写 Promise
前端·javascript
Hierifer2 小时前
跨端技术:浅聊双线程原理和实现
前端
FreeBuf_2 小时前
加密货币武器化:恶意npm包利用以太坊智能合约实现隐蔽通信
前端·npm·智能合约
java水泥工3 小时前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
半夏陌离3 小时前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端
子兮曰3 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite