七、关键帧动画animation
animation:与过渡一样，是一个简写的集合，参数比较多
name：指定关键帧的名字
duration：指定动画需要多少秒完成
timing-function：动画执行的效果
delay 动画启动之前的延迟，和过渡延迟效果一样，以秒为单位
iteration-count:定义动画播放的次数
n 次，填写数字播放几次
infinite 指定播放无限次（循环播放）
--------以上为常用需要记住------
direction 指定是否轮流播放动画反向播放动画
reverse 动画反向播放
normal 默认值 动画正常播放
fill-mode 规定动画不播放的时候要应用到的样式
forwaeds 当动画播放完成时 保持最后一个属性值（停留在最后一帧）
backwards 定义动画第一次播放关键帧当中的属性值（ 执行第一帧）
play-state 指定动画是运行还是暂停
paused 指定动画暂停
running 指定运行动画
<style>
.one{
width: 200px;
height: 200px;
background-color: orange;
animation:two 4s linear infinite;
/*名字 多少秒完成 完成效果*/
}
@keyframes two{
0%{
width: 250px;
}
50%{
width: 500px;
}
100%{
width: 200px;
}
}
</style>
</head>
<body>
<div class="one"></div>
</body>
</html>
如何定义关键帧 @keyframes 名字
两种形式 from to=0%-100% 用百分比比较多，from to 不好改
@keyframes one{
from{
里面可以写css样式
}
to{
}
}
八、背景渐变
1.线性渐变
默认从上往下，可以用两种颜色分割，颜色之间要用逗号分割。
<style>
.main div:nth-child(1){
/*线性渐变，默认从上往下,可以用两种颜色，颜色之间要用逗号分割*/
background: linear-gradient(red,orange,yellow);
}
.main div:nth-child(2){
/*线性渐变----从左到右*/
background: linear-gradient(to right,red,blue,yellow)
/*向右渐变to right，向左渐变to left*/
}
.main div:nth-child(3){
/* 线性渐变----从左上角到右上角*/
background: linear-gradient(to right bottom,#00f3ff,#0099ff,blue);
}
.main div:nth-child(4){
/*90度从左到右，0度从下到上，180度从上到下*/
background: linear-gradient(90deg,red,blue)
}
</style>
2.径向渐变
<style>
.main div:nth-child(5){
/*径向渐变----颜色分布均匀*/
background:radial-gradient(red,yellow,orange);
}
.main div:nth-child(6){
/*设置径向渐变颜色分布 不能中间有个大数，要从小到大的数*/
background:radial-gradient(blue 5%,red 35%,yellow 60%);
}
.main div:nth-child(7){
/*径向渐变----改变渐变发散形状*/
width: 400px;
height: 400px;
/*ciecle 指定形状为圆形*/
background: radial-gradient(circle,blue,red,yellow);
}
</style>
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
