大家好,我是 Just,这里是「设计师工作日常」,今天分享的是用css实现一个丝滑Q弹的爱心点赞按钮动效。
最新文章通过公众号「设计师工作日常」发布。
目录
前台小姐姐的美好 (2)
最近经常和公司新来的漂亮的前台小姐姐在vx上聊天。
她叫小莉,长得漂亮,短发、肤白貌美,喜欢穿短裙和高跟鞋,是个十分开朗漂亮的女孩子。
我们之间的交流始于我多次帮助小莉解决了电脑问题,之后我们互相加了vx好友。因为我多次帮她解决电脑小毛病,她就想邀请我一起吃饭,以表示感谢,我欣然答应了。
在餐厅里,我们聊得非常开心。小莉对我的工作很好奇,她不太明白我在工作时具体在干什么。我简单地解释了一下,告诉她我主要负责软件的界面设计(UI),以及一部分的设计落地还原。
小莉听了点点头,但她说她还是不太懂。于是,我决定给她看一个生动的示范。我拿起旁边背包里的电脑,打开了HBuilderX,然后开始编写代码。我用代码绘制了一个精致的爱心按钮,然后要求小莉点击它。
她小心翼翼地点击了一下,结果惊讶地发现,那个爱心按钮竟然会弹起来,而且还有一个可爱的小烟火的小动画。小莉开心地笑了起来,感觉好棒。
“怎么这么厉害啊,这个按钮居然还有小烟花!” 小莉笑着对我说。
我笑着解释说,这些都是很简单的代码,以后可以给她看更厉害的。
小莉听了非常期待,我们的聊天也更加愉快。饭后,她又邀请我去看新上映的电影,但是我却急着回去,因为我有了一个新的想法,想要写一个更厉害的效果来给小莉看。
在告别的时候,小莉鼓励我说:“加油哦,期待看到你的更厉害的作品!”
我离开餐厅,满心欢喜。或许,这次的相遇将开启一段新的故事。
---- 小故事由“chatGPT”生产
那么我们就来看看我在和小莉约会时,给小莉看的是什么样的爱心按钮吧。
整体效果
知识点:
①:before
和:after
伪选择器的灵活使用
②transform
变形属性灵活使用
③animation
动画和transform
变换属性的使用
思路:
:before
和:after
伪选择器绘制出爱心形状,利用box-shadow
多重阴影实现实现多个小火焰,配合animation
动画属性和transform
变形属性来实现小火焰释放的小动画。
适用于图片或者文章列表页,包括详情页的点赞收藏交互场景。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
label
标签包括input
标签,并设置type="checkbox"
多选按钮,在input
标签后增加两个div
标签。
css 部分代码
1、先隐藏
input
多选按钮,然后利用div
标签,用:before
和:after
伪选择器创建两个圆头矩形,然后利用 position 定位和 transform 变形属性 rotate 旋转角度组成爱心形状
2、然后利用
input
多选框:checked
选择器来判断是否选中状态,给:checked
增加animation
动画属性,设置动画参数,添加关键帧(transform
变形属性),当被选中时,爱心会有一个变形的动画过程
3、用另一个
div
标签,利用box-shadow
多种阴影来模拟出多个小火焰,同样利用input
多选框:checked
选择器,当被选中时,给小火焰增加animation
动画属性,设置动画参数,添加关键帧
完整代码如下
html 页面
css 样式
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
我是 Just,这里是「设计师工作日常」,求点赞求关注!