css 实现头像周围光圈动态效果
效果:
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 实现头像周围光圈动态效果的更多相关文章
- css 设置头像图片不变形
css 设置头像图片不变形 在样式中加 object-fit: cover 就可以了
- css 圆形头像
方法一:背景图片(推荐) 好处是,图片长宽不等的情况下图片不会变形 .ui-photo { width: 100px; height: 100px; background: url("img ...
- css+html 实现 光晕 光圈
<style> html { height: 100%;}body { height: 100%; background-color: #000; margin: 0; padding: ...
- CSS--使用Animate.css制作动画效果
一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
- CSS 2D 转换
通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据 ...
- HTML常见元素集锦
在讲解本次课程前:我们先来看下什么是浏览器: 所谓浏览器就是可以解释和执行HTML代码的工具.还有一个概念我们需要搞清楚,浏览器!=IE,IE只是浏览器当中的一种.除了IE还有N多浏览器,google ...
- .NET技能分析
知乎话题:如何面试.NET/ASP.NET工程师? No.1初级:1.对 C#(推荐) 或 VB 语言直至与 .NET 4 (目前为止)相匹配的版本,绝大多数特性熟悉并使用过2.通晓 HTTP 协议的 ...
- Bootstrap学习笔记(一)
用Laravel编写了一段时间程序,选择了bootstrap作为前段框架,现在已经有一段时间了,抽空总结一下: bootstrap是一个前端框架,所谓框架就是为满足特定需要在特定环境下提供的一 ...
- Vue.js 相关知识(动画)
1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...
随机推荐
- windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问
windows 10 无法启动 windows update 服务 错误 0x80070005 拒绝访问: 解决方法: 首先重命名系统盘 windows目录下的代号为“SoftwareDistribu ...
- Ubuntu16.04下安装Visual Studio Code
sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make sudo apt-get update sudo apt-get install ubun ...
- bootstrap 幻灯片(轮播)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <titl ...
- virtualbox manager命令小记
virtualbox 控制虚拟机 VBoxManage list runningvms 列出运行的虚拟机 (返回名称和UUID): VBoxManage list runningvms Stop ru ...
- 分享一些PPT模板
链接:https://pan.baidu.com/s/1ADlYzx7sWR2z0ltVt8kIAQ 提取码:tyzv
- selenium python bindings 写测试用例
这章总结selenium在UI测试方面的用法 import unittest from selenium import webdriver from selenium.webdriver.common ...
- System.Byte.cs
ylbtech-System.Byte.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934 ...
- jq 图片上传前预览
html: <div class="form_upload"> <input type="file" id="uploadImg&q ...
- 对this的理解与总结
this既不指向函数自身,也不指向函数的词法作用域!它指向谁完全取决于它在哪里被调用,被谁调用! 绑定规则 总体来说,this的绑定规则有: 默认绑定(严格模式/非严格模式) 隐式绑定 显式绑定 ne ...
- asp.net去除HTML标签
public string NoHTML(string Htmlstring) //替换HTML标记 { //删除脚本 Htmlstring = Regex.Replace(Htmlstring, @ ...