css 发光宝袋 特效 |css文件上传file

.box
{
position: relative; /*设置相对位置*/
width: 140px; /* 宽度 */
height: 120px; /* 高度*/
margin: 50px auto; /*中央对齐*/
}
.box:before
{
content: ""; /*添加伪元素*/
width: 100%; /* 宽度为100%*/
height: 100%; /* 高度为100%*/
position: absolute; /* 绝对定位*/
top: 0; /* 距离上方 */
left: 0; /* 距离左侧 */
z-index: -1; /*设定层级*/
background: rgb(255, 221, 0); /* 背景色 */
background: linear-gradient(135deg, #FD444F 0%, #F35852 40%, #E86452 100%); /* 设置渐变色背景 */
box-shadow: 0 0 20px #FFD300; /* 添加阴影 */
filter: blur(20px); /* 模糊效果 */
opacity: 0; /*透明度为0*/
transition: opacity .5s ease; /*设置过渡效果*/
}
.box:hover:before
{
opacity: 1; /*鼠标悬停后透明度为1*/
}
.box:after
{
content: ""; /*添加伪元素*/
width: 120px; /* 宽度为120px */
height: 38px; /* 高度为38px */
position: absolute; /* 绝对定位 */
top: -18px; /* 顶部距离为-18px */
left: 50%; /* 左侧距离为50%*/
margin-left: -60px; /* 左侧margin为-60px */
z-index: 1; /* 层级为1 */
background: #fff; /* 白色背景 */
border-radius: 50%; /* 圆形 */
box-shadow: 0 0 20px #FFD300; /* 添加阴影 */
}

上述代码包含多个CSS属性和样式，其中主要使用了before和after伪元素。在悬停时，宝袋背景会呈现出明亮的颜色，并光亮闪烁。用户可以根据自己的需求进行样式和属性的修改，以达到最佳的视觉效果。