纯CSS实现二维码展示功能,减少加载JS 第一种方法 第一步 在需要展示二维码的地方添加如下代码,其中标签内容可以根据需要修改成图片等,href=”javascript:”表示标签作为按钮使用,不做跳转... 第二步在样式表style.css...中添加如下代码 /*微信二维码*/ .weixin{ position:relative; } .weixin::after{ content: url(/static...class="facebook weixin" href="javascript:"> 自然css样式也要做相应的改变,如下: .weixin { position: relative; } .
SVG近几年因各种优势被大量的应用,遗憾的是到目前为止微信小程序并不支持以XML的形式使用SVG,这使得SVG的灵活性大大下降,大多数人选择放弃在微信小程序中使用SVG图标方案。...那么,真的就没有办法在微信小程序中愉快的使用SVG图标了吗?...我们先来分析一下,对于使用SVG图标我们有哪些需求: 能够引入使用 能够调整颜色 首先第一点是没有问题的,微信小程序支持以Image.src的形式引入SVG。...在最近对CSS的学习中,我发现有个属性可以可以使DOM的非透明部分投下一个阴影,这个属性就是drop-shadow,属性的值与box-shadow大致相近。...; transform: translateY(-1em); filter: drop-shadow(0 1em 0 currentColor); } 我来解释一下为什么要这么设置DOM结构和CSS
来源:发现科技 2011年的1月21日,微信诞生了。 ? 看惯了这个绿色的图标,有没有想过给它换个骚气蓬勃的颜色? 今天,给大家分享一个随意更改微信图标颜色的方法,各种颜色都有,安卓苹果都适用。...首先,我们需要下载一些微信颜色图标素材。(可根据文末提示下载示例中的图标素材) 安卓用户 ① 安卓手机需要借助定制图标的小软件以及准备各种新的微信图标素材,大家可以根据文末提示下载。...③ 下方找到微信,选择圆角方形的图标形状。 ? ? ④ 再往下找到图标设置,点击这里改变图标。 ? ⑤ 选择导入图标,点击从图库中选择图标。 ? ? ⑥ 然后再点击选择图标,即上传成功。 ?...③ 点击选择,找到微信。 ? ? ④ 打开右上角的三点,选择添加到主屏幕。 ? ? ⑤ 修改新快捷指令名称为微信,选取照片为微信颜色图标,最后添加即可。 ? ?...简单又有趣的微信“换装”玩法,这下大家都会了吧。不用花里胡哨,只求与众不同,赶紧试试吧~
效果图 实现思路 首先通过HTML+CSS实现加载动画的静态效果; 根据需求给每个动画设计不同的动画效果。...例如第一个加载图标的静态绘制 1、首先确定动画的盒子宽高; 2、设置盒子中每一个长方形的宽高以及定位(注意:此处需要将长方形的旋转中心点移动到长方形的右侧边终点,方便后期以该点旋转。)...0.9; } } 进行动画绑定 .circle-line text{ animation: circle 1.5s linear infinite; } 动画绑定完成,发现所有的整个图标一起显示消失
第三方平台系列文章,今天终于又开始更新了,今天继续学习微信(wechat)授权第三方登录 一、准备工作 1、申请微信公众测试号 由于我们是个人开发者,我们需要去注册申请一个微信公众平台的测试号...t=sandbox/login 我们使用微信扫码登录后,我们可以拿到 appID 和 appsecret 2、关注公众测试号 3、配置回调域名 在“网页服务”中找到“网页账号”,修改“网页授权获取用户基本信息...+ "access_token=" + accessToken + "&openid=" + openId + "&lang=zh_CN"; // Step3: 获取微信用户信息 resJson = HttpRequestUtils.httpRequestGet...-8"); return JSONObject.parseObject(result); } httpGet.releaseConnection(); return null; } 三、文档资料 关于微信授权登录的文档地址如下
博主最近看到微信自定义图标最近挺火的,于是就上网搜集了教程给大家,由于市面上的安卓机型设置方法各不相同,无法统一录制教程。...号 —— 新快捷指令 —— 点击 “添加操作”—— 然后搜索 “打开APP” image.png 点击 “选择”—— 搜索“微信”后添加 —— 点击右上角“...”...设置 image.png 这是设置图标的步骤,首先我们把快捷指令的名称改成“微信”—— 然后添加到桌面 —— 更换成想要设置的的微信图标即可 image.png 完成之后即可在桌面查看可爱的微信图标啦,...是不是很萌~ image.png 博主知道大家懒得找图标文章底部给大家准备了可爱的微信图标哦 这样设置后,打开软件手机会提示快捷指令的通知,现在教大家 “去除快捷指令通知” 去除通知 打开快捷指令 ——...——— 把运行前询问 关闭 —— 点击右上角完成 这样打开微信后出现的提示就没有啦 image.png 举一反三可以利用这个方法设置其它APP的图标哟,这种自定义的APP有通知是不会出现小红点的,可以说是非常适合强迫症患者
一、先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 从项目里下载下来并解压,找到ttf格式文件 二、到这个平台https://transfonter.org.../,把刚才下载的ttf字体文件转化成base64格式 原文:http://www.soswen.com/article/10 三、下载下来之后解压找到stylesheet.css ,打开文件,复制这些内容到...wxss里: 四、打开之前在阿里巴巴下载的压缩包,找到iconfont.css文件,打开它全部复制到wxss里 四、在wxml加入字体就可以使用了
居中放置元素是一个比较常见的需求。 可以水平居中,垂直居中。同时水平和垂直居中等等。 在Android的RelativeLayout中,可以使用android:...
网站图标和字体图标 1.网站图标 作用:一个好的ico图标可以加深用户对于网站的记忆。降低用户记忆成本,就好像现在说道熊爪大家都能够想到度娘,更多的属于用户体验。有利于识别当前窗口是在哪个网站。...="favicon.ico" /> 例: 生成ico图标 示意图 ?...使用流程: (1)打开网上的图标库,网址:http://www.iconfont.cn/,搜索需要的图标,或者打开图标库 (2)将需要的图标加入购物车 (3)打开购物车添加至自己的项目(没有的需要自己创建...),点击确定 (4)下载至本地 (5)在html中引入下载好的css文件 (6)在标签中使用(需要两个类名,一个图标类型,一个图标名称) 例: 示意图 ?...将需要的图标加入购物车 示意图 ? 在购物车中将图标添加至项目 示意图 ? 有项目就选择,没有就新建 示意图 ? 下载至本地 示意图 ?
最近改了个UI,按钮放哪都不合适,看到别人都是用悬浮按钮,于是我自己也搞了一个,随心所欲存放位置,的确要比固定的好看的多,下面的是一个截图,代码放在下面自取
CSS p{ width: 200px; background-color: lightblue; } 改变 white-space 的值的效果 微信小程序----CSS 的空格处理
图片 在自己的项目中,我们或多或少的需要插入一些icon,缺少 UI 设计天赋的我只能去搜寻现有的icon了,大家可以去开源图标库中去搜寻自己想要的icon,将所选的icon加入到购物车当中,点击下载代码即可
01 整体的画布设计 微信恐怕是我们最常用的手机软件了,其logo也经历了多次变化,这次我们就用最经典的微信绿色图标来作为例子,给大家展示一下如何用Python来进行设计。其图例如下。 ?...,就是微信的绿色,最后的变量patches用于存放一系列图形,后面会用到。...02 分析微信的logo 接下来我们就分析一下微信logo的组成。...微信logo成图 一些人在这里可能没太看明白这两个箭头是怎么画的,那么我们把其他所有图形去掉,只画两个扇形,效果如下。...微信另一版本logo成图效果 从这个例子中我们可以看到matplotlib在应对简单的图形绘制时还是非常的得心应手,简单的数行代码就完成了一个微信图标的设计。
近日,小编突然发现小伙伴的微信图标不再是万年不变的图标了,而是萌萌的图标! 在小编的追问下,小伙伴就把方法教给小编了,还别说,真的好萌好可爱!...首先我们打开iPhone上的【快捷指令APP】 然后点击右上角【+】进去 新建一个快捷指令,点击【添加操作】 然后搜索【打开APP】 然后点击【选择】进去 选择【微信】 然后点击进去设置 点击【添加到主屏幕...】,进去设置快捷指令的图标和名称,点击完成即可!...完成之后即可在桌面查看可爱的微信图标啦! 不过小编默默的看着这图标,就很别扭,微信图标都找到对象了,而小编还是个单身狗,呜呜呜!...首先打开快捷指令App,点击【自动化-创建个人自动化】进去 选择【App】选取已经自定义图标的微信,然后选择【已打开】,点击下一步。
原文地址:http://eux.baidu.com/blog/fe/控制图标颜色 背景 实际项目中,一般都会遇到不同颜色的图标,例如 ? ?...导航栏图标的不同状态 方法 方法1 需要UI设计师给出不同颜色的图标,在不同状态下设置不同的元素背景。 .icon { background-image: url(....合成雪碧图需要工作量;2.多了个图标,增加雪碧图的体积 方法3 CSS3投影---filter:drop-shadow(color, X-offset, Y-offset) color:投影的颜色 X-offset...我们可以看到在原图标的右侧,出现红色的投影。...注意:图标的增加了个和本身宽度一致的右侧透明边框,让阴影投射在边框上。
直接使用阿里巴巴的网络路径 选择iconfont图标 官网:阿里巴巴矢量字体库 步骤:阿里巴巴字体库使用方法 ?...content: '\e62a';} .icon-shanchu:before{content: '\e629';} .icon-dianhua:before{content: '\e61b';} 使用图标...注意:此处实现采用的是无APPID的开发模式,实际应用应该在微信小程序管理平台的开发设置中配置合法域名。...下载到本地 步骤 字体文件转化成base64格式 解压压缩包 ---- 找到ttf格式文件 ---- 上传到平台转化为base64格式 ---- 下载压缩包 ---- 将css文件名改为wxss --...-- 放入项目文件夹 ---- 用@import全局引入 ---- 使用 使用----引入及全局定义 @import "src/css/icon.wxss"; .iconfont { font-family
本文实例为大家分享了Android仿微信左右滑动点击切换页面和图标的具体代码,供大家参考,具体内容如下 目标效果: ?...使用鼠标滑动屏幕或者点击下边的小图标,可以更改页面和图标,因为没有那么多素材所以只用了两张图片区分。 1.layout文件夹下新建top.xml页面,作为顶部标题。 top.xml页面: <?...android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="<em>微</em><em>信</em>.../ <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="<em>微</em><em>信</em>
改变图标颜色 图标是从微信中提取出来的,都是webp格式的图片。要改变图片颜色可以使用ImageIcon这个组件。...管理图标颜色 因为我是用了自带的底部导航BottomNavigationBar,在pageController的滚动事件中改变图标颜色太麻烦了,所以用了Stream来管理图标的状态。...使用Stream创建一个多订阅的管道,让所有图标都订阅它,然后在滑动事件中把需要的数据都发送给所有图标。...这里就不需要了,但是它的title不允许为null,所以随便给它一个高宽都是0的组件 结语 其实这个效果和微信的不是一模一样,微信的应该是选中图标叠加到默认图标上面。...默认图标颜色线性渐变,选中图标透明度渐变。flutter实现这个用自带的BottomNavigationBar估计不行,可能需要自定义一个底部导航。
<meta content="" name="description"> <meta content="" name="keywords"> <meta cha...
准备工作 阿里巴巴矢量图标库官网 注册登录之后搜寻自己想要图标 在这里我创建一个示例项目 找两个图标加入 (如果项目很小需求比较少 才一两个的话直接选择颜色下载png格式就好了) 我主要是为了减少包体积...而且增添方便 图标颜色控制 加载快(微信小程序上传上限为 2048 kb) 下载至本地 解压然后把iconfont.css改成wxss文件格式放到在小程序项目的utils文件夹 在app.wxss...方法 不推荐 作为前端开发者需要将代码封装分离 提高代码可重复性 以及方便其他人接手 接手过很多小程序项目 把什么都写在一起的真的是无力吐槽 开发难度堪比重做) 准备工作完成 开始 使用方法如图 字体图标还有个好处就是颜色自定
领取专属 10元无门槛券
手把手带您无忧上云