首页 > 其他分享 >陪玩app开发,实现一个爱心按钮的代码解析

陪玩app开发,实现一个爱心按钮的代码解析

时间:2024-02-24 09:00:09浏览次数:40  
标签:heart app 50% 13px 爱心 按钮 解析

陪玩app开发,实现一个爱心按钮的代码解析
❤️ 爱心按钮
制作一个爱心的方式有很多,可以用图标库的爱心,可以写一个svg,可以用图片,我这里就用伪元素的方式做一个爱心。

<!-- fullLove.html -->
<div class="likeBtn" id="likeBtn">
  <span class="heart" id="heart"></span>
</div>

 

/* fullLove.css */
.heart{
  
  height: 13px;
  width: 13px;
  transform: rotate(-45deg) scale(1);
  display: inline-block;
}
.heart::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  background-color: inherit;
  border-radius: 50%;
  height: 13px;
  width: 13px;
}
.heart::after {
  content: '';
  position: absolute;
  top: 0;
  right: -50%;
  background-color: inherit;
  border-radius: 50%;
  height: 13px;
  width: 13px;
}

再给外层加一些阴影就可以出来拟态化效果
在这里插入图片描述
以上就是陪玩app开发,实现一个爱心按钮的代码解析, 更多内容欢迎关注之后的文章

 

标签:heart,app,50%,13px,爱心,按钮,解析
From: https://www.cnblogs.com/yunbaomengnan/p/18030713

相关文章

  • Unity编辑器扩展秘籍-利用EditorApplication.contextualPropertyMenu为右键菜单增加自
    假设我们希望为材质右键弹出按钮增加新的功能,应该怎么做呢我们可以通过注册EditorApplication.contextualPropertyMenu全局回调方法,增加自定义的MenuItemusingUnityEditor;usingUnityEngine;namespaceYaojz{[InitializeOnLoad]publicstaticclassMaterialC......
  • 云打印app下载,云打印app在哪下载?
    随着互联网技术的发展,云打印技术已经逐渐成熟。而对于用户来说,很多有打印需求的用户都需要用到云打印,那么云打印App怎么下载,云打印app在哪下载呢?今天带大家来了解一下。 云打印app在哪下载?很多有打印需求的用户都需要用到云打印,现在很多平台都支持云打印功能,那么云打印App在......
  • mybatis—mapper.xml里的多种写法举例
    mybatis—mapper.xml里的多种写法举例目录mybatis—mapper.xml里的多种写法举例向一个表里插入另一个表的一些数据并进行取舍需要查询的select后的字段如果有不少语句都一致的话可以考虑单独提出来更新删除in语句面对集合和字符串<trim>标签<choose>标签判断<when>、<other......
  • 在mapper.xml中编写sql规则和常见函数写法
    在mapper.xml中编写规则和常见函数写法目录在mapper.xml中编写规则和常见函数写法service传到mapper.xml常见查询语句的写法group_concatcasewhenelseendCOALESCEDUAL模糊查询写法关于where1=1xml中不能存在的特殊字符——特殊转义或<![CDATA[]]>sql编写的一些......
  • scrapy配置文件结构解析
    配置文件结构####基础配置#项目名BOT_NAME="scrapy_demo"#爬虫所在路径SPIDER_MODULES=["scrapy_demo.spiders"]NEWSPIDER_MODULE="scrapy_demo.spiders"#日志级别LOG_LEVEL='ERROR'#请求头中的USER_AGENTUSER_AGENT="Mozilla/......
  • 异常 app key or app secret must be initialed
     物联网平台移动开发sdk。在android应用的问题。按照文档集成后,运行抛异常(仅调用SDKManager.init(this);)异常摘录片段如下:java.lang.RuntimeException:Unabletocreateapplicationcom.kong.home_iot_control.MainApplication:com.alibaba.cloudapi.sdk.exception.SdkExc......
  • scrapy目录结构与解析方式
    scrapy目录结构myfirstscrapy#项目名字-myfirstscrapy#包 -__init__.py -spiders#包放爬虫,可能会有很多爬虫 -__init__.py -cnblogs.py#爬虫文件--》一个爬虫就是一个文件,可以写多个 -items.py#放一个个类---》类似于django......
  • 如何高效自我规划?日程计划待办清单App
    《礼记·中庸》中有言:“凡事豫则立,不豫则废。”这句话对我来说,不仅是一个生活哲学,也是我管理日常工作和学习的准则。在快节奏的现代生活中,有效的自我规划对于达成目标、提升效率具有不可估量的价值。自我规划的过程包括制定每天的日程计划、记录待办清单、设置提醒、标记完成任务......
  • 查询pytest --version报错 AttributeError: module ‘collections‘ has no attribute
     卸载pytest及关联的插件先查询一下pytest及对应关联的插件 pipuninstallcoloramaexceptiongroupiniconfigpackagingpluggytomliallure-pytestpytest-allure-adaptorpytest回车,每次都回复Y,同意卸载 再重新安装pytestpipinstallpytest-ihttp://pypi.douba......
  • Go 100 mistakes - #61: Propagating an inappropriate context
       疑问:前两种情况(1.客户端连接中断2.HTTP请求取消)发生,publish却不expire也不会被cancel,这样会不会有问题? ......