前言
将近一个月没更新过博客了,最近在忙一个项目,这个东西随说是简单,奈何甲方志存高远,硬是想让我们把一个子虚乌有的东西吹成已经存在的真东西。文案之类的都行了,页面这东西咱也能做出来,就是甲方的需求模糊不定,想好看还不给素材,哥几个只能硬着头皮肝了。哥们审美不行,只能做做css,只是后端带哥被硬生生逼成了美工。说实话,人家做的图还真的就比我做的漂亮。我还是写写css吧。
开搞
1.想要做一个背景模糊但内容清楚的效果,直接把背景给一个background
,用rgba
来控制颜色(背景图片)和透明度就行,之后给这个背景的标签一个:hover
,里面还可以添加样式,这样背景上的文字或图片不会模糊。
div {
background: rgba(255, 255, 255, 1);
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
}
div:hover {
box-shadow: 10px 10px 5px 5px #999999;
}
2.想要一个鼠标移到图片上,图片等比放大的效果,
div {
transition: all 0.8s; //缩放速度
}
div:hover {
transform: scale(1.1);//放大比例
}
3.如果想做一个让谷歌,火狐或IE都适配的东西就要用这些东西
_和- , ie6可以识别;
-webkit- ,针对safari,chrome浏览器的内核CSS写法
-moz-,针对firefox浏览器的内核CSS写法
-ms-,针对ie内核的CSS写法
-o-,针对Opera内核的CSS写法