效果:

html文件:

<img class="userHead" src="xx/user.jpg">    

css文件:

.userHead{
width:.3rem;
height:.3rem;
border-radius:50%;
-webkit-animation: ani 2s linear infinite;
} @keyframes ani {
0%{
box-shadow: 0 0 0px #ff8329
}
25%{
box-shadow: 0 0 10px #ff8329
}
50%{
box-shadow: 0 0 20px #ff8329
}
75%{
box-shadow: 0 0 10px #ff8329
}
100%{
box-shadow: 0 0 0px #ff8329
}
}

css 实现头像周围光圈动态效果的更多相关文章

  1. css 设置头像图片不变形

    css 设置头像图片不变形 在样式中加 object-fit: cover 就可以了

  2. css 圆形头像

    方法一:背景图片(推荐) 好处是,图片长宽不等的情况下图片不会变形 .ui-photo { width: 100px; height: 100px; background: url("img ...

  3. css+html 实现 光晕 光圈

    <style> html { height: 100%;}body { height: 100%; background-color: #000; margin: 0; padding: ...

  4. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

  5. CSS 2D 转换

    通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据 ...

  6. HTML常见元素集锦

    在讲解本次课程前:我们先来看下什么是浏览器: 所谓浏览器就是可以解释和执行HTML代码的工具.还有一个概念我们需要搞清楚,浏览器!=IE,IE只是浏览器当中的一种.除了IE还有N多浏览器,google ...

  7. .NET技能分析

    知乎话题:如何面试.NET/ASP.NET工程师? No.1初级:1.对 C#(推荐) 或 VB 语言直至与 .NET 4 (目前为止)相匹配的版本,绝大多数特性熟悉并使用过2.通晓 HTTP 协议的 ...

  8. Bootstrap学习笔记(一)

    用Laravel编写了一段时间程序,选择了bootstrap作为前段框架,现在已经有一段时间了,抽空总结一下:     bootstrap是一个前端框架,所谓框架就是为满足特定需要在特定环境下提供的一 ...

  9. Vue.js 相关知识(动画)

    1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...

随机推荐

  1. windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问

    windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问: 解决方法: 首先重命名系统盘 windows目录下的代号为“SoftwareDistribu ...

  2. Ubuntu16.04下安装Visual Studio Code

    sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make sudo apt-get update sudo apt-get install ubun ...

  3. bootstrap 幻灯片(轮播)

    <!DOCTYPE html><html><head>    <meta charset="utf-8">     <titl ...

  4. virtualbox manager命令小记

    virtualbox 控制虚拟机 VBoxManage list runningvms 列出运行的虚拟机 (返回名称和UUID): VBoxManage list runningvms Stop ru ...

  5. 分享一些PPT模板

     链接:https://pan.baidu.com/s/1ADlYzx7sWR2z0ltVt8kIAQ 提取码:tyzv  

  6. selenium python bindings 写测试用例

    这章总结selenium在UI测试方面的用法 import unittest from selenium import webdriver from selenium.webdriver.common ...

  7. System.Byte.cs

    ylbtech-System.Byte.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934 ...

  8. jq 图片上传前预览

    html: <div class="form_upload"> <input type="file" id="uploadImg&q ...

  9. 对this的理解与总结

    this既不指向函数自身,也不指向函数的词法作用域!它指向谁完全取决于它在哪里被调用,被谁调用! 绑定规则 总体来说,this的绑定规则有: 默认绑定(严格模式/非严格模式) 隐式绑定 显式绑定 ne ...

  10. asp.net去除HTML标签

    public string NoHTML(string Htmlstring) //替换HTML标记 { //删除脚本 Htmlstring = Regex.Replace(Htmlstring, @ ...