本博之前曾经写过两篇博文《纯css3文字效果推荐》、《css3立体文字最佳实践》得到了大家的广泛认可,今天我们更进一步,研究文字菜单上可以做哪些动画,15种效果会不会有您喜欢的,来来来,开工。
本文案例演示代码我放在了codepen,速度可能有点慢,不过相信真正的前端童鞋应该喜欢codepen的强大之处。
本文介绍了12种效果,为了简化操作html部分适用haml,css部分适用scss。
#container
-(1..12).each do
%nav
%ul
%li
%a{:href=>'#',:title=>'首页'} 首页
%li
%a{:href=>'#',:title=>'信息'} 信息
%li
%a{:href=>'#',:title=>'作品'} 作品
%li
%a{:href=>'#',:title=>'联系'} 联系
/* 参数设置 */
$color-accent: saturate(#008833,10%);
$duration: 500ms;
$timing: ease;
/* 重置*/
*, *:before, *:after { box-sizing: border-box; }
/*容器设置*/
#container{
counter-reset: counterA;
}
/*布局实现*/
nav {
position: relative;
width: 100vw;
padding: 10px 0;
background: $color-accent;
display: table;
counter-increment: counterA;
&:before{
content:counter(counterA);
color:rgba(255,255,255,.05);
font-size:200px;
position: absolute;
}
ul {
position: realtive;
display: table-cell;
vertical-align: middle;
text-align: center;
li a {
position: relative;
height: 40px;
margin: 20px;
display: inline-block;
font-size: 35pt;
color: rgba(#fff,0.5);
font-weight: 900;
line-height: 40px;
text-decoration: none;
&:before, &:after {
content: attr(title);
white-space:nowrap;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
overflow: hidden;
transition:all $duration $timing;
color: #fff;
}
}
}
//若干多的效果的实现
// &:nth-child(1){}
// &:nth-child(2){}
}
第一种效果
第一个效果灵感来自于《Trippeo》,昨天的博文《跟名站学前端之Trippeo》利用css clip实现过,被踩较多,继续研究更加适用的方式,利用宽度和高度配合overflow:hiddden也可以实现,而且效果更好,代码如下所示。
// 1 高度变化
&:nth-child(1) {
background: adjust-hue($color-accent,30deg);
a {
&:before {
height: 0;
opacity: 0;
}
&:hover:before {
height: 100%;
opacity: 1;
}
&:after { display: none; }
}
}
第二种效果
第二种效果跟第一种效果原理一样,就是实现宽度的变化。
// 2 ,宽度变化
&:nth-child(2) {
background: adjust-hue($color-accent,60deg);
a {
&:before {
width: 0;
}
&:hover:before {
width: 100%;
}
&:after { display: none; }
}
}
第三种效果
第三种效果换药不换汤,效果相同,我们使用不同的实现方式,使用clip,如下面代码所示。
// 3 ,clip变化
&:nth-child(3) {
background: adjust-hue($color-accent,90deg);
a {
&:before {
clip: rect(0,0,50px,0);
}
&:hover:before {
clip: rect(0,100px,50px,0);
}
&:after { display: none; }
}
}
第四种效果
第四种效果同样使用clip,不过第三种效果使用clip:rect(),第四种方式使用clip:circle()这种方式目前支持webkit浏览器,浏览器不给力的同学请勿吐槽。
// 4 clip path circle
&:nth-child(4) {
background: adjust-hue($color-accent,120deg);
a {
&:before {
clip-path: circle(1px at 1px 1px);
}
&:hover:before {
clip-path: circle(50px at 40px 30px);
}
&:after { display: none; }
}
}
第五种效果
第五种效果同样使用clip实现,我们给文字加一个渐变下划线,使用width的变化应该也可以,大家可以自行尝试。
// 5, 渐变下划线
&:nth-child(5) {
background: adjust-hue($color-accent,150deg);
a {
&:before {
top:50px;
content:"";
height:2px;
clip: rect(0,0,50px,0);
opacity: .2;
background: linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -o-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -ms-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -moz-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);
background: -webkit-linear-gradient(left , rgb(255, 208, 243) 11% , rgb(15, 42, 145) 93%);
}
&:hover:before {
opacity: 1;
clip: rect(0,240px,50px,0);
}
&:after { display: none; }
}
}
第六种效果
第六种效果,我们来给:before实现的下划线来点动画。
// 6 下划线动画
&:nth-child(6) {
background: adjust-hue($color-accent,180deg);
a {
&:before {
top:48px;
content:"";
height:2px;
background-color:rgba(#fff,0.2);
}
&:hover:before {
top:22px;
background-color:rgba(#fff,0.5);
}
&:after { display: none; }
}
}
第七种效果
又是一种修饰线条动画,两条线原来在两侧,hover之后移动文字下方。
// 7,修饰线条动画
&:nth-child(7) {
background: adjust-hue($color-accent,360deg);
a {
&:before,&:after {
width:2px;
height:38px;
content:"";
background-color: rgba(255,255,255,.2);
position: absolute;
}
&:before {
transform-origin:30px 20px;
}
&:after {
transform-origin:30px 20px;
transform:translateX(94px);
}
&:hover:before {
height:80px;
transform:rotate(-90deg);
background-color: rgba(255,255,255,.4);
}
&:hover:after {
height:80px;
transform:translateX(40px) translateY(64px) rotate(90deg);
background-color: rgba(255,255,255,.6);
}
}
}
第八种效果
第八种效果为提示文字变大动画,:before伪对象实现提示文字,hover之后提示文字由小变大,透明度从0到1。
// 8,提示文字变大
&:nth-child(8) {
background: adjust-hue($color-accent,240deg);
a {
&:before {
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
}
&:hover:before {
opacity: 1;
visibility: visible;
transform: scale(1);
}
&:after { display: none; }
}
}
第九种效果
第九种效果为第八种的一个变体,提示文字由大变小。
// 9,提示文字由大变小
&:nth-child(9) {
background: adjust-hue($color-accent,210deg);
a {
&:before {
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
visibility: hidden;
transform: scale(1.5);
}
&:hover:before {
opacity: 1;
visibility: visible;
transform: scale(1);
}
&:after { display: none; }
}
}
第十种效果
第十种效果使用了:before和:after两个伪对象,分别从左右两侧向中间集中。
// 10,两侧向中间
&:nth-child(10) {
background: adjust-hue($color-accent,270deg);
a {
&:before, &:after {
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
visibility: hidden;
}
&:before { transform: translateX(-100%); }
&:after { transform: translateX(100%); }
&:hover:before, &:hover:after {
opacity: 1;
visibility: visible;
transform: none;
}
}
}
第十一种效果
第十一种效果由第十种变种而来,:before和:after两个伪对象形成的提示文字从上下到中间。
// 11, 上下到中间
&:nth-child(11) {
background: adjust-hue($color-accent,300deg);
a {
&:before, &:after {
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
visibility: hidden;
}
&:before { transform: translateY(-100%); }
&:after { transform: translateY(100%); }
&:hover:before, &:hover:after {
opacity: 1;
visibility: visible;
transform: none;
}
}
}
第十二种效果
第十二种效果简化了第十一种效果,仅仅使用:before伪对象实现动画。
// 12
&:nth-child(12) {
background: adjust-hue($color-accent,330deg);
a {
&:before {
top: 0; left: 0; right: 0; bottom: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-100%);
}
&:hover:before {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
&:after { display: none; }
}
}
又加了三个效果哈,大家看看哈。
第十三种效果
// 13
&:nth-child(13) {
background: adjust-hue($color-accent,360deg);
a {
&:before,&:after {
width:0px;
height:2px;
background-color: #fff;
content:"";
left:auto;right:auto;
top:auto;bottom:auto;
}
&:before{
left:0;
top:-4px;
}
&:after{
right:0;
bottom:-4px;
}
&:hover:before,&:hover:after {
width:100px;
}
}
}
第十四种效果
这里需要四条线,我们可以使用a的:before和:after伪对象实现两条,另外两条就不好实现了。我们在a之外再套个壳儿span,然后用这个壳儿的:before和:after伪对象实现另外两条线。
// 14
&:nth-child(14) {
background: adjust-hue($color-accent,390deg);
span{
display: inline-block;
width:100px;
height:44px;
margin:20px;
position: relative;
&:before,&:after {
width:0px;
height:2px;
background-color: #fff;
content:"";
position: absolute;
transition:all $duration $timing;
}
&:before{
left:0;
top:-6px;
}
&:after{
right:0;
bottom:-2px;
}
&:hover:before,&:hover:after{
width:100px;
}
}
a {
margin:0;
&:before,&:after {
width:2px;
height:0px;
background-color: #fff;
content:"";
left:auto;right:auto;
top:auto;bottom:auto;
}
&:before{
left:-2px;
top:-4px;
}
&:after{
right:-2px;
bottom:-4px;
}
&:hover:before,&:hover:after {
height:50px;
}
}
}
第十五种效果
// 15
&:nth-child(15) {
background: adjust-hue($color-accent,420deg);
span{
display: inline-block;
width:100px;
height:44px;
margin:20px;
position: relative;
&:before,&:after {
width:0px;
height:2px;
background-color: #fff;
content:"";
position: absolute;
transition:all $duration/4 $timing;
}
//top线
&:before{
left:0;
top:-6px;
transition-delay:$duration/4*3;
}
//bottom线
&:after{
right:0;
bottom:-2px;
transition-delay:$duration/4;
}
&:hover:before{
width:100px;
transition-delay:$duration/4*0;
}
&:hover:after{
width:100px;
transition-delay:$duration/4*2;
}
}
a {
margin:0;
&:before,&:after {
width:2px;
height:0px;
background-color: #fff;
content:"";
left:auto;right:auto;
top:auto;bottom:auto;
transition:all $duration/4 $timing;
}
//left线
&:before{
left:-2px;
bottom:-4px;
transition-delay:0;
}
//right线
&:after{
right:-2px;
top:-4px;
transition-delay:$duration/4*2;
}
&:hover:before{
height:50px;
transition-delay:$duration/4*3;
}
&:hover:after {
height:50px;
transition-delay:$duration/4;
}
}
}
感谢您阅读本文,如果您能看到这里,说明您有强烈的求知欲和超强的毅力,成功已经不远了。
最后欢迎留言互动,如果您觉得好就点个赞,如果觉得不好请您踩了之后帮帮我,给我提点意见,万分感谢。
----------------------------------------------------------
前端开发whqet,关注前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------