更新第58个小实例
This commit is contained in:
parent
6b7d86998e
commit
58fe9cd5ff
|
@ -61,4 +61,5 @@
|
|||
54. HTML5+CSS3小实例之涟漪特效按钮
|
||||
55. HTML5+CSS3小实例之酷炫的环形加载动画
|
||||
56. HTML5+CSS3小实例之水波纹按钮效果
|
||||
57. HTML5+CSS3小实例之背景动态变化的登录界面
|
||||
57. HTML5+CSS3小实例之背景动态变化的登录界面
|
||||
58. HTML5+CSS3小实例之有趣的心形加载动画
|
|
@ -0,0 +1,98 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.container{
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
top: 40vh;
|
||||
}
|
||||
.loading{
|
||||
/* 执行动画:动画名 时长 贝塞尔曲线 无限次播放 */
|
||||
animation: rotate 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
|
||||
}
|
||||
.loading span{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: #ff8f92;
|
||||
border: 1px solid #ff8f92;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.loading span:nth-child(1){
|
||||
transform: translate(-28px,-28px);
|
||||
/* 执行动画:动画名 时长 贝塞尔曲线 无限次播放 */
|
||||
animation: animate1 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
|
||||
}
|
||||
.loading span:nth-child(2){
|
||||
transform: translate(28px,-28px);
|
||||
/* 执行动画:动画名 时长 贝塞尔曲线 无限次播放 */
|
||||
animation: animate2 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
|
||||
}
|
||||
.loading span:nth-child(3){
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
transform: scale(0.98) rotate(-45deg);
|
||||
/* 执行动画:动画名 时长 贝塞尔曲线 无限次播放 */
|
||||
animation: animate3 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
|
||||
}
|
||||
/* 阴影部分 */
|
||||
.shadow{
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background-color: #d9d9d9;
|
||||
border-radius: 50%;
|
||||
top: 50px;
|
||||
animation: shadow 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
/* 心形 左圆 */
|
||||
@keyframes animate1 {
|
||||
60%{
|
||||
transform: scale(0.4);
|
||||
}
|
||||
}
|
||||
/* 心形 右圆 */
|
||||
@keyframes animate2 {
|
||||
40%{
|
||||
transform: scale(0.4);
|
||||
}
|
||||
}
|
||||
/* 心形 中间部分 */
|
||||
@keyframes animate3 {
|
||||
50%{
|
||||
border-radius: 100%;
|
||||
transform: scale(0.5) rotate(-45deg);
|
||||
}
|
||||
100%{
|
||||
transform: scale(0.98) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
/* 再加个心形整体的旋转动画 */
|
||||
@keyframes rotate {
|
||||
50%{
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
}
|
||||
/* 阴影动画 */
|
||||
@keyframes shadow {
|
||||
50%{
|
||||
background-color: #f2f2f2;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>有趣的心形加载动画</title>
|
||||
<link rel="stylesheet" href="../css/58.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="loading">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="shadow"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue