SVG 和 CSS3 实现一个超酷爱心 Like 按钮

Python微信订餐小程序课程视频

https://blog.csdn.net/m0_56069948/article/details/122285951

Python实战量化交易理财系统

https://blog.csdn.net/m0_56069948/article/details/122285941
在现代网页中,我们经常可以在一些文章、视频和图片页面上找到”Like”按钮,并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢。大部分”Like”按钮是纯文本按钮或者图片按钮,如果你想让它们具有特别的动画特效,那么我们就需要用到CSS3或者JavaScript了。本文给大家带来一个带有爱心散列动画的Like按钮,主要采用了SVG和CSS3这两个技术。当你点亮Like按钮时,按钮的四周将会散发出多个五彩绚丽的爱心。

效果预览

代码实现

HTML代码

首先我们用SVG的Path路径绘制了一个爱心按钮:

<svg height="320" width="320" class="like" onclick="document.body.classList.toggle('liked')"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90" fill="white"> 
svg>

同时定义了onclick事件,当点击这个爱心按钮时,CSS类将会在likeliked之间切换。

就下来就是定义爱心按钮点击后周围出现的元素,主要是一些五彩的小圆点和一些不同风格颜色的SVG小爱心,代码如下:

<div class="dot dot-1">div>
<div class="dot dot-2">div>
<div class="dot dot-3">div>
<div class="dot dot-4">div>
<div class="dot dot-5">div>
<div class="dot dot-6">div>
<div class="dot dot-7">div>
<div class="dot dot-8">div><svg height="40" width="40" viewBox="0 0 320 320" class="h h-1"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90">svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-2"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90">svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-3"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90">svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-4"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90">svg><svg height="40" width="40" viewBox="0 0 320 320" class="h h-5"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90">svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-6"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90">svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-7"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90">svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-8"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90">svg><svg height="110" width="110" viewBox="0 0 320 320" class="fly fly-1"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90">svg>
<svg height="110" width="110" viewBox="0 0 320 320" class="fly fly-2"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90">svg>

到这里为止,我们利用了HTML和SVG将Like爱心按钮以及点击后的动画元素全部绘制了出来。接下来就是添加相应CSS来实现动画效果了。

CSS代码

首先是SVG爱心按钮的CSS代码,这是点击前的默认样式:

svg.like {position: fixed;z-index: 10;top: calc(50vh - 160px);left: calc(50vw - 160px);border-radius: 100%;-webkit-transform: scale(0.3);transform: scale(0.3);-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;box-shadow: 0 0 250px rgba(0, 0, 0, 0.4);background: #212121;cursor: pointer;
}

然后点击按钮后,CSS类将会切换到liked,这时候按钮将会闪动一下,同时周围将会飞入许多五彩的小圆点和小爱心。闪动动画的代码如下:

