Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
}
html {
	height:100%;
}
body {
	height:100%;
	background:#121212;
}
.arrow-wrapper {
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.arrow {
	position:relative;
	width:60px;
	height:60px;
	border-top:10px solid #fff;
	border-left:10px solid #fff;
	transform:rotate(45deg);
	animation:arrow-load 2s infinite;
}
.arrow:nth-child(1) {
	top:25px;
	animation-delay:-0.4s
}
.arrow:nth-child(2) {
	animation-delay:-0.2s
}
.arrow:nth-child(3) {
	bottom:25px;
}
@keyframes arrow-load {
	0% {
	opacity:0;
	transform:rotate(45deg) translate(50px,50px);
}
50% {
	opacity:1;
}
100% {
	opacity:0;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS 制作箭头动画

更新时间:2022-11-04 11:01:08

0