uniapp喜欢心形
文章描述：
uniapp心形点赞喜欢图标样式代码
template
<template>
<view class="container">
<view class="heart"></view>
<view class="heart" :class="hasChange ? 'like' : '' "></view>
</view>
</template>
javascript
这里可以使用js进行选中点赞
export default{
data(){
return{
hasChange:false
}
},
onLoad() {
this.hasChange = true;
}
}style
.heart{
/*设置弹性布局*/
display: flex;
margin: 50upx auto;
width: 40upx;
height: 30upx;
/*通过过滤器设置元素内阴影样式*/
filter: drop-shadow(0 1upx 1upx #d9d9da);
/*设置元素动画效果*/
animation: breath 2s ease infinite;
}
.heart::before,
.heart::after{
content: '';
/*创建的两个伪元素各占一份*/
flex: 1;
height: 30upx;
/*设置边框四个角的大小 顺序是：上、右、下、左*/
border-radius: 20upx 20upx 4upx 4upx;
/*设置图形变形（旋转、拉伸等）的原点*/
transform-origin: 50% 6upx;
background-color: #d9d9da;
}
.heart.like::before,
.heart.like::after{
background: red;
filter: drop-shadow(0 1upx 1upx #973340a3);
}
.heart::before{
/*元素根据设置的原点逆时针旋转45度*/
transform: rotate(-45deg);
}
.heart::after{
/*元素根据设置的原点顺时针旋转45度*/
transform: rotate(45deg);
}
发布时间：2021/10/17
发表评论