HTML实现圆形头像效果

【D3.js】力导向布局 + 圆形图片展示的人物关系 前言使用d3的力学图(力导向图)与生活中常见的人物关系图结合,已经有了很好的例子: 【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图,博主实现了下面这种样式,已经相当不错了。但是对于想把节点的方形图片换成圆形头像,网上的资料却很少,本例子就在上面的实例的基础上实现圆形头像,让人物关系图看起来更漂亮了一个档次。两个主要文件如下:# index.html<html> <head> 阅读详情

展示圆形的图片是很多常见需求之一,因为有Android开发经验,难免会从Android开发角度去考虑问题,Android中实现一张图片的圆形效果一般通过自定义view的clip处理,而HTML却很简单。虽然简单,但还是遇到一点坑,比如圆形化处理的图片并没有裁剪中间部分,而是默认左上角,毕竟昨天还在开心的写着Android,今天就开始摸索前端的东西,这种心情大家能理解吗[悲剧··]。

好了,废话不多说,来看看怎么实现的:

  • css代码:

    .round_icon{
      width: 34px;
      height: 34px;
      display: flex;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
  • Html:

    <img src="../../source/images/what_ever.jpg" class="round_icon"  alt="">

对,你没有看错,就是这么简单。由于现在前端是边看边做,所以实现方式可能比较幼稚或者浅显,欢迎大家指导一下更加适合的实现方式。

html代码img圆形头像.zip img修改为圆形头像,简单便捷,反正就是 立即下载

相关推荐

PointNet/PointNet++模型调参实战:如何用PyTorch让你的点云分割精度再涨5个点?

本文深入探讨了PointNet/PointNet++模型在点云分割中的调参技巧,通过PyTorch实现精度提升5个点的实战方法。重点分析了点云密度自适应策略、感受野与细节保留的平衡,以及训练加速与稳定性技巧,适用于电力巡检、自动驾驶等场景的激光点云数据处理。

weixin_30836759的博客 477

超级简单的HTML圆形头像css

效果 CSS .yuanxing{ width:96px; height:96px; margin: 5px 5px 5px 0; position: absolute; border-radius: 50px; } HTML <img class="touxiang" src="图片地址" alt="用户头像"></td>

smx6666668的博客 2992

【数据集】MODIS 的 MOD07 大气廓线产品概述及下载

MODIS 的 MOD07 大气廓线产品概述及下载

WW、forever的博客 550

html头像特效,【前端装逼】超酷的人物头像特效代码赏析

html {width: 100%;height: 100%;}body {width: 100%;height: 100%;overflow: hidden;background: -webkit-linear-gradient(-45deg, #800024, #ea3c71); /* For Safari 5.1 to 6.0 */background: -o-linear-gradient...

weixin_31567239的博客 1810

大模型对齐的核心引擎:RLHF三阶段完整技术体系详解——从InstructGPT到ChatGPT与Claude 4.6的工程实践

RLHF从InstructGPT起步,经由ChatGPT、Claude系列的工程实践,已演变为现代大语言模型不可或缺的对齐基础设施。其三阶段流程——SFT构建基础能力基线,奖励模型将人类偏好编码为可微信号,PPO以KL约束驱动策略向偏好分布优化——构成了当代对齐技术的核心骨架。OpenAI的路线侧重于以海量人工标注和多目标奖励建模持续精细化RLHF流程,在规模与工程深度上持续推进;

nmdbbzcl的博客 1065

使用linuxdeployqt打包Qt程序问题及解决方法

安装过程中提示缺少依赖multiarch-support: 下载对应依赖包。安装过程中提示缺少libpq.so.5: 下载对应依赖包。下载libmysqlclient18/5.6.25。

weixin_74239923的博客 1059

个人中心html更换头像,html5 头像上传更换插件

插件描述:html5 头像上传、更换、剪切插件利用bootstrap样式排版已经点击功能,进行弹窗更换头像。modal的div中有form表单提交地址以下方法由网友杜威提供遇到的几个情况希望能帮助到大家,后台情况 ,1,后台先接受到form提交过来的图片,并返回json,他的sitelogo.js有ajax操作,要求返回json格式,并且有$arr=array('result'=>路径...

weixin_42514432的博客 839

SVN使用:使用TortoiseSVN遇到提示请执行“清理”命令的解决方法

作为程序员来说,在团队开发过程中关于代码管理的工具使用并不陌生,比较常用的代码合并管理工具如:Git、SVN等,虽然相关工具的使用并不复杂,但是还是要掌握常用的使用方法,尤其是相关的第三方软件的使用也是极为重要的,而且有时候使用这些三方软件来进行代码管理的时候也会遇到一些问题。本篇博文就来分享一下在SVN使用的时候使用TortoiseSVN遇到提示请执行“清理”命令的解决方法,方便查阅使用。

全沾软贱开发攻城狮 1万+

html绘制头像原样教程,CSS实例教程:创意CSS3头像展示教程

今天就为大家分享一个非常有创意的CSS3头像展示效果,交互性强,是一个基于css3和js来实现的,代码量不多,但是最终的效果却很让人赞叹,所以特别推荐给大家。其中关于本示例的一些css样式呈现,个人认为还有很大的发挥空间,例如鼠标经过的时候而不是切换成一个背景色和文字,而是替换成其他的相关图片(例如改为人物的其他表情),这将会是非常的有意思的。好了,接下来我们一起看看其效果的制作方法。HTML代码...

weixin_33167456的博客 482

【K8S系列】Kubernetes 中 Service 的流量不均匀问题【已解决】

在 Kubernetes 中,Service 是一种抽象,用于定义一组 Pod 的访问策略。当某些 Pod 接收的流量过多,而其他 Pod 的流量较少时,可能会导致负载不均衡。这种情况不仅影响性能,还可能导致某些 Pod 过载,影响应用的可用性。本文将详细分析此问题的原因及其解决方案。

颜淡慕潇 8740

若依开源系统多数据源整合clickhouse数据库详细步骤

若依开源系统多数据源整合clickhouse数据库详细步骤

java之书-资源 897

html+css制作属于自己的头像和简介

先放效果图 (1)图片为圆形,后加阴影,左右居中。 (2)文字带有阴影,有不同的颜色,背景与文字的颜色不同。 (3)图片是用链接的形式。 接下来是代码: 刚开始的时候用的都是基础的,简单易懂。 中间一定要用link连接, 图片的具体位置一定要写清楚, ...

weixin_54218799的博客 1400

提示词编程在自动化内容审核中的应用

文章标题 提示词编程在自动化内容审核中的应用 关键词:提示词编程,自动化内容审核,人工智能,算法原理,系统架构设计,项目实战 摘要 本文旨在探讨提示词

AI天才研究院 1252

html5圆形头像滚动效果,基于jQuery实现响应式圆形图片轮播特效

本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码。分享给大家供大家参考。具体如下:运行效果截图如下:mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,mislider轮播图插件的特点有:使用简单在同一个屏幕中支持多个轮播图轮播图的内容可以是单张图片或复杂的HTML内容轻量级响应式设计非常容易定制丰富的回调函数跨浏览器,支持IE8+浏览器引入核心文件mislid...

weixin_42112685的博客 787

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

html圆形头像简易实现

html圆形头像简易实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原型头像样式实现</title> </head> <body> <div class="main"> <div class="myImageDiv"> <d

LavaStrom 2480

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

Canvas绘制圆形头像

实现代码 <canvas id="canvas" width="500" height="500"></canvas> <script> let Canvas = document.querySelector('#canvas'); let ctx = Canvas.getContext("2d"); // 绘制画布背景 ctx.fillStyle.

彭世瑜的博客 3944

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

Html设计小技巧之带头像框的圆形头像

Html设计小技巧之带头像框的圆形头像

weixin_66448747的博客 1660

css 实现头像周围光圈动态效果

效果: html文件: <img class="userHead" src="xx/user.jpg"> css文件: .userHead{ width:.3rem; height:.3rem; border-radius:50%; -webkit-animation: ani 2s linear ...

Macdull2014的博客 1558

圆形头像叠加样式-本地图片

div部分 <div class="avatar-list-stacked"> <span class="avatar" ><van-image :src="require('../../assets/图层 1.png')" round width="30px" height="30px"/></span> <span class="avatar" ><van-

Havanao的博客 827

CSS 实现文字头像(圆角头像文字内容)

先上效果图。 关键css: .avatar-container { height: 1.5rem; width: 1.5rem; display: inline-block; background: #aaaaaa; text-align: center; border-radius: 0.75rem; } .avatar-content { ...

Bottle's Blog 5万+

html实现圆形图片

在学习前端的过程中,我发现了一个很有趣的例子,对图像以圆形显示,div和a属性却又不一样的效果和操作。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圆形头像实现</title> <!-- ...

u014387696的博客 9436

android 动态设置margin_教你五分钟制作一个动态头像,超简单

头像,是现在网站或者应用中不可缺少的一个重要的组成部分了。你是否很羡慕别人在网站或应用中的那个动态效果的头像呢?现在不用再羡慕了,大叔教你五分钟做出动态头像效果。废话不多说,先上效果图:动态头像效果图使用技术与步骤分解想要实现上面的效果,我们需要使用 CSS3 中新增的 transform 属性和 transition 属性。实现的步骤基本上是这样的:制作静态的 HTML 结构对 HTML 结构设...

weixin_30010773的博客 656

使用CSS实现圆形头像的设计

 1.在jsp或者html的body标签中定义:    " /> 2.定义样式     .imgtest{overflow:hidden;}     .list_ul figcaption p{font-size:0px;color:#aaa;}     .imgtest figure div{display:inline-block;widt

智玲君 2359

canvas绘制白色描边圆形头像(CV必备)

【代码】canvas绘制白色描边圆形头像(CV必备)

weixin_49602763的博客 773

java制作一个简单的画板_教你五分钟制作一个动态头像,超简单

头像,是现在网站或者应用中不可缺少的一个重要的组成部分了。你是否很羡慕别人在网站或应用中的那个动态效果的头像呢?现在不用再羡慕了,大叔教你五分钟做出动态头像效果。废话不多说,先上效果图:动态头像效果图使用技术与步骤分解想要实现上面的效果,我们需要使用 CSS3 中新增的 transform 属性和 transition 属性。实现的步骤基本上是这样的:制作静态的 HTML 结构对 HTML 结构设...

weixin_39658759的博客 304

8、css3实现头像裁剪效果

【代码】8、css3实现头像裁剪效果。

cyz141001的博客 266
上一篇: Css之选择器使用
下一篇: Android开发一款好看的加载控件
水月沐风
博客等级 码龄10年 186粉丝 95原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值