.login-box {
width: 400px;
height: 300px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 10px;
margin: 0 auto;
position: relative;
}
.login-box h2 {
text-align: center;
margin-top: 50px;
font-size: 24px;
}
.login-box input[type="text"],
.login-box input[type="password"] {
width: 80%;
height: 40px;
margin: 20px 10%;
padding: 0 10px;
border-radius: 5px;
border: none;
background-color: rgba(255, 255, 255, 0.5);
outline: none;
}
.login-box input[type="submit"] {
width: 80%;
height: 40px;
margin: 20px 10%;
border-radius: 5px;
border: none;
background-color: #007AFF;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.login-box:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(bg.jpg);
background-size: cover;
opacity: 0.8;
z-index: -1;
border-radius: 10px;
}

以上CSS代码主要由几部分组成：

1. 首先是整个登录框的样式，包括宽高、背景颜色、圆角、居中等等。

2. 接下来是登录框标题的样式，包括居中、字体大小等。

3. 然后是用户名和密码输入框的样式，包括宽高、边框、内边距、圆角、背景颜色等。

4. 最后是登录按钮的样式，包括宽高、边框、圆角、背景颜色、字体颜色、字体大小等。

5. 另外还需要添加一个:before伪元素，用来设置登录框的背景图片和透明度，从而达到透明的效果。

这样，一个简单的透明登录框就制作完成了，可以根据需要进行调整，让整个登录框更加美观和实用。