简单做一个css3动画
时间: 2023-08-25 20:07:32 浏览: 41
下面是一个简单的 CSS3 动画示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example {
from {transform: scale(1);}
to {transform: scale(1.5);}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
这个示例定义了一个类名为 `box` 的元素,并在其中设置了一个 CSS3 动画。动画名称为 `example`,持续时间为 2 秒,无限循环,方向为交替。动画中使用了 `@keyframes` 规则,定义了从 `scale(1)` 到 `scale(1.5)` 的过渡效果。最终效果是一个不断缩放的红色正方形盒子。
相关问题
用css做一个简单动画
好的,下面是一个简单的CSS动画示例,可以让一个元素在页面加载时向右移动:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 定义动画 */
@keyframes slideIn {
from {
margin-left: -100%; /* 元素在页面左侧 */
}
to {
margin-left: 0%; /* 元素在页面正中央 */
}
}
/* 应用动画到元素 */
#myElement {
animation-name: slideIn;
animation-duration: 2s;
}
</style>
</head>
<body>
<div id="myElement">
这是一个会动的元素
</div>
</body>
</html>
```
这个动画定义了一个名为`slideIn`的关键帧,它从页面左侧开始,移动到页面中央。然后通过`animation-name`和`animation-duration`属性将此动画应用到一个ID为`myElement`的元素。您可以根据需要修改此示例。
用css做一个载入动画
好的,以下是一个简单的 CSS 载入动画的代码示例:
HTML 代码:
```html
<div class="loader"></div>
```
CSS 代码:
```css
.loader {
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
```
以上代码会创建一个 60px 的圆形载入动画,其中蓝色的部分是顶部边框,使用了 CSS 动画让它在 2 秒内不断旋转,形成载入的效果。你可以根据自己的需要调整大小、颜色、动画时间等属性。