边框与动画

xiaoxiao2021-02-28  5

1.圆角边框

border-radius  :用于指定圆角边框的圆角半径。

2.边框阴影

box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。

第一个参数:控制阴影在水平方向的偏移。第二个参数:控制阴影在垂直方向的偏移。第三个参数:控制阴影的模糊程度。第四个参数:控制阴影的缩放程度。第五个参数:改属性值控制阴影的颜色。 <style> div{ width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888;}</style>

动画

1.渐变动画

transition动画可以控制HTML组件的某个属性发生改变时经历的时间,使其以平滑渐变的方式发生改变,产生动画效果。有4个参数。

第一个参数:指定对哪个HTML元素进行处理。第二个参数:定义持续时间。第三个参数:指定渐变的速度。(有多个可用的属性值,请完成自学)第四个参数:指定延迟时间。 <style> div { width:100px; height:100px; background:red; transition:width 2s; } div:hover { width:300px; } </style> <body> <div></div> </body>

如果想设置多个属性的渐变动画,使用逗号分隔。

transition: width,height 1s,1s ease,ease;

并不是所有的CSS属性都支持渐变动画。

支持动画的CSS属性

2.Animation动画

annimation动画提供了更灵活的制作动画的方法。animation是一个符合属性,有5个参数:

第一个参数:指定动画的名称。第二个参数:指定动画的持续时间。第三个参数:指定动画的变化速度。第四个参数:指定动画延迟多久开始执行。第五个参数:指定动画循环执行的次数。 <style> div { width:100px; height:100px; background:red; animation:myfirst 5s; } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } </style> <body> <div></div> </body>
转载请注明原文地址: https://www.6miu.com/read-2350164.html

最新回复(0)