CSS3鼠标滑过图片加阴影图片变清淅

2020-01-27 14:19:23

字体：大中小

来源：转载

供稿：网友

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 class="wrapper">		<header>		<h1 class="main_head">Slick CSS3 Animated Image Caption Demo</h1>		</header>		<hr />		<div class="single-set">			<div class="container left">				<img src="/d/file/p/2020/01-27/559b991f311532d977e7082f4dabdb2c.jpg" alt="image" />				<article class="text css3-3">				<h1><a href="#" class="css3-3">Concentating Chamelion</a></h1>				</article>			</div>			<div class="container right">				<img src="/d/file/p/2020/01-27/cdb331e6d73fde01f967c2c383b8ee9c.jpg" alt="image" />				<article class="text css3-4">				<h1><a href="#" class="css3-4">Little Butterfly</a></h1>				</article>			</div>		</div></body></html>

上一篇：纯CSS3实现的饼形图和倒三角统计图效果

下一篇：css3 shadow实现的各种漂亮阴影效果