鼠标悬停,文章上浮,加阴影的过渡效果

<body>
		<div id="list8">
			<section class="container8">
						<img src="./img/0.jpg" alt="">
						<article class="article8">
							<h3>四重奏蛋糕</h3>
							<text>
								
			盒子上娇艳欲滴的红宝石,令人无法移开目光。像潘多拉的盒子,吸引好奇的味蕾。清脆的声音,没有惊醒少女的梦。(鲜果因时令季节变化,会做适当调整)
							</text>
							<br><br>
							<text>
								材料:千层酥皮、草莓、戚风蛋糕胚、卡仕达奶油
							</text>
							<br><br> 
							<text>包装信息:一次性蛋糕用具1</text><br> 
							<p class="money8">¥336</p>
						</article>
						
					</section>
			
		</div>
		
		
	</body>
	

css样式

.container8{
				display: flex;
				width: 51.6875rem;
				height: 18.75rem;
				margin: auto;
				border-radius: 1.875rem;
				border: 0.0625rem;
				box-shadow: 2px 4px 8px 1px rgba(0, 0, 0, 0.2);
				overflow: hidden;
				font-size: 1rem;
				margin-top: 3rem;
				transition: all .5s;
				
				 
			}
.container8:hover{
				box-shadow: 0 5px 10px 5px rgba(110,110,110,.4);
				transform: translateY(-4px);
			}
发布了151 篇原创文章 · 获赞 7 · 访问量 7488

猜你喜欢

转载自blog.csdn.net/qq_43923045/article/details/104611304