行星点击动画效果-html代码-BFW代码库

行星点击动画效果

代码语言：html

所属分类：动画

代码描述：行星点击动画效果

代码标签：效果

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

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

<style>
.circle {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #e04747;
  position: relative;
  cursor: pointer;
}
.circle::before {
  content: "";
  position: absolute;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) rotate(15deg);
  height: 15px;
  width: 75px;
  border: 3px solid white;
  border-top: 0;
}
.circle:after {
  content: "";
  width: 320px;
  height: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  border-radius: 100%;
  z-index: -1;
}
.circle:hover::before {
  animation: bounce 0.8s ease-out;
}
.circle:hover::after {
  background-image: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg".........完整代码请登录后点击上方下载按钮下载查看