给css增加效果
2018-08-12 21:50 w**2 阅读(233) 评论(0) 编辑 收藏 举报
1、过渡:什么属性具有过渡,匀速时间
transition:all linear 2s;
hover中移入有,移出就没有过渡了
2、旋转:
transform:rotate(45deg);
旋转45度
3、放大、缩小、,取值<1 缩小
transform:scale(2);
4、(背景颜色渐变)线性渐变
background:liner-gradient(to right,red,yellow);
5、(背景颜色渐变)径向渐变:从圆心渐变
background:radial-gradient(red,yellow)
6、动画
动画名字 变化方式匀速 运行时间 运行次数
animation:animationName linear 2s 2;(infinite无数次)
(1)在元素外
@keyframes animationName{
from{background-color:red;}
to{background-color:yellow;}
}
(2)@keyframes animationName{
0%{background-color:red;}
20%{background-color:red;}
40%{background-color:red;}
60%{background-color:red;}
80%{background-color:red;}
100%{background-color:red;}
}
7、光标移入的属性
cursor:pointer;
8、元素阴影:
X Y 模糊 (外延)颜色
box-shadow:5px 5px 5px #ccc
9、文字阴影
X Y 模糊 颜色
text-shadow:5px 0 2px red;
10、不占像素,轮廓
outline:none 去掉轮廓
outline:1px solid red;
11、去掉点点
border:none 去掉边框
12、min-width:最小宽度
max-width:最大宽度
13、背景图插入
background:url("") center;