初学者用html制作的发射爱心
这个图是自己画的，因为当时在学transition就突然间想画了一个小娃娃发射html style="color:#2aa0ea" target=_blank class=infotextkey>爱心的图，但是可能是后面另一个娃娃脸变红的图不够精细，图太少了导致前面发射心心的过程很清晰，但是另一个娃娃接受心心后脸红的这一部分没有很好的呈现，如果有人使用它的话可以再往后面加几帧。
目录
代码：
所需的图片：
使用到的知识：
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>biu!</title> <style> div { width: 167px; height: 126px; background: url(WPS.png); transition: 2s steps(20); } div:hover { background-position: left -2766px; } </style> </head> <body> <div></div> </body> </html> 所需的图片： 使用到的知识：
过渡的属性transition
作用：可以让用户看到从一种状态到另一种状态的变化过程
Transtion:过渡时间 过渡属性 运动曲线
过渡时间：单位秒（s）毫秒（ms）
过渡属性：指哪个属性存在过渡效果 默认是all 所有
运动曲线：从一个状态到另一个状态的变化形式 steps（步骤）
注意点：transition不支持display:none与display：block
Transiton如果写在初始位置，鼠标悬停和离开都存在过渡效果
如果写在hover的位置，只有悬停时存在过渡效果
👁️ 阅读量：0
© 版权声明：本文《初学者用html制作的发射爱心》内容均为本站精心整理或网友自愿分享，如需转载请注明原文出处：https://www.zastudy.cn/wen/1687009717a417266.html。