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>

相关推荐
小墨宝6 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED21 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿26 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子26 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6639 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet