前端常用的css代码
1、垂直居中对齐
.vc{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .vc{ position:absolute; top:50%; left:50%; width:100px; height:100px; margin:-50px 0 -50px; }
2、全屏显示
html,body{ position:fixed; width:100%; height:100%; } div{ height:100%; }
3、图像灰度
img{ filter:gray; -webkit-filter:grayscale(1); }
4、背景渐变动画
.bg{ background-image:linear-gradient(#5187c4,#1c2f45); background-size:auto 200%; background-position:0 100%; transition:background-position 0.5s; } .bg:hover{ background-position:0 0; }
5、图片边框偏光
img.polaroid{ background:#000; border:solide #fff; border-width:6px 6px 20px 6px; box-shadow:1px 1px 5px #333; width:200px; height:200px;}
相关推荐
yaodilu 2020-08-03
nicepainkiller 2020-05-05
AlisaClass 2020-04-14
wangjie 2020-02-26
冰蝶 2020-01-10
Ladyseven 2020-10-22
李鴻耀 2020-08-17
luofuIT成长记录 2020-09-22
Mynamezhuang 2020-09-18
zhoujiyu 2020-06-28
89510194 2020-06-27
CaiKanXP 2020-06-13
MaureenChen 2020-06-12
Phoebe的学习天地 2020-06-07
淡风wisdon大大 2020-06-06
buttonChan 2020-06-06