纯css实现炫酷头像效果

简介: 纯css实现炫酷头像效果

分享一个炫酷头像效果:

b站渡一教育的一个视频看到的(不是推广,只是注明出处)

<style>
  img {
    --s: 280px;
    --c1: #c02942;
    --c2: #ecd078;
    --b: 5px;
    --f: 1;
    --bgOption: content-box no-repeat center/ calc(100% / var(--f)) 100%;
    --shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));

    width: var(--s);
    height: var(--s);
    cursor: pointer;
    transition: 0.5s;
    padding-top: 100px;
    outline: var(--b) solid var(--c1);
    outline-offset: var(--shrink);
    border-radius: 0 0 999px 999px;
    transform: scale(var(--f));
    background: radial-gradient(
        circle closest-side,
        var(--c2) calc(99% - var(--b)),
        var(--c1) calc(100% - var(--b)),
        var(--c1) 99%,
        transparent 100%
      )
      var(--bgOption);
    mask: linear-gradient(#000 0 0) no-repeat center calc(0px - var(--shrink)) /
        calc(100% / var(--f) - 2 * var(--b)) 50%,
      radial-gradient(circle closest-side, #000 99%, transparent)
        var(--bgOption);
  }
  img:hover {
    --f: 1.35;
  }
</style>
<div class="avatar">
  <img src="img/head.png" />
</div>

觉得挺有意思,就写着玩了玩儿,可以看我现在头像的样子

相关文章
|
前端开发 测试技术 容器
【CSS】如何给自己头像打造3D动态悬浮效果?(慎入!有点难)
有设想过,当你鼠标移入头像时,展现出从圆圈或洞中探出的那种效果吗?我有类似的想法,但采用了不同的方式并添加了一些动画。我感觉非常实用,并且可以产生简洁的悬停效果,可以在您自己的头像之类的东西上使用。
【CSS】如何给自己头像打造3D动态悬浮效果?(慎入!有点难)
|
6月前
|
前端开发
CSS圆形头像以及发光效果实现
CSS圆形头像以及发光效果实现
|
12月前
|
前端开发
CSS实现头像右上角消息数字提示
CSS实现头像右上角消息数字提示
94 0
|
前端开发
CSS 小技巧 | 一行代码实现头像与国旗的融合
CSS 小技巧 | 一行代码实现头像与国旗的融合
164 0
CSS 小技巧 | 一行代码实现头像与国旗的融合
|
前端开发 算法
CSS实现随机不规则圆角头像
CSS实现随机不规则圆角头像
401 0
CSS实现随机不规则圆角头像
|
Web App开发 前端开发 JavaScript
碉堡了! 纯 CSS 绘制《辛普森一家》人物头像
  这篇文章给大家分享一组纯 CSS 绘制的《辛普森一家》人物头像。《辛普森一家》(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧。该剧通过对霍默、玛琦、巴特、莉萨和玛吉一家五口生活的描绘,用搞笑的方式自我嘲讽了美国的文化、社会、电视以及人类境况的诸多方面。
987 0
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。