以下是一个简单的 CSS 飘框示例:
.box {
width: 200px;
height: 100px;
background-size: cover;
background-position: center;
.box:hover {
background-position: center;
background-size: cover;
.box > div {
width: 100px;
height: 100px;
background-color: blue;
text-align: center;
font-size: 20px;
float: left;
在这个示例中,大家创建了一个名为“box”的div元素,并将其设置为背景图片。大家还为div元素设置了宽度和高度,以及背景颜色和字体大小。当鼠标悬停在div元素上时,大家将背景位置居中,并将字体大小设置为20px。大家还为div元素添加了一个float属性,使其向左飘浮。
使用 CSS 飘框可以非常方便地实现各种飘浮效果,例如显示动态文本内容、控制文本大小、显示广告等等。还可以与其他样式和元素结合起来,创建更加复杂的网页布局效果。