找回密码
 立即注册
搜索
查看: 14182|回复: 0

头像呼吸光环和鼠标悬停旋转CSS代码特效

[复制链接]
  • 打卡等级:暂无等级
  • 打卡总天数:212
  • 打卡月天数:6
  • 打卡总奖励:168
  • 最近打卡:2025-12-06 17:45:04
灌水成绩
14495
49
2035650
主题
帖子
积分

等级头衔

ID : 1

管理员

积分成就 威望 : 999999
贡献 : 9999
下载币 : 11109
在线时间 : 1089 小时
注册时间 : 2013-9-5
最后登录 : 2025-12-6

发表于 2025-11-26 10:49:30 | 显示全部楼层 |阅读模式 IP:广东
免责
免费领取大流量卡,每日更新蔡州手游APP源码密码加入群聊接手游搭建—``下载币--购买服务器☆长期招聘游戏测试员(无偿),有兴趣联系站长QQ58493525微信A0396C
使用方法
通过浏览器的F12审查元素功能,找到自己头像的html元素。添加下面提供的样式类即可。若头像元素的类为avatar,就可以在css中直接添加。类名你也可以也可以自己随意改。

当然了,你也可以写一个div,添加下面的类。本地也可以实现效果。

悬停头像旋转css
  1. /*悬停头像旋转*/
  2. .avatar:hover {
  3.     transform: rotate(666turn);
  4.     transition-delay: 1s;
  5.     transition-property: all;
  6.     transition-duration: 59s;
  7.     transition-timing-function: cubic-bezier(.34,0,.84,1);
  8. }
复制代码

头像呼吸光环css

  1. /*头像呼吸光环*/
  2. .avatar  {
  3.     border-radius: 50%;
  4.     animation: light 4s ease-in-out infinite;
  5.     transition: 0.5s;
  6. }
  7. @keyframes light {
  8.     0%{box-shadow: 0 0 4px #f00;}
  9.     25%{box-shadow: 0 0 16px #0f0;}
  10.     50%{box-shadow: 0 0 4px #00f;}
  11.     75%{box-shadow: 0 0 16px #0f0;}
  12.     100%{box-shadow: 0 0 4px #f00;}
  13. }
复制代码




免责
帖子地址打造全网最多免费游戏网站
今日来客 列表模式
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

本站已运行 ©2013-2026

QQ|Archiver|手机版|小黑屋|蔡州手游 |网站地图

GMT+8, 2025-12-7 05:39

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表