CSS实现一个简单的头像动画

在实际开发中，很多时候我们要引用avatar，在一些特定的场景下，我通常会给我的头像添加一些动画效果来增加交互体验。

transform标签

在CSS中transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

效果如下

使用场景： 个人主页、评论人头像、等……

代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>头像动画</title><style>img {margin: 10px 10px;width: 150px;border-radius: 50%;border: 5px solid #ffffff;transition: all 0.6s;}img:hover {transform: rotate(360deg);border: 5px solid #2d6a88;}</style>
</head>
<body><!-- 这里我调用了腾讯QQ头像的API --><img src="https://q2.qlogo.cn/headimg_dl?dst_uin=298170648&spec=100" alt="LOGO">
</body>
</html>

可以添加一些其他样式，让它变得更好看，或者发挥你的想象让它更丰富多彩。

首发地址：https://blog.byboy.cn/32.html

CSS实现一个简单的头像动画相关推荐

使用CSS画一个简单的立方体
用CSS实现一个简单的立方体: 可以使用弹性盒子模型,先对父级div进行立体化(3D)操作,然后对多个子div进行操作(翻转,平移等),还可以给父级div加上CSS动画,使整体更加酷炫. 大体效果如图 ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
制作一个简单的canvas动画
制作一个简单的canvas动画作者:旺仔一上来先话不多说上代码,代码能看的懂得,ok,就当我下面所有的内容为废话,代码看的不太懂的,没关系我会一点一点让你懂,不过前提是你有一定的html+css+ ...
用计算机制作动画,如何使用制作工具制作一个简单的Flash动画-电脑自学网
怎么制作Flash动画?通过Adobe Flash我们可以制作出非常有趣好看的动画,也可以制作一键简单的小动画,下面给大家介绍如何使用制作工具制作一个简单的Flash动画. 操作方法: 1.打开fla ...
制作一个简单的倒计时动画
今天我使用Android Studio制作了一个简单的倒计时动画,算是练习一下属性动画的使用吧,先看一个效果吧,点击播放倒计时动画按钮后可以播放倒计时动画实现方式: 第一步:使用Android St ...
基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
html+css+小图标,HTML+CSS入门一个简单实用的CSS loading图标
本篇教程介绍了HTML+CSS入门一个简单实用的CSS loading图标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 在web开发中,为了提高用户体验,在加载数据的时 ...
【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
[css] 使用css写一个红绿灯交替的动画效果
[css] 使用css写一个红绿灯交替的动画效果 <!DOCTYPE html> <html lang="en"><head> <meta ...

CSS实现一个简单的头像动画

transform标签

效果如下

代码如下

首发地址：https://blog.byboy.cn/32.html

CSS实现一个简单的头像动画相关推荐

最新文章

热门文章