任务是使用 CSS 为所有角的形状设置动画。层叠样式表 (CSS) 是一种用于为网页提供样式的语言。
使用的属性:在本文中,我们将使用以下属性
- 动画:此属性用于将样式的一种形式更改为另一种形式。
- 边框右下角半径:此属性用来定义右下角的半径。
- 边框左下角半径:此属性用来定义左下角的半径。
- 边框左上角半径:此属性用来定义上-左转弯的半径。
- 边框右上角半径:此属性用来定义左下角的半径。
- @Keyframes 规则:此规则用于在特定时间将更改从当前样式逐渐变为新样式。
方法:
第一个任务是使用 style 元素创建基本的 HTML 页面结构。在head标签中创建style标签后,我们将添加border-bottom-right-radius、border-bottom-left-radius、border-top-left-radius、border-top-right-radius属性来设置所有的样式角,并在动画属性的帮助下提供动画。
例子:
HTML
GeeksforGeeks
输出: