CSS3图像动态交互切换效果

2020-01-27 14:20:07

字体：大中小

来源：转载

供稿：网友

基于HTML5的的动态交互效果，CSS3代码实例，鼠标移到Logo图片上，渐变渐入显示第二张图片，加入了的动画效果就是使用CSS3技术实现的，没有使用任何的JavaScript代码。

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>CSS3 动态交互</title><style type="text/css">body {	background: #cde;}.view {  width: 250px;  height: 167px;  border: 10px solid #fff;  overflow: hidden;  position: relative;  text-align: center;  cursor: default;  background: #fff;	border-radius: 5px;	margin: 20px auto;	box-shadow:0 1px 0 0 #FFFFFF, 0 2px 0 0 #CCCCCC, 0 3px 0 0 #FFFFFF, 0 4px 0 0 #CCCCCC,0 5px 0 0 #fff,0 6px 0 0 #CCCCCC;}.view .mask, .view .content {  width: 250px;  height: 167px;  position: absolute;  overflow: hidden;  top: 0;  left: 0}.view img {  display: block;  position: relative}.view h2 {  text-transform: uppercase;  font-family:'mouse deco', helvetica, arial, sans-serif;  color: #fff;  text-align: center;  position: relative;  font-size: 18px;  padding: 5px;  background: rgba(0, 0, 0, 0.8);  margin: 20px 0 0 0}.view p {  font-family: Georgia, serif;  font-style: italic;  font-size: 12px;  position: relative;  color: #fff;  padding: 7px 7px 8px;  text-align: center}.view a.info {  display: inline-block;  text-decoration: none;  padding: 3px 9px;  background: #000;  color: #fff;  text-transform: uppercase;  box-shadow: 0 0 1px #000}.view a.info:hover {  box-shadow: 0 0 5px #000}.view-tenth img {  -webkit-transform: scaleY(1);  -moz-transform: scaleY(1);  -o-transform: scaleY(1);  -ms-transform: scaleY(1);  transform: scaleY(1);  -webkit-transition: all 0.7s ease-in-out;  -moz-transition: all 0.7s ease-in-out;  -o-transition: all 0.7s ease-in-out;  -ms-transition: all 0.7s ease-in-out;  transition: all 0.7s ease-in-out;}.view-tenth .mask {  background-color: rgba(218, 205, 201, 0.5);  -webkit-transition: all 0.5s linear;  -moz-transition: all 0.5s linear;  -o-transition: all 0.5s linear;  -ms-transition: all 0.5s linear;  transition: all 0.5s linear;  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);  opacity: 0;}.view-tenth h2 {  border-bottom: 1px solid rgba(0, 0, 0, 0.3);  background: transparent;  margin: 20px 5px 0px 5px;  -webkit-transform: scale(0);  -moz-transform: scale(0);  -o-transform: scale(0);  -ms-transform: scale(0);  transform: scale(0);  color: #333;  -webkit-transition: all 0.5s linear;  -moz-transition: all 0.5s linear;  -o-transition: all 0.5s linear;  -ms-transition: all 0.5s linear;  transition: all 0.5s linear;  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);  opacity: 0;}.view-tenth p {  background:transparent;  color: #333;  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);  opacity: 0;  -webkit-transform: scale(0);  -moz-transform: scale(0);  -o-transform: scale(0);  -ms-transform: scale(0);  transform: scale(0);  -webkit-transition: all 0.5s linear;  -moz-transition: all 0.5s linear;  -o-transition: all 0.5s linear;  -ms-transition: all 0.5s linear;  transition: all 0.5s linear;}.view-tenth a.info {  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);  opacity: 0;  -webkit-transform: scale(0);  -moz-transform: scale(0);  -o-transform: scale(0);  -ms-transform: scale(0);  transform: scale(0);  -webkit-transition: all 0.5s linear;  -moz-transition: all 0.5s linear;  -o-transition: all 0.5s linear;  -ms-transition: all 0.5s linear;  transition: all 0.5s linear;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}.view-tenth:hover img {  -webkit-transform: scale(10);  -moz-transform: scale(10);  -o-transform: scale(10);  -ms-transform: scale(10);  transform: scale(10);  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);  opacity: 0;}.view-tenth:hover .mask {  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";  filter: alpha(opacity=100);  opacity: 1;}.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {  -webkit-transform: scale(1);  -moz-transform: scale(1);  -o-transform: scale(1);  -ms-transform: scale(1);  transform: scale(1);  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";  filter: alpha(opacity=100);  opacity: 1;}</style></head><body><h1>zaole.net</h1><div class="view view-tenth">    <img width="275" src="/d/file/p/2020/01-27/13c6fc02c1069d49ea54c54857017f2d.gif">    <div class="mask">			<h2>源码分享</h2>			<p>开源源代码分享</p>			<a class="info" href="#">从这里开始</a>		</div>	</div></body></html>

上一篇：36种漂亮的CSS3网页按钮Button样式

下一篇：CSS3 sprite实例：跨浏览器图标支持列表