H5W3
当前位置:H5W3 > CSS3 > 正文

CSS3案例——用户头像旋转动画

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="innoRender.css">
</head>
<body>
<!-- 旋转动画头像 -->
<!-- .ir-avatar-bg{
background: url('xxx.jpg');
} -->
<!-- 小头像 -->
<div class="ir-avatar-wrapper-s">
<div class="ir-avatar-bg"></div>
<h1 class="ir-avatar-title-s">用户名</h1>
</div>
<!-- 中头像 -->
<div class="ir-avatar-wrapper">
<div class="ir-avatar-bg"></div>
<h1 class="ir-avatar-title">用户名</h1>
</div>
<!-- 大头像 -->
<div class="ir-avatar-wrapper-l">
<div class="ir-avatar-bg"></div>
<h1 class="ir-avatar-title-l">用户名</h1>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
/*用户头像*/
[class^="ir-avatar-wrapper"]{
position: relative;
border-radius: 50%;
cursor: pointer;
}
[class^="ir-avatar-wrapper"]:hover .ir-avatar-bg{
transform: scale(0,0) rotate(360deg);
}
[class^="ir-avatar-wrapper"]:hover [class^="ir-avatar-title"]{
transform: scale(1,1) rotate(360deg);
}
.ir-avatar-wrapper{
height: 180px;
width: 180px;
}
.ir-avatar-wrapper-l{
height: 300px;
width: 300px;
}
.ir-avatar-wrapper-s{
height: 100px;
width: 100px;
}
.ir-avatar-bg{
position: absolute;
height: 100%;
width: 100%;
background: url('innoRender-avatar.jpg');
background-size: 100% 100%;
background-origin: border-box;
background-position: center;
background-repeat: no-repeat;
box-sizing: border-box;
border:10px solid rgba(255,255,255,0.5);
border-radius: 50%;
z-index: 1;
transition: .5s ease-in;
}
[class^="ir-avatar-title"]{
position: absolute;
height: 100%;
width: 100%;
color: #fff;
background-color: #778899;
text-align: center;
border-radius: 50%;
transition: .5s ease-out;
transform: scale(0,0) rotate(0deg);
opacity: .8;
}
.ir-avatar-title{
line-height: 180px;
font-size: 30px;
}
.ir-avatar-title-l{
line-height: 300px;
font-size: 45px;
}
.ir-avatar-title-s{
line-height: 100px;
font-size: 18px;
}

CSS3案例——用户头像旋转动画
–>
CSS3案例——用户头像旋转动画
–>
CSS3案例——用户头像旋转动画

知识点

  1. transform: scale(0,0) rotate(0deg) –> transform: scale(1,1) rotate(360deg)
  2. background-origin: border-box
  3. transition: .5s linear/ease/ease-in/ease/out/ease-in-out; (线性过渡/平滑/慢->快/快->慢/慢->快->慢

未经允许不得转载:H5W3 » CSS3案例——用户头像旋转动画

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址