hbuilder---制作加载环和加载小火箭动画

新建html文件，在body中添加两个div标签（一个为加载环，一个嵌套添加图片），新建css文件，给html文件添加link链接；

在css文件中制作加载环：

先建立一个正方形边框，border-radius:50%;将四个角变为圆角，50%的效果是圆；

border-bottom:粗细  线型  颜色；（三个属性值顺序不定）

添加animation动画，详解见代码

如何改变小火箭的尺寸，如何垂直居中对齐：

先给photo设置一定大小的边框；垂直居中：margin:0 auto;

把图片（也就是img），先转换为块级元素：display:block;

再将其放入photo边框：width:100%;

给图片添加鼠标划动效果用hover:详解见代码。

*{padding: 0;margin: 0;
}
#loading{width: 150px;height: 150px;border: 2px solid red;margin: 50px auto;border-radius: 50% ;border-bottom: 2px solid #00FFFF;/* 动画属性 *//* animation: 动画帧的名字 动画的执行时间 动画执行的次数(infinite无限) 动画执行的速度曲线(linear匀速); */animation: shiyan 1s infinite linear;}
@keyframes shiyan{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
}
#photo{width: 200px;height: 200px;/* border: 2px solid red; */margin: 0 auto;
}
#photo img{display: block;width: 100%;transition: all 1s;
}/* #photo img:hover{注:鼠标划动效果加给谁,过渡加给谁注意:不能分开写,否则上面的效果会被覆盖transform: translateY(-235px) scale(0.6,0.6) rotate(180deg);} */#photo img:hover{transform: translateY(-235px)  scale(0.6,0.6) rotate(180deg);
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！