请给我写一个用来表白且有好看特效的代码
时间: 2024-05-12 11:17:04 浏览: 4
当然可以,以下是一个简单的用CSS实现的表白特效代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>表白特效</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: pink;
}
.title {
font-size: 3rem;
margin-bottom: 2rem;
text-align: center;
}
.heart {
position: relative;
width: 80px;
height: 80px;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
left: 32px;
top: 0;
width: 32px;
height: 51px;
background: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.message {
font-size: 2rem;
margin-top: 2rem;
text-align: center;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="container">
<div class="title">My heart is beating for you</div>
<div class="heart"></div>
<div class="message">I love you</div>
</div>
</body>
</html>
```
你可以复制上述代码到自己的网站或本地文件,然后打开浏览器就可以看到一个带表白特效的页面了,祝你成功表白!