设一个div 在页面加载完成后 改变他的radius值 使div变成圆形 变成圆形后再逐渐变为矩形 重复这一过程
时间: 2024-02-01 14:02:00 浏览: 25
可以使用CSS3的动画实现这个效果。具体可以参考下面的代码:
HTML代码:
```html
<div id="myDiv"></div>
```
CSS代码:
```css
#myDiv {
width: 200px;
height: 200px;
background-color: #ff0000;
border-radius: 100px;
animation: myAnim 4s infinite ease-in-out;
}
@keyframes myAnim {
0% {
border-radius: 100px;
}
50% {
border-radius: 0px;
}
100% {
border-radius: 100px;
}
}
```
上面的代码中,首先给div设置了一个初始的圆形样式,然后定义了一个名为myAnim的动画,动画的关键帧分别对应了圆形和矩形两种样式,最后通过animation属性将动画应用到了该div上。
在这个动画中,我们使用了ease-in-out的动画函数,使得过渡更加平滑,也可以根据需要自行调整。同时,通过将animation的infinite属性设置为true,可以让动画无限循环。
相关问题
设一个div 在页面加载完成后 改变他的radius值 使div变成圆形 变成圆形后再逐渐变为矩形 重复这一过程 使用js完成
可以通过定时器和CSS样式来实现该效果。首先,需要给该 div 设置默认的圆角样式:
```html
<div id="myDiv" style="border: 1px solid black; width: 100px; height: 100px; border-radius: 50%;"></div>
```
然后,通过 JavaScript 代码来改变该 div 的圆角样式:
```javascript
// 获取 div 元素
var myDiv = document.getElementById("myDiv");
// 设置定时器
var timer = setInterval(function() {
// 获取当前圆角半径
var radius = parseInt(myDiv.style.borderRadius);
// 如果已经是矩形,则改为圆形
if (radius == 0) {
myDiv.style.borderRadius = "50%";
}
// 如果已经是圆形,则改为矩形
else if (radius == 50) {
myDiv.style.borderRadius = "0";
}
// 否则,根据方向增加或减少圆角半径
else {
var direction = radius < 25 ? 1 : -1;
myDiv.style.borderRadius = radius + direction + "%";
}
}, 50);
```
在上述代码中,使用 setInterval() 函数来每隔一段时间执行一次改变圆角样式的操作。首先获取当前圆角半径,如果已经是矩形,则改为圆形;如果已经是圆形,则改为矩形;否则,根据当前圆角半径的大小来决定增加或减少圆角半径,并更新 div 的样式。其中,定时器的时间间隔可以根据需要进行调整。
设一个div 在页面加载完成后 改变他的radius值 使div逐渐变成圆形 变成圆形后再逐渐变为矩形 重复这一过程 使用js完成
可以使用CSS3的transition和border-radius属性配合JavaScript来实现这个效果。
首先,在HTML中添加一个div元素,并给它一个默认的CSS样式,如下所示:
```html
<div id="myDiv" style="width: 200px; height: 200px; background-color: #f00;"></div>
```
接着,在JavaScript中获取这个div元素,并添加一个事件监听器,当页面加载完成后触发该事件。在事件处理函数中,我们可以通过修改div元素的border-radius属性来实现逐渐变成圆形的效果。代码如下:
```javascript
var myDiv = document.getElementById('myDiv');
window.addEventListener('load', function() {
var radius = 0;
var intervalId = setInterval(function() {
radius += 5;
if (radius <= 100) {
myDiv.style.borderRadius = radius + '%';
} else if (radius <= 200) {
myDiv.style.borderRadius = (200 - radius) + '%';
} else {
clearInterval(intervalId);
}
}, 50);
});
```
在上面的代码中,我们定义了一个变量radius来表示div元素的圆角半径,初始值为0。然后使用setInterval函数来每隔一定时间执行一次半径增加的操作,直到半径达到100就停止增加,此时div元素就变成了圆形。随后,我们继续让半径增加,直到半径达到200,此时div元素又变成了矩形。最后,我们清除定时器,结束动画效果。
完整的代码如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Div变形</title>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: #f00;
transition: border-radius 0.5s ease-out;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
var myDiv = document.getElementById('myDiv');
window.addEventListener('load', function() {
var radius = 0;
var intervalId = setInterval(function() {
radius += 5;
if (radius <= 100) {
myDiv.style.borderRadius = radius + '%';
} else if (radius <= 200) {
myDiv.style.borderRadius = (200 - radius) + '%';
} else {
clearInterval(intervalId);
}
}, 50);
});
</script>
</body>
</html>
```