行星点击动画效果-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" viewbox="0 0 400 400" width="160" height="160">\
        <style>\
            @keyframes rotateShape %7Bto %7B transform: rotate(-360deg)}} %3C/style>\
      <g>\
          <circle cx="15" cy="85" r="10" style="fill:none;stroke-width:4;stroke:rgb(192,192,192);"/>\
          <polygon points="110 10, 100 30, 120 30" style="fill:none;stroke-width:2;stroke: rgb.........完整代码请登录后点击上方下载按钮下载查看