Javascipt爱心代码
时间: 2024-10-18 10:11:02 浏览: 26
JavaScipt基本教程之前言
JavaScript爱心代码通常是指通过HTML和CSS结合JavaScript编写的一些动画效果或者图形展示,其中最常见的就是一个心形图案随着鼠标悬浮而变化。这种代码经常用于网页设计中的交互元素,给用户带来一些趣味性的体验。
例如,你可以创建一个简单的HTML结构,然后使用CSS定义形状并添加样式,再利用JavaScript处理交互事件,比如改变颜色、大小或是动态旋转等。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.heart {
width: 100px;
height: 95px;
position: relative;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
top: 47px;
left: 50%;
border-radius: 50% 50% 0 0;
transform-origin: bottom center;
transform: rotate(-45deg);
}
.heart:before {
width: 86px;
height: 86px;
background-color: red;
margin-left: -43px;
}
.heart:after {
width: 53px;
height: 100px;
background-color: #fff;
margin-left: -26px;
box-shadow: 0 13px 26px rgba(0, 0, 0, 0.19), 0 4px 20px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="heart" id="myHeart"></div>
<script>
document.getElementById('myHeart').addEventListener('mouseover', function() {
this.style.transform = 'rotate(45deg)';
});
document.getElementById('myHeart').addEventListener('mouseout', function() {
this.style.transform = '';
});
</script>
</body>
</html>
```
阅读全文