以下是使用 PHP 实现献花特效的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>献花特效</title>
<style>
body {
background-color: #f8f8f8;
text-align: center;
}
h1 {
color: #333;
}
.rose {
display: inline-block;
position: relative;
margin: 10px;
width: 50px;
height: 50px;
}
.rose img {
width: 100%;
height: 100%;
}
.rose .heart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.rose:hover .heart {
opacity: 1;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
left: 20px;
top: 0;
width: 20px;
height: 32px;
background: url(https://cdn.jsdelivr.net/gh/fex-team/webuploader/demo/heart.png) no-repeat;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</style>
</head>
<body>
<h1>献花特效</h1>
<?php
// 花的数量
$flower_count = 10;
// 循环输出花
for ($i = 0; $i < $flower_count; $i++) {
?>
<div class="rose">
<img src="https://cdn.jsdelivr.net/gh/fex-team/webuploader/demo/rose.png" alt="玫瑰">
<div class="heart"></div>
</div>
<?php
}
?>
</body>
</html>
上述代码会输出一些玫瑰图案，当鼠标悬停在图案上时，会出现一个心形图案，实现了献花特效。注意，该示例中使用了 CSS3 的 transition 属性来实现过渡效果，因此在一些老旧的浏览器上可能不支持。
猜你喜欢：
评论