接着上次关于页面布局中,内容模块里的按钮,鼠标经过的动画效果的总结。鼠标经过的按钮的时候会触发各种效果,如渐变、放大、旋转抑或是翻转等效果。
开始的按钮样式,如下图鼠标移入最终的效果动态效果三:
Html
pclass=xbtn1
ahref=
了解更多
/a
/
Css
.xbtn1a{
position:relative;
display:block;
margin:20pxauto;
width:100%;
height:50px;
ine-height:50px;max-width:150px;
text-align:center;
text-transform:uppercase;
overflow:hidden;
border:1pxsolidcurrentColor;
color:#FFFFFF;
}
.xbtn1a:after{
content:'';
width:0;
height:0;
-webkit-transform:rotate(360deg);
-webkit-transition:0.5s;
transition:0.5s;
border-style:solid;
border-width:0000;
border-color:#FFFFFFtransparenttransparenttransparent;
position:absolute;
top:0;
eft:0;z-index:-1;
}
.xbtn1a:hover:after{
border-width:330px330px00;
}
.xbtn1a:hover{
color:#1b3952;
}
动态效果四:
Html
pclass=xbtn2
ahref=
了解更多
/a
/
Css
.xbtn2a{
position:relative;
display:block;
margin:20pxauto;
width:100%;
height:50px;
ine-height:50px;max-width:150px;
text-align:center;
text-transform:uppercase;
overflow:hidden;
border:1pxsolidcurrentColor;
}
.xbtn2a:before{
content:'';
width:0;
height:0;
-webkit-transform:rotate(360deg);
-webkit-transition:0.5s;
transition:0.5s;
border-style:solid;
border-width:0000;
border-color:transparenttransparenttransparent#1b3952;
position:absolute;
bottom:0;
eft:0;z-index:-1;
}
.xbtn2a:after{
content:'';
width:0;
height:0;
-webkit-transform:rotate(360deg);
-webkit-transition:0.5s;
transition:0.5s;
border-style:solid;
border-width:0000;
border-color:transparenttransparent#1b3952transparent;
position:absolute;
right:0;
bottom:0;
z-index:-1;
}
.xbtn2a:hover{
color:#FFFFFF;
}
.xbtn2a:hover:before{
border-width:150px00150px;
}
.xbtn2a:hover:after{
border-width:00150px150px;
}
接下来动态效果五,这种动态效果是鼠标移入,出现背景和水波纹的效果,如下图是最开始的样式,关于分享的图标是用切了颜色不一样的两张图标,一张是白色,一张是黑色,黑标是输入移入之后的效果,图标的背景变白色,周围出现的波纹,主要用伪类实现的。下面是鼠标移入的效果
Html
pclass=foot-share
ul
iahref=
imgsrc=images/img
1.pngclass=ic1/
imgsrc=images/img1a.pngclass=ic2/
/a
/li
iahref=
imgsrc=images/img
2.pngclass=ic1/
imgsrc=images/img2a.pngclass=ic2/
/a
/li
iahref=
imgsrc=images/img
3.pngclass=ic1/
imgsrc=images/img3a.pngclass=ic2/
/a
/li
iahref=
imgsrc=images/img
4.pngclass=ic1/
imgsrc=images/img4a.pngclass=ic2/
/a
/li
/ul
/
下面关于样式有点多,主要的样式是关于伪类做的波纹