css盒子阴影实现图片上浮阴影效果


<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>title>
		<style type="text/css">
/* 			===========================================
			运用知识:box-shadow盒子阴影
			构建思路:鼠标放在图片上有一个上移的过度效果,
					 然后加上阴影效果
			=========================================== */
			
			
				*{
      margin: 0; padding: 0;}
				ul{
      list-style: none;}
		
				li{
      position: relative; top: 0;float: left; margin: 30px; transition: .5s; border-radius: 3px;}
				li:hover{
      top: -3px; box-shadow: 0px 5px 10px 3px #D1D1D1;}
		style>
	head>
	<body>
		<ul >
			<li>
				<img src="../img/3b19bf0e7e599c1bbbce510fb0dbc8bc.webp" >
			li>
			<li>
				<img src="../img/4e75e528fb468aee107f551179aa0799.webp" >
			li>
		ul>

	body>
html>

你可能感兴趣的:(前端,html,css3,css)