示例标题
示例内容
要实现背景模糊效果并在过渡期间创建内阴影,可以使用CSS的backdrop-filter
属性和box-shadow
属性。以下是一个代码示例:
HTML代码:
示例标题
示例内容
CSS代码:
.container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.blur-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('background-image.jpg');
background-size: cover;
filter: blur(10px); /* 背景模糊效果 */
}
.content {
position: relative;
z-index: 1;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 内阴影效果 */
transition: all 0.5s ease; /* 过渡效果 */
}
.container:hover .content {
transform: scale(1.1); /* 过渡期间放大效果 */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); /* 过渡期间加深内阴影效果 */
}
在这个示例中,.container
是一个包含背景和内容的容器,.blur-background
是用来设置背景模糊效果的元素,.content
是包含实际内容的元素。
通过设置.blur-background
的backdrop-filter
属性为blur(10px)
,可以实现背景模糊效果。通过设置.content
的box-shadow
属性为0 0 10px rgba(0, 0, 0, 0.2)
,可以创建一个内阴影效果。
在鼠标悬停时,通过设置.content
的transform
属性为scale(1.1)
,可以实现内容的放大效果。同时,通过设置.content
的box-shadow
属性为0 0 20px rgba(0, 0, 0, 0.4)
,可以加深内阴影效果。
通过使用transition
属性,可以为.content
元素的过渡效果添加动画效果。
上一篇:背景模糊效果仅适用