今天继续CSS的学习 以下是学习内容
CSS3新特性
圆角 border-dadius
div{
width:500x;
height:50px;
background-color: red;
}
在div{}中加入border-dadius: 5px;后方框的角边缘
若有四个值 顺序为左上角 右上角 右下角 左下角
三个值 顺序为左上角 右上角和左下角 右下角
两个值 顺序为左上角和右下角 右上角和左下角
一个值 四个圆角值相同
阴影 box-shadow
值:
h-shadow 必选 水平阴影的位置
v-shadow 必选 垂直阴影的位置
blur 可选 模糊距离
color 可选 阴影颜色
.box{width: 400px;height: 400px;background-color: red;margin: 0 auto; (auto让方框左右空间平均分配)box-shadow: 0 0 10px rgba(0,0,0,0.5); (加入后有阴影)
}
动画
@keyframes创建动画
@keyframes 名字
{
0%{
background-color: red;
}
50%{
background-color: green;
}
100%{
background-color: red;
}
}
animation执行动画
值:
name 设置动画名字
duration 设置动画持续时间
timing-function 设置动画效果的速率
值 ease 逐渐变慢(默认)linear 匀速ease-in 加速ease-out 减速ease-in-out 先加速后匀速
delay 设置动画的开始时间(延时执行)
iteration-count 设置动画循环的次数 infinite为无限循环
direction 设置动画播放的方向
值: normal (默认)表示向前播放alternate 动画播放在第偶次向前播放 奇数次反方向播放
animation-play-state 设置动画的播放状态 running播放 paused停止播放
div
{
width: 200px;
height: 200px;
background-color: red;
animation: 名字 3s linear 0 infinite;
}
明天将继续学习CSS3的特性