纯css实现旋转的金币效果

代码语言:html

所属分类:动画

代码描述:纯css实现旋转的金币效果

代码标签: 旋转 金币 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  align-items: center;
  background-image: linear-gradient(#09f, #fff calc(50vh + 15vmin), #900);
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0;
}

.disk {
  animation: spin 1s infinite linear;
  background-color: #fc0;
  border-left: solid 0 #eb0;
  border-radius: 50%;
  border-right: solid 0 #eb0;
  height: 50vmin;
  position: relative;
  width: 50vmin;
}
.disk:before {
  border: dotted 1vmin #eb0;
  border-radius: 50%;
  bottom: 2vmin;
  content: "";
  left: 2vmin;
  position: absolute;
  right: 2vmin;
  top: 2vmin;
}
.disk:after {
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0