CSS3悬停实际效果实例运用

2021-03-11 11:59 jianzhan
CSS3 为 Web 开发设计带来了十分让人激动的转变,非常是 CSS 三d 变换、动漫等特点的适用,能够轻轻松松的建立很酷的 Web 实际效果。
CSS3新增加了完成动漫实际效果的新作用,根据本文,你能够对这些新作用有个基本掌握。今日就共享1些悬停实际效果,能够更好的协助你开发设计
 
HTML标识
这个简易的构造使大家可以使这些实际效果。正如你能够看到下面的编码中大家建立了1个父类主视图,里边的內容。随后,大家建立1个类的面具,大家将了CSS3过渡到悬停实际效果。在后边的事例中,这个英语的语法能够稍稍产生转变,这取决于你要想的实际效果运用。

拷贝编码
编码以下:

<div class="view">
<img src="images/1.jpg" />
<div class="mask"></div>
<div class="content">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>

CSS
在这里,你将大家的实例教程设定的基础特性。针对每个实际效果会有不一样的CSS文档,你能够把到1个CSS文档中的各种各样实际效果。

拷贝编码
编码以下:

.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.info {
background:url(../img/link.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:⑼999px;
width:20px;
height:20px;
}

1 Example
 
HTML
对具备这类实际效果的类主视图的元素加上独特类实际效果。这里在view类的基本上加上effect类

拷贝编码
编码以下:

<div class="view effect">
<img src="images/1.jpg" />
<div class="mask"></div>
<div class="content">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>

CSS
这里除应用的边框特性来建立1个3角形,我应用的好几个变换,容许我在动漫期内对每一个特性有更多的操纵。

拷贝编码
编码以下:

effect img {
opacity:1;
transform:scale(1,1);
transition: all 0.2s ease-in;
}
.effect .mask {
opacity:0;
overflow:visible;
border-color:rgba(0,0,0,0.7) transparent transparent transparent;
border-style:solid;
border-width:150px;
width:0;
height:0;
transform:translateY(⑴25px);
transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effect a.info {
opacity:0;
transform:translateY(⑴25px);
transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}
.effect:hover img {
opacity:0.7;
transform:scale(2,2);
}
.effect:hover .mask {
opacity: 1;
transform: translateY(0px);
}
.effect:hover a.info {
opacity:1;
transform:translateY(100px);
}

2 Example
 
HTML
在此示例中的英语的语法会稍有不一样

拷贝编码
编码以下:

<div class="view second-effect">
<img src="images/2.jpg" />
<div class="mask">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>

CSS
在这个事例之中应用边框熟习对自变量开展调剂. 这里应用 box-sizing. box-sizing 熟习被用来更改默认设置的CSS盒宽度和高宽比尺寸,实际如何应用呢,我简易解释1下
(说到 IE 的 bug,在 IE6之前的版本号中,IE对盒实体模型的分析出現1些难题,跟其它访问器不一样,将 border 与 padding 都包括在 width 以内。而此外1些访问器则与它相反,是不包含border和padding的。box-sizing:content-box:当大家设定 box-sizing: content-box; 时,访问器对盒实体模型的解释遵循大家以前了解到的 W3C 规范,当它界定width和height时,它的宽度不包含border和padding。box-sizing:border-box:当大家设定box-sizing: border-box; 时,访问器对盒实体模型的解释与 IE6以前的版本号同样,当它界定width和height时,border和padding则是被包括在宽高以内的。內容的宽和高能够根据界定的 “width”和 “height”减去相应方位的“padding”和“border”的宽度获得。內容的宽和高务必确保不可以为负,必要时将全自动增大该元素border box的规格以使其內容的宽或高最少为0。


拷贝编码
编码以下:

.second-effect .mask {
opacity: 0;
overflow:visible;
border:0px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
}
.second-effect a.info {
position:relative;
top:⑴0px;
opacity:0;
transform:scale(0,0);
transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.second-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
opacity:1;
transform:scale(1,1);
transition-delay:0.3s;
}

3 Example
 
HTML
这里在view类的基本上加上third-effect类.

拷贝编码
编码以下:

<div class="view third-effect">
<img src="images/3.jpg" />
<div class="mask">
<a href="#" class="info" title="Full Image">Full Image</a>
</div>
</div>

CSS
应用边框特性只必须简易的几行编码就可以获得十分棒的实际效果.

拷贝编码
编码以下:

.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
}
.third-effect a.info {
position:relative;
top:⑴0px; /* Center the link */
opacity: 0;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
transition-delay: 0.3s;
}

4 Example
 
HTML
在此示例中的编码是比以前的显著降低,但做出来的悬停实际效果将是是非非常让人印象刻骨铭心的.
1 <div class="view fourth-effect">
2 <a href="#" title="Full Image"><img src="images/4.jpg" /></a>
3 <div class="mask"></div>
4 </div>
CSS
仅应用mask类与border-radius特性融合打造出1个漂亮的悬停实际效果,点击照片完成照片的可见性

拷贝编码
编码以下:

.fourth-effect .mask {
position:absolute; /* Center the mask */
top:50px;
left:100px;
cursor:pointer;
border-radius: 50px;
border-width: 50px;
display: inline-block;
height: 100px;
width: 100px;
border: 50px solid rgba(0, 0, 0, 0.7);
box-sizing:border-box;
opacity:1;
visibility:visible;
transform:scale(4);
transition:all 0.3s ease-in-out;
}
.fourth-effect:hover .mask {
opacity: 0;
border:0px solid rgba(0,0,0,0.7);
visibility:hidden;
}

5 Example
 
HTML
最终1个事例是上面几个事例的融合.加上1个fifth-effect类
1 <div class="view fifth-effect">
2 <a href="#" title="Full Image"><img src="images/5.jpg" /></a>
3 <div class="mask"></div>
4 </div>
<div class="view fifth-effect">
<a href="#" title="Full Image"><img src="images/5.jpg" /></a>
<div class="mask"></div>
</div>
CSS
在这里应用边框特性的rgba特性。来更改可见照片的全透明度.

拷贝编码
编码以下:

.fifth-effect img {
opacity:0.2;
transition: all 0.3s ease-in;
}
.fifth-effect .mask {
cursor:pointer;
opacity:1;
visibility:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}
.fifth-effect:hover .mask {
border:0px double rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
}
.fifth-effect:hover img {
opacity:1;
}