手动给网站添加了一些CSS

这些CSS主要是:hover,针对于PCweb端的优化,移动web端可能感觉不是那么明显。

优化大致如下:

鼠标移到博文上,博文背景色会变深。比如下图的《尝试Atom》

其实这里,我想点击变深的“背景块”,实现打开文章的功能。但是CSS无法实现这一点,我也没有在这个主题中找到相应的设置,我也没办法对html JS直接编辑,只能放弃。

关于menu,其实我早就想改了。

添加CSS后的menu

现在鼠标移上去,会有圆角和背景颜色的改变。原来的默认就孤零零的几个字,和十多年前的网站没啥区别。

当然,最重要的,添加了好几处:hover和transition,使动画效果更加平滑。

总体而言,大都是针对PCweb的优化,移动web我还真没怎么涉及过,等我学到一定水平了,再来写移动web。

CSS代码放上~

.readmore a:hover{
	transition:all 0.5s;
}
.readmore a{
	text-decoration:none; 
	transition:all 1s;
}
.col-md-12:hover{
	background-color:rgb(230, 230, 230) ;
	transition:background 0.5s;
}
.col-md-12{
	transition:background 1s;
}
.menu-item:hover{
	border-radius:13px;
	background-color:rgb(230, 230, 230);
	transition:all 0.7s;
}
.menu-item:active{
	background-color:rgb(180, 180, 180);
}
.btn-primary{
	transition:all 1s;
}
.btn-primary:hover{
	transition:background 0.5s;
}
li a{
	transition:all 1s;
}
li a:hover{
	transition:all 0.5s;
}

.text-center:hover{
	background-color:rgba(0, 0, 0, 0);
}

说点什么

avatar
  Subscribe  
Notify of

You May Also Like