点赞效果
作者：互联网
点赞效果
开发工具与关键技术：开发工具DW，关键技术JavaScript与css3
撰写时间：1月11日
1.首先做一个点赞的效果呢就是建立HTML，再使用h2和div标签。如下面图片：
2.再设置它的样式。其中呢rotateZ定义沿着 Z 轴的 3D 旋转。clip 属性剪裁绝对定位元素。
3.怎么让它有点赞的效果呢...然后就是使用关键帧@keyframes。scale() 方法为画布的当前变换矩阵添加一个缩放变换。第二个点赞效果是用了两个关键帧。
4.window.console = window.console || function(t) {};考虑兼容性。可加可不加。用if...else语句，removeClass() 方法从被选元素移除一个或多个类。removeClass()如果没有规定的参数，则该方法将从被选元素中删除所有类。addClass() 方法向被选元素添加一个或多个类。addClass()该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。插件的话只要是jQuery都可以。
效果图：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点赞</title>
</head>
<style>
body {
background-color: #2C262C;
}
h2 {
color: white;
margin-top: 50px;
text-align: center;
font-weight: normal;
}
.heart {
width: 20px;
height: 20px;
margin: 200px auto;
transform: translateZ(0);
color: #FFF;
font-size: 3em;
cursor: pointer;
position: relative;
transition: all .3s ease;
}
.heart:hover {
animation: pulse .6s linear;
}
.heart:before {
content: "❤";
position: absolute;
color: #A12B2B;
opacity: 0;
}
.heart.happy {
color: #A12B2B;
}
.heart.happy:before {
opacity: 0;
transform: translateY(-100px) rotateZ(5deg);
animation: fly 1s ease;
}
/**/
.heart.broken {
color: #aaa;
position: relative;
transition: all .3s ease;
}
.heart.broken:before, .heart.broken:after {
content: "❤";
opacity: 1;
color: #ccc;
position: absolute;
top: -150px;
transform: scale(3) rotateZ(0);
}
.heart.broken:before {
clip: rect(0, 20px, 200px, 0);
animation: break-left 1s ease forwards;
}
.heart.broken:after {
clip: rect(0, 50px, 200px, 25px);
animation: break-right 1s ease forwards;
}
@keyframes pulse {
50% {
transform: scale(1.1);
}
}
@keyframes fly {
0% {
opacity: 0;
transform: translateY(-20px) rotateZ(15deg);
}
50% {
opacity: .75;
transform: scale(4) translateY(-30px) rotateZ(-15deg);
}
100% {
opacity: 0;
transform: scale(4) translateY(-50px) rotateZ(15deg);
}
}
@keyframes break-left {
0% {
opacity: 1;
transform: rotateZ(0);
}
20% {
opacity: .5;
transform: scale(3) translateX(-10px) rotateZ(-20deg) translateY(0);
}
50% {
opacity: .5;
transform: scale(3) translateX(-10px) rotateZ(-20deg) translateY(0);
}
100% {
opacity: 0;
transform: scale(3) translateX(-30px) rotateZ(-25deg) translateY(50px);
}
}
@keyframes break-right {
0% {
opacity: 1;
transform: scale(3) rotateZ(0);
}
20% {
opacity: .5;
transform: scale(3) translateX(10px) rotateZ(20deg) translateY(0);
}
50% {
opacity: .5;
transform: scale(3) translateX(10px) rotateZ(20deg) translateY(0);
}
100% {
opacity: 0;
transform: scale(3) translateX(30px) rotateZ(25deg) translateY(50px);
}
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<body translate="no" >
<h2>Click the heart to like/unlike</h2>
<div class="heart">❤</div>
<script src="jquery-3.2.1.slim.min.js"></script>
<script id="rendered-js" >
var animated = false;
$('.heart').click(function (){
if (!animated) {
$(this).addClass('happy').removeClass('broken');
animated = true;
} else
{
$(this).removeClass('happy').addClass('broken');
animated = false;
}
console.log(animated);
});
</script>
</body>
</html>
标签：opacity,heart,scale,translateY,效果,transform,rotateZ,点赞 来源： https://blog.csdn.net/lxy9876/article/details/114338698