<style>
body{
background-color: gray;
}
p{
font-size: 300px;
text-align: center;
color:gray;
transition: all 3s;
}
/* 当移入p的时候修改第一个span */
p:hover span:nth-child(1){
transition: all 1s;
/* 设置盒子阴影左右两边的颜色不一样,让人视觉产生错觉 */
text-shadow: -2px -2px 5px white,2px 2px 5px hotpink;
}
p:hover span:nth-child(2){
transition: all 1s 1s;
text-shadow: -2px -2px 5px white,2px 2px 5px hotpink;
}
p:hover span:nth-child(3){
transition: all 1s 2s;
text-shadow: -2px -2px 5px white,2px 2px 5px hotpink;
}
</style>
</head>
<body>
<p> <span>I</span> <span>❤</span> <span>U</span> </p>
</body>
</html>