效果

难点

难题只有一个, 那就是如何把 blue tick image 定位当 avatar 的右下角.

HTML

<div class="avatar-wrapper">
<img class="avatar" src="../images/avatar.jpg" width="1" height="1" />
<img class="blue-tick" src="../images/blue-tick.png" width="1" height="1" />
</div>

首先是 2 张图, 一张是 avatar, 一张是 blue tick

要搞定位, 那么就需要一个 offset parent 咯. 所以需要一个 wrapper.

效果

假设图片的 size 是 avatar 256px, blue tick 48px

居中定位

先来个居中

.avatar-wrapper {
.avatar {
width: 256px;
border-radius: 50%;
}
position: relative;
.blue-tick {
position: absolute;
width: 48px;
border-radius: 50%; left: 50%;
top: 50%;
translate: -50% -50%;
}
}

注: 我这里用了 translate property, 它是 individual transform properties

效果

Transform 偏移

接下来就是关键操作了.

transform: rotate(45deg) translateX(calc(256px / 2)) rotate(-45deg);

首先做一个 rotate, 调整前行的方向

然后用 translateX 让它前行, 前行的距离是 avatar width 的一半 (半径 radius)

最后在用 rotate 转正

完成!

CSS & JS Effect – Blue Tick Avatar的更多相关文章

  1. 【必备】史上最全的浏览器 CSS & JS Hack 手册

    [必备]史上最全的浏览器 CSS & JS Hack 手册   浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技 ...

  2. 使用html+css+js实现弹球游戏

    使用html+css+js实现弹球游戏 效果图: 代码如下,复制即可使用: <!doctype html> <head> <style type="text/c ...

  3. JavaWeb(HTML +css+js+Servlet....)

    注意 1.不要把函数命名为add(),不然容易和自带的冲突报错 2.是createElement 不要把create中的e写掉了 3.记得是getElementsByTaxName和getElemen ...

  4. 解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  5. 前端小白页面开发注意事项及小工具(html\css\js)

    技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...

  6. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  7. 【转】Maven Jetty 插件的问题(css/js等目录死锁)的解决

    Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决:   1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...

  8. Css Js Loader For Zencart

    Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...

  9. 购物车数字加减按钮HTML+CSS+JS(有需要嫌麻烦的小伙伴拿走不谢)

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

  10. vs合并压缩css,js插件——Bundler & Minifier

    之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...

随机推荐

  1. [oeasy]python0083_十进制数如何存入计算机_八卦纪事_BCD编码_Binary_Coded_Decimal

    编码进化 回忆上次内容 上次 研究了 视频终端的 演化 从VT05 到 VT100 从 黑底绿字 到 RGB 24位真彩色 形成了 VT100选项 从而 将颜色 数字化 了 生活中我们更常用 10个数 ...

  2. DASCTF 2023 & 0X401七月暑期挑战赛【PWN】(FileEditor篇)

    DASCTF 2023 & 0X401七月暑期挑战赛[PWN](FileEditor篇) 题目保护情况(保护全家桶) 64位ida逆向 模拟了一个类似vim的功能,有打开文件,打印内容,插入行 ...

  3. springboot集成minIO

    文件系统:负责管理和存储文件的系统软件.操作系统通过文件系统提供的接口去存取文件,用户通过操作系统访问磁盘上的文件 minIO:轻量级服务分布式文件系统,适合存储非机构化数据.采用去中心化共享架构,结 ...

  4. el-date-picker 时间日期格式,选择范围限制

    背景:ElementUI的 el-date-picker 使用时,有时候想要限制用户选择的时间范围,但是用的是datetimerange类型的选择器,不想单独写两个起始的选择器.我发现网上的方案大部分 ...

  5. app专项测试:app弱网测试(测试工具)

    app专项测试:app弱网测试(测试工具) 除了常用的 fiddler,charles 可以模拟弱网,还有硬件工具弱网仪 HoloWAN也可以模拟弱网 使用弱网仪有以下优点:1.即插即用,无需调试和复 ...

  6. 14、SpringMVC之注解配置

    14.1.概述 在实际工作中,一般使用配置类和注解代替web.xml和SpringMVC配置文件的功能: 在 Servlet3.0 环境中,容器会在类路径中查找实现了 javax.servlet.Se ...

  7. pytorch 第三方模块 GraphNAS 安装成功记录

    实验室的小师妹要安装pytorch的第三方模块,经过多方努力没有安装上,后来我接手后也是感觉头疼. 该模块地址:   https://github.com/GraphNAS/GraphNAS 该模块主 ...

  8. ImageNet数据集下载

    ImageNet数据集是Vision领域最重要的数据集之一,十分经典也十分常用,但是该数据集体量较大,而且由于在外网下载速度较慢,其中最为重要的一点是该数据集只提供给高校科研工作者,这也就意味着你必须 ...

  9. 拈花云科基于 Apache DolphinScheduler 在文旅业态下的实践

    作者|云科NearFar X Lab团队 左益.周志银.洪守伟.陈超.武超 一.导读 无锡拈花云科技服务有限公司(以下简称:拈花云科)是由拈花湾文旅和北京滴普科技共同孵化的文旅目的地数智化服务商.20 ...

  10. SeaTunnel 发布成为 Apache 顶级项目后首个版本 2.3.2,进一步提高 Zeta 引擎稳定性和易用性

    近日,Apache SeaTunnel 正式发布 2.3.2 版本.此时距离上一版本 2.3.1 发布已有两个多月,期间我们收集并根据用户和开发者的反馈,在 2.3.2 版本中对 SeaTunnel ...