CSS样式动态效果代码
时间: 2023-07-09 22:36:38 浏览: 62
以下是一个简单的CSS样式动态效果的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS样式动态效果</title>
<style>
button {
background-color: #007bff;
color: #fff;
font-size: 24px;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
transition: background-color 0.5s ease;
}
button:hover {
background-color: #0056b3;
}
h1 {
font-size: 36px;
color: #007bff;
animation: shake 0.5s infinite;
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<h1>我的动态效果</h1>
<button>点击我</button>
</body>
</html>
```
在这个例子中,我们定义了两个CSS样式动态效果。第一个效果是当鼠标悬停在按钮上时,按钮的背景颜色从蓝色渐变到深蓝色,使用了CSS3的过渡效果`transition`。第二个效果是当页面加载时,标题会抖动一下,使用了CSS3的动画效果`animation`和一个名为`shake`的自定义动画。
你可以根据自己的需要创建各种不同的CSS样式动态效果,只需要使用CSS3提供的过渡效果、动画效果等特性,或者使用JavaScript等编程语言实现更复杂的效果。