CSS3圖像動態交互切換效果

2024-09-05 12:16:55

字體：大中小

來源：轉載

供稿：網友

基于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   id="cqya4sk"   class="view view-tenth">    <img width="275" src="/d/file/p/2024/09-05/48b939e8ba668fe367b85a0cafc37088.gif">    <div   id="icwqoew"   class="mask">			<h2>源碼分享</h2>			<p>開源源代碼分享</p>			從這里開始		</div>	</div></body></html>

上一篇：CSS3 sprite實例：跨瀏覽器圖標支持列表

下一篇：36種漂亮的CSS3網頁按鈕Button樣式