帮我写个网站主色调粉色,有动态效果的网站
时间: 2023-05-11 10:06:38 浏览: 60
好的,我可以为您提供一些建议。您可以使用CSS3的渐变效果来实现网站主色调粉色的效果,同时使用JavaScript来添加动态效果。以下是一个简单的示例代码:
HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>Pink Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="container">
<h1>Welcome to my pink website!</h1>
<p>This is a sample paragraph.</p>
</div>
</body>
</html>
```
CSS:
```
body {
background: linear-gradient(to bottom, #ff99cc, #ff66cc);
}
.container {
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
h1 {
color: #ff66cc;
}
p {
color: #333;
font-size: 18px;
line-height: 1.5;
}
```
JavaScript:
```
window.onload = function() {
var container = document.querySelector('.container');
container.addEventListener('mouseover', function() {
container.style.transform = 'rotate(10deg)';
container.style.transition = 'transform 0.5s ease-in-out';
});
container.addEventListener('mouseout', function() {
container.style.transform = 'rotate(0deg)';
container.style.transition = 'transform 0.5s ease-in-out';
});
};
```
这个示例代码会创建一个粉色渐变背景的网站,同时添加一个容器元素,当鼠标悬停在容器上时,容器会旋转10度,当鼠标移开时,容器会恢复原来的位置。您可以根据自己的需要进行修改和调整。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)