body.liked svg.like {-webkit-animation: blink 1s forwards;animation: blink 1s forwards;
}
@-webkit-keyframes blink {10% {-webkit-transform: scale(0.42);transform: scale(0.42);background: #8815b7;}100% {background: #e01f4f;}
}@keyframes blink {10% {-webkit-transform: scale(0.42);transform: scale(0.42);background: #8815b7;}100% {background: #e01f4f;}
}

小圆点和小爱心飞入的动画代码如下:

body.liked svg.fly.fly-1 {-webkit-animation: fly-1 1s 0.1s;animation: fly-1 1s 0.1s;
}
body.liked svg.fly.fly-2 {-webkit-animation: fly-2 1s 0.1s;animation: fly-2 1s 0.1s;
}
@-webkit-keyframes fly-1 {25% {margin: -100px 0 0 100px;}75% {margin: 100px 0 0 -100px;z-index: 5;}100% {z-index: 11;}
}
@keyframes fly-1 {25% {margin: -100px 0 0 100px;}75% {margin: 100px 0 0 -100px;z-index: 5;}100% {z-index: 11;}
}
@-webkit-keyframes fly-2 {25% {margin: -100px 0 0 -100px;}75% {margin: 100px 0 0 100px;z-index: 5;}100% {z-index: 11;}
}
@keyframes fly-2 {25% {margin: -100px 0 0 -100px;}75% {margin: 100px 0 0 100px;z-index: 5;}100% {z-index: 11;}
}

最后我们把五彩小圆点和小爱心的CSS代码也贴出来:

div.dot {width: 12px;height: 12px;background: white;position: fixed;z-index: 9;border-radius: 100%;top: calc(50vh - 6px);left: calc(50vw - 6px);
}
div.dot:before {content: "";width: 8px;height: 8px;border-radius: 100%;top: -20px;left: 2px;position: absolute;background: white;
}
div.dot:after {content: "";width: 11px;height: 11px;border-radius: 100%;top: -160px;left: 2px;position: absolute;background: white;display: none;
}
body.liked div.dot {opacity: 0;-webkit-transform: translateY(-100px);transform: translateY(-100px);background: #00e5ff;transition: opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s;transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s;transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s;
}
body.liked div.dot:after {display: block;
}
body.liked div.dot.dot-2 {-webkit-transform: rotate(45deg) translateY(-100px);transform: rotate(45deg) translateY(-100px);
}
body.liked div.dot.dot-3 {-webkit-transform: rotate(90deg) translateY(-100px);transform: rotate(90deg) translateY(-100px);
}
body.liked div.dot.dot-4 {-webkit-transform: rotate(135deg) translateY(-100px);transform: rotate(135deg) translateY(-100px);
}
body.liked div.dot.dot-5 {-webkit-transform: rotate(180deg) translateY(-100px);transform: rotate(180deg) translateY(-100px);
}
body.liked div.dot.dot-6 {-webkit-transform: rotate(225deg) translateY(-100px);transform: rotate(225deg) translateY(-100px);
}
body.liked div.dot.dot-7 {-webkit-transform: rotate(270deg) translateY(-100px);transform: rotate(270deg) translateY(-100px);
}
body.liked div.dot.dot-8 {-webkit-transform: rotate(305deg) translateY(-100px);transform: rotate(305deg) translateY(-100px);
}

到这里,整个Like爱心按钮动画就完成了。文章最后也将源码献给大家。

源码下载

完整的代码我已经整理出了一个源码包,供大家下载学习。

源码下载链接: https://mp.weixin.qq.com/s/rJK07Dr63KpJZ1xfCSKHBg

代码仅供参考和学习,请不要用于商业用途。

最后总结

这个SVG和CSS实现的Like按钮非常有创意,很适合在一些商品展示平台上使用。另外,对于like后出现的五彩小圆点和小爱心,大家也可以发挥自己的想象,修改或者添加别的元素,因为SVG非常灵活,可以轻松绘制任何你喜欢的形状。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401093.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

redis简单学习3-redis常用命令总结

2019独角兽企业重金招聘Python工程师标准>>> 1.键值相关的命令 keys 返回满足给定pattern的所有key 表达式* 代表取出所有的key redis 127.0.0.1:6379> keys * 1) "myzset2" 2) "myzset3" 3) "mylist" 4) "myset2" 5)…

webpack 使用

首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js&#xff1a; <!-- index.html --> <html> <head> <meta charset"utf-8"> </head> <body> <script src"bundle.js"></script> </body>…

SpringCloud入门简述

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 1、微服务简述 ​ 微服务&#xff0c;是一个小型的服务&#xff0c;也是一种设计…

微软的创新还是败笔?Windows 8为苹果创造天赐良机

网络安全公司Avast近日公布的数据显示&#xff1a;Windows系统使用人数正在不断下降。这一结果对微软来说可谓噩梦&#xff0c;于此同时&#xff0c;苹果则不断加强市场占有率。又是什么导致了这样的结果&#xff1f;接下来就看看最主要的几点&#xff1a; 调查覆盖了13.5万Wi…

VMware ubuntu 上网

直接使用桥接模式吧&#xff0c;将虚拟机直接连接到外部网络。同样在Ubuntu里面设置网络ip&#xff0c;见上一篇文章转载于:https://blog.51cto.com/vincent1992/1591102

【转】做好性能测试的6个关注点

一、性能测试提前准备关注点 1、性能测试的环境配置需要能够尽可能的模拟版本的现场使用&#xff0c;包括外网的设备&#xff0c;软件网元&#xff0c;各种硬件平台&#xff0c;操作系统&#xff0c;软件平台&#xff1b; 2、性能测试需要准备合适的模拟脚本来尽可能全真的模拟…

testbench常用任务之SPI slave输出数据

模仿了SPI master从SPI slave读取数据的MiSO数据状态 每8个clk后读取的数据加1 用的一些额外寄存器需要自己声明和初始化 //------------------------------------------------------------------------- //send serial data which is increase by 1 on MiSO line //----------…

大坑!有网,电脑qq登不上去!!

手机qq --> 设置 --> 账号设备安全 --> 允许手机电脑同步在线 或是其他设置干扰导致转载于:https://www.cnblogs.com/supy/p/6762518.html

Vue生产环境调试的方法

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 vue 生产环境默认是无法启用vue devtools的&#xff0c;如果生产应用出了问题&…

RavenDB:基于Windows/.NET平台的NoSQL数据库

众所周知&#xff0c;NoSQL运动旨在成为大数据时代传统关系数据库管理系统的替代品。如今Microsoft对开源的态度有所转变&#xff0c;RavenDB就是很好的例子。Microsoft对RavenDB&#xff08;NoSQL数据库&#xff09;的认可令很多人感到惊讶。RavenDB可以轻易的替代关系数据库管…

JDBC实例--JDBC连接池技术解密,连接池对我们不再陌生

一、为什么我们要用连接池技术&#xff1f; 前面的数据库连接的建立及关闭资源的方法有些缺陷。统舱传统数据库访问方式&#xff1a;一次数据库访问对应一个物理连接,每次操作数据库都要打开、关闭该物理连接, 系统性能严重受损。 解决方案&#xff1a;数据库连接池&#xff08…

重温51汇编指令(附实验)

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 重温51汇编指令&#xff08;附实验&#xff09; 写在前面&#xff1a; 在电子控制…

第四章 C++数据类型

#include#includeusing std::cout;using std::cin;using namespace std;int main(){ // int a; //布尔 bool check; check0;//初始化为false check true; //字符 char ch; ch0; cout<< ch <<endl; cout<<(int)ch<<endl; for(int i32;i<128;i) { …

HttpClient 学习整理(转)

来自 http://www.blogjava.net/Alpha/archive/2007/01/22/95216.htmlHttpClient 是我最近想研究的东西&#xff0c;以前想过的一些应用没能有很好的实现&#xff0c;发现这个开源项目之后就有点眉目了&#xff0c;令人头痛的cookie问题还是有办法解决滴。在网上整理了一些东西&…

Hyperledger Fabric 通道配置文件和容器环境变量详解

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 摘要 Fabric 网络启动的过程中需要进行大量配置&#xff0c;新学时对各个配置的作…

课程作业二

课程作业二 github链接 题目要求&#xff1a; 编写一个程序&#xff0c;要求计算给定的圆的半径求圆的面积&#xff0c;并将所结果打印出来。需要建立一个工程&#xff0c;将程序写为两个.cpp与一个.h文件。 文件分离的感想&#xff1a; 对于本次作业&#xff0c;是一道我们平时…

SSH HTTPS 公钥、秘钥、对称加密、非对称加密、 总结理解

2019独角兽企业重金招聘Python工程师标准>>> 作者&#xff1a;shede333主页&#xff1a;http://my.oschina.net/shede333 && http://blog.sina.com.cn/u/1509658847版权声明&#xff1a;原创文章&#xff0c;版权声明&#xff1a;自由转载-非商用-非衍生-保…

windows下wamp安装

1.apache安装 php模块添加&#xff1a;LoadModel php5_module D:/wamp/php/php5apache2_2.dll 然后搜索“addtype”&#xff0c;在下方加入 AddType application/x-httpd-php .php 这句话&#xff0c;以使你的服务器能够识别php文件。 2.php安装 php.ini 打开mysql扩展 3.mysql…

图说Oracle基础知识

http://www.cnblogs.com/hsiang/ 本文版权归作者和博客园共有&#xff0c;欢迎转载&#xff0c;但未经作者同意必须保留此段声明&#xff0c;且在文章页面明显位置给出原文连接&#xff0c;谢谢。转载于:https://www.cnblogs.com/zbj815/p/6773508.html

petite-vue源码剖析-逐行解读@vue-reactivity之effect

Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 当我们通过effect将副函数向响应上下文注册后&#xff0c;副作用函数内访问响应式对…