CSS3小技巧产品列表之鼠标滑过效果01

Posted web前端开发

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3小技巧产品列表之鼠标滑过效果01相关的知识,希望对你有一定的参考价值。

我们在开发项目的时候,会经常看到很多炫酷的鼠标效果,之前基本都是采用JS或者JQ来实现,但是只从CSS3出现后,很多效果,我们都可以通过纯CSS3来实现了,而且效果一点都不输给JS他们哦。

先来看看效果图:

【CSS3小技巧】产品列表之鼠标滑过效果01

以下是实现此效果的源码,你可以直接复制到你的文档里,存成html,即可查看效果了。

HTML代码:

<div class="main">

<div class="view view-tenth">

<img />

<div class="mask">

<h2>Wonder Girls</h2>

<p>Wonder Girls一向以青春活力的形象展现在观众面前,

先后在韩国和美国乐坛都取得了不错的成绩...</p>

<a href="#" class="link">查看全文</a>

</div>

</div>

<div class="view view-tenth">

<img />

<div class="mask">

<h2>Wonder Girls</h2>

<p>Wonder Girls一向以青春活力的形象展现在观众面前,

先后在韩国和美国乐坛都取得了不错的成绩...</p>

<a href="#" class="link">查看全文</a>

</div>

</div>

<div class="view view-tenth">

<img />

<div class="mask">

<h2>Wonder Girls</h2>

<p>Wonder Girls一向以青春活力的形象展现在观众面前,

先后在韩国和美国乐坛都取得了不错的成绩...</p>

<a href="#" class="link">查看全文</a>

</div>

</div>

<div class="view view-tenth">

<img />

<div class="mask">

<h2>Wonder Girls</h2>

<p>Wonder Girls一向以青春活力的形象展现在观众面前,

先后在韩国和美国乐坛都取得了不错的成绩...</p>

<a href="#" class="link">查看全文</a>

</div>

</div>

</div>


CSS代码:

.main *{

padding:0;

margin:0;

font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace;

box-sizing: content-box;

-webkit-box-sizing: content-box;

}

.main {

position: relative;

width: 680px;

margin: 0 auto;

}

.view {

width: 300px;

margin: 10px;

float: left;

border: 10px solid #fff;

overflow: hidden;

position: relative;

text-align: center;

-webkit-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;

-moz-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;

box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;

cursor: default;

}

.view .mask{

width: 300px;

height: 200px;

position: absolute;

overflow: hidden;

top: 0;

left: 0;

}

.view img {

display: block;

position: relative;

max-width:100%;

}

.view h2 {

text-transform: uppercase;

color: #fff;

text-align: center;

position: relative;

font-size: 17px;

padding: 10px;

background: rgba(0, 0, 0, 0.8);

margin: 20px 0 0 0;

}

.view p {

font-size: 12px;

position: relative;

color: #fff;

padding: 10px 20px 20px;

text-align: left;

}

.view .link {

display: inline-block;

text-decoration: none;

padding: 7px 14px;

background: #000;

color: #fff;

text-transform: uppercase;

-webkit-box-shadow: 0 0 1px #000;

-moz-box-shadow: 0 0 1px #000;

box-shadow: 0 0 1px #000;

font-size: 14px;

}

.view .link: hover {

-webkit-box-shadow: 0 0 5px #000;

-moz-box-shadow: 0 0 5px #000;

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(249, 179, 255, 0.3);

-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 40px 0px 40px;

-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 {

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 .link {

-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: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 .link {

-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;

}


如果你还有更好的实现方案,请留言区交流,我们一起学习进步。


以上是关于CSS3小技巧产品列表之鼠标滑过效果01的主要内容,如果未能解决你的问题,请参考以下文章

鼠标滑过,解决ul下 li下a的背景与父级Li不同宽的问题

5种纯CSS3动画按钮效果

Myeclipse小技巧之选中多个jar包

请问鼠标滑过背景图片,图片围绕圆心旋转的效果怎么实现?css3也可以..

[小技巧]如何用css3实现导航栏像音符一样跳动起来

Flutter 小技巧之霓虹灯文本的「故障」效果的实现