利用纯CSS实现头像旋转和发光的效果

  发布时间:2016-09-05 17:47:50   作者:佚名   我要评论
这篇文章给大家介绍了如何利用纯CSS实现头像旋转和发光的效果,实现后的效果很赞,有需要的朋友们可以参考借鉴。

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

效果图:

实例代码:

复制代码
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>脚本之家-利用纯CSS实现头像旋转和发光的效果</title>
</head>
<style>
/********************************
设计思路如下:
头像显示最近一个联系人,慢旋转效果。
有新消息,头像增加闪耀效果并发光。
(spin旋转、sparkle闪耀发光)
实现:
用纯css实现。
******************************/
.chatPanel-toMin{
position:absolute;
right:0;
top:100px;
width:65px;
height:60px;
border-radius:50% 0 0 50%;
background:#fff;
}
.user-avatar{
position:absolute;
right:0;
top:7px;
right:8px;
width:45px;
height:45px;
border-radius:50%;
border:1px solid #ddd;
}
.user-avatar img{
width:100%;
height:100%;
border-radius:50%;
}</p> <p> /*spin旋转*/
.spin {
-webkit-animation:spin 5s infinite linear;
animation:spin 5s infinite linear
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}</p> <p> /*sparkle 闪耀*/
.sparkle {
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;</p> <p> -webkit-animation: sparkle linear 2s 1.5s infinite;
-moz-animation: sparkle linear 2s 1.5s infinite;
animation: sparkle linear 2s 1.5s infinite;
}</p> <p> @-webkit-keyframes sparkle {
0% {
box-shadow: 0 0 0px 0 #b2ff1a;
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {box-shadow: 0 0 20px 0 #1affff;}
100% {
box-shadow: 0 0 0px 0 #b2ff1a;
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
@-moz-keyframes sparkle {
0% {
box-shadow: 0 0 0px 0 #b2ff1a;
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {box-shadow: 0 0 20px 0 #1affff;}
100% {
box-shadow: 0 0 0px 0 #b2ff1a;
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
@-o-keyframes sparkle {
0% {
box-shadow: 0 0 0px 0 #b2ff1a;
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {box-shadow: 0 0 20px 0 #1affff;}
100% {
box-shadow: 0 0 0px 0 #b2ff1a;
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
@keyframes sparkle {
0% {
box-shadow: 0 0 0px 0 #b2ff1a;
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {box-shadow: 0 0 20px 0 #1affff;}
100% {
box-shadow: 0 0 0px 0 #b2ff1a;
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
/********************************
设计思路如下:
头像显示最近一个联系人,慢旋转效果。
有新消息,头像增加闪耀效果并发光。
(spin旋转、sparkle闪耀发光)
实现:
用纯css实现。
******************************/
</style></p> <p><body></p> <p> <div style="width:400px; height:600px; margin:0 auto; border:1px solid #666; position:relative; background:#666;">

<div class="chatPanel-toMin">
<div class="user-avatar">
<img class="sparkle spin" src="<a href="http://cdn.attach.w3cfuns.com/notes/pics/201609/05/105524viwldxgi3lg387jl.jpg">http://cdn.attach.w3cfuns.com/notes/pics/201609/05/105524viwldxgi3lg387jl.jpg</a>" alt="">
</div>
</div>

</div></p> <p></body>
</html>

以上就是这篇文章的全部内容,希望对大家的学习和工作能有所帮助,如果有问题大家可以留言交流。

蓄力AI

相关文章

  • css3实例教程 一款纯css3实现的发光屏幕旋转特效

    今天给大家带来一款纯css3实现的发光屏幕旋转特效。该屏幕由纯css3实现带发光旋转特效,有具体的代码,感兴趣的朋友可以参考下
    2014-12-07
  • CSS3实现圆形图片鼠标悬停图片旋转放大特效源码

    CSS3实现圆形图片鼠标悬停图片旋转放大特效源码是一款采用CSS3结合图片实现的鼠标悬停到图标上面旋转放大展示效果。本段代码适应于所有网页使用,有需要的朋友可以直接下载
    2016-08-30
  • CSS3仿对啊网蓝色圆形大风车旋转特效源码

    CSS3仿对啊网蓝色圆形大风车旋转特效源码是一款仿对啊网的CSS3大风车旋转动画效果下载。本段代码适应于所有网页使用,有需要的朋友可以直接下载使用
    2016-08-29
  • 关于css旋转动画效果的简单实现

    下面小编就为大家带来一篇关于css旋转动画效果的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-19
  • JS+CSS3实现鼠标可拖动的交互式立方体旋转特效源码

    是一段实现了立方体图块可根据鼠标的拖动方向进行旋转的交互式效果代码,纯原生支持鼠标拖动展示,本段代码适应于所有网页使用,有兴趣的朋友们可以前来下载使用
    2016-08-18
  • 纯css3实现的3D图片立方体旋转动画特效源码

    这是一款使用纯css3实现的3D图片立方体旋转动画特效源码。外层图片构成大立方体包裹内层的小图片立方体同步旋转,鼠标滑过立方体可呈现出外层立方体炸开的效果。该动画特效
    2016-07-21
  • 纯CSS3实现鼠标滑过圆形图片旋转翻盖动画特效源码

    纯CSS3实现鼠标滑过圆形图片旋转翻盖动画特效源码是一款效果非常炫酷的纯CSS3圆形图片鼠标滑过旋转翻盖特效,本段代码适应于所有网页使用,有需要的朋友可以直接下载使用
    2016-07-06
  • 纯CSS3实现的发光登录表单特效源码

    今天介绍的这款CSS3表单不但外观华丽,而且伴有颜色发光动画。当鼠标激活表单时,表单周围就会出现颜色渐变的发光动画,配合黑色的背景,整个CSS3表单显得格外亮丽。更重要
    2014-10-21
  • CSS3实现的按钮发光动画特效源码

    这是一款基于纯CSS3实现的发光按钮特效,多种色彩的按钮排列在网页上,伴随着闪闪发光的效果,CSS3的强大肯定会让你叹为观止。该CSS3按钮发光动画主要是利用了webkit的动画
    2014-10-21
  • 纯CSS3实现发光开关切换按钮效果源码

    今天我们要来分享一款类似的纯CSS3发光开关切换按钮,它的外观就像一个电灯的开关,可以左右切换
    2014-10-18

最新评论