CSS3鼠標滑過圖片加陰影圖片變清淅

2024-09-05 12:17:02

字體：大中小

來源：轉載

供稿：網友

CSS3鼠標滑過圖片加陰影圖片變清淅，糾結到底是分類的CSS中不審HTML5中，好像這兩個是孿生兄弟一樣，CSS3在HTML5中更能發揮其優異性能。本效果實現鼠標移到圖片上的時候，改變圖片透明度的效果，讓圖片由蒙朧變清淅，同時為圖片添加陰影效果。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3鼠標滑過圖片加陰影圖片變清淅</title><style>* {	margin: 0;	padding: 0;}body {	background: url() repeat;}.wrapper {	margin: 0 auto;	width: 960px;	padding: 30px;	position: relative;}.left {	float: left;}.right {	float: right;}hr {	border: none;	width: 100%;	height: 7px;	background: url() repeat-x;	margin: 10px 0 10px 0;	clear: both;}p,span {	color: #8a8a8a;	display: inline;	font-size: 12px;	text-shadow: 1px 1px #efefef;}a {	text-shadow: 1px 1px #efefef;	text-decoration: none;}header h1.main_head {	font: 36px/18px Georgia, Arial, sans-serif;	color: #838383;	text-shadow: 1px 1px #efefef;	text-align: center;	padding: 20px 0 20px 0;}nav {	overflow: hidden;	margin-top: 15px;}nav a {	color: #d0206a;	font-size: 14px;	display: inline;}nav span {	display: inline;	font-size: 14px;	clear: both;	display: table;	vertical-align: middle;	width: 100%;	margin: 10px 0 10px 0;}nav a.back-button {	font-size: 16px;}nav a: hover {	text-decoration: underline;}.single-set {	overflow: hidden;	padding: 30px 10px 15px 10px ;}.container {	border: 10px solid #fff;	position: relative;	overflow: hidden;	height: 200px;	opacity: 0.5;	-webkit-box-shadow: 0 0 3px #000;	-moz-box-shadow: 0 0 3px #000;	box-shadow: 0 0 3px #000;	-webkit-transition: all .5s ease-out;	-moz-transition: all .5s ease-out;	transition: all .5s ease-out;}.container: hover {	opacity: 1;	cursor: pointer;	-webkit-box-shadow: 0 0 10px #000;	-moz-box-shadow: 0 0 10px #000;	box-shadow: 0 0 10px #000;}.text {	background: rgba(0,0,0,0.5);	color: white;	font: 14px Georgia,serif;	height: auto;	width: inherit;	position: absolute;}.text a {	color: #fff;	display: block;	padding: 15px;	font-size: 16px;	font-weight: normal;	text-shadow: none;	text-decoration: none;	width: 400px;}article.css3-1 {	top: -70px;	left: 0;	-webkit-transition: all .5s ease-out;	-moz-transition: all .5s ease-out;	-o-transition: all .5s ease-out;	transition: all .5s ease-out;}.text a.css3-1 {	-webkit-transition: all .4s ease-out;	-moz-transition: all .4s ease-out;	-o-transition: all .5s ease-out;	transition: all .4s ease-out;}.text a.css3-1: hover {	color: #d0206a;	text-decoration: none;}.container: hover article.css3-1 {	top: 0;}article.css3-2 {	bottom: -70px;	left: 0;	-webkit-transition: all .5s ease-out;	-moz-transition: all .5s ease-out;	-o-transition: all .5s ease-out;	transition: all .5s ease-out;}.text a.css3-2 {	-webkit-transition: all .4s ease-out;	-moz-transition: all .4s ease-out;	-o-transition: all .5s ease-out;	transition: all .4s ease-out;}.text a.css3-2: hover {	color: #d0206a;	text-decoration: none;}.container: hover article.css3-2 {	bottom: 0;}article.css3-3 {	right: -400px;	top: 0;	-webkit-transition: all .5s ease-out;	-moz-transition: all .5s ease-out;	-o-transition: all .5s ease-out;	transition: all .5s ease-out;	width: 400px;}.text a.css3-3 {	-webkit-transition: all .4s ease-out;	-moz-transition: all .4s ease-out;	-o-transition: all .5s ease-out;	transition: all .4s ease-out;}.text a.css3-3: hover {	color: #d0206a;	text-decoration: none;}.container: hover article.css3-3 {	right: 0;}/* CSS3 Left Effect*/	article.css3-4 {	left: -400px;	bottom: 0;	-webkit-transition: all .5s ease-out;	-moz-transition: all .5s ease-out;	-o-transition: all .5s ease-out;	transition: all .5s ease-out;	width: 400px;}.text a.css3-4 {	-webkit-transition: all .4s ease-out;	-moz-transition: all .4s ease-out;	-o-transition: all .5s ease-out;	transition: all .4s ease-out;}.text a.css3-4: hover {	color: #d0206a;	text-decoration: none;}.container: hover article.css3-4 {	left: 0;}.disclaimer {	float: left;	height: auto;	width: 50%;}.courtesy {	float: right;	height: auto;	width: 50%;	text-align: right;}</style></head><body>	<div   id="rvnnp3x"   class="wrapper">		<header>		<h1 class="main_head">Slick CSS3 Animated Image Caption Demo</h1>		</header>		<hr />		<div   id="f7nbpnl"   class="single-set">			<div   id="5vjhx5v"   class="container left">				<img src="/d/file/p/2024/09-05/282c013c540b02c3ebeb1b2c4baa2f12.jpg" alt="image" />								<h1>Concentating Chamelion</h1>				</article>			</div>			<div   id="t9tbjtj"   class="container right">				<img src="/d/file/p/2024/09-05/8dbafb8fcb3b102e62b73b0d001f24bb.jpg" alt="image" />								<h1>Little Butterfly</h1>				</article>			</div>		</div></body></html>

上一篇：css3 shadow實現的各種漂亮陰影效果

下一篇：純CSS3實現的餅形圖和倒三角統計圖效果