初学者用html制作的发射爱心

最新推荐文章于 2024-04-03 10:08:38 发布

不会编头发

最新推荐文章于 2024-04-03 10:08:38 发布

阅读量4.4k

点赞数 4

文章标签： html

本文链接：https://blog.csdn.net/qq_51191109/article/details/123050204

版权

这个图是自己画的，因为当时在学transition就突然间想画了一个小娃娃发射爱心的图，但是可能是后面另一个娃娃脸变红的图不够精细，图太少了导致前面发射心心的过程很清晰，但是另一个娃娃接受心心后脸红的这一部分没有很好的呈现，如果有人使用它的话可以再往后面加几帧。

代码：

所需的图片：

使用到的知识：

代码：

<!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的位置，只有悬停时存在过渡效果

不会编头发

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
初学者用html制作的发射爱心

这个图是自己画的，因为当时在学transition就突然间想画了一个小娃娃发射爱心的图，但是可能是后面另一个娃娃脸变红的图不够精细，图太少了导致前面发射心心的过程很清晰，但是另一个娃娃接受心心后脸红的这一部分没有很好的呈现，如果有人使用它的话可以再往后面加几帧。
复制链接

扫一扫