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>

相关推荐
爱喝水的小周10 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021113 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅17 分钟前
介绍electron
前端·javascript·electron
周胡杰19 分钟前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
315356691319 分钟前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑22 分钟前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue7737 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
断竿散人41 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD43 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟43 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计