<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
width: 100%;
height: 1000px;
background:url(images/MM_home_button_atlas_1.png?1610424642325) left top no-repeat ;
}
.round{
width: 100px;
height: 100px;
border-radius: 50%;
background: #ffffff;
margin:566px 0 0 773px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.round img{
padding: 0 0 0 13px;
}
.round::before{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
background: #ffffff;
border-radius: 50%;
z-index: -1;
animation: myRound 2s infinite cubic-bezier(0.3,-0.3,1,1) ;
}
@keyframes myRound{
0% {transform: scale(1); opacity: 0.5;}
70% {transform: scale(1); opacity: 0.5;}
100% {transform: scale(1.8); opacity: 0.1;}
}
</style>
<body>
<div class="round">
<img src="images/003.png" alt="">
</div>
</body>
</html>效果图如下
扫一扫
5865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
