css实现鼠标悬浮点亮紫色花瓣动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现鼠标悬浮点亮紫色花瓣动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html, body {
      margin: 0;
      background: #131313;
    }
    
    .mandala {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -500px;
      margin-left: -500px;
      width: 1000px;
      height: 1000px;
    }
    .mandala .flower:nth-child(1) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      z-index: 9;
      transform: rotate(60deg);
      transition: transform 1s;
    }
    .mandala .flower:nth-child(1) .whorl {
      position: absolute;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -ms-border-radius: 50%;
      -moz-border-radius: 50%;
      width: 14.2857142857px;
      height: 14.2857142857px;
      background: gold;
      background-image: radial-gradient(circle, transparent 2px, transparent 4px);
      background-size: 8px 8px;
      top: 50%;
      left: 50%;
      margin-left: -7.1428571429px;
      margin-top: -7.1428571429px;
      box-shadow: 0px 0px 20px gold;
    }
    .mandala .flower:nth-child(1) .petal:nth-child(1) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -20px;
      border-radius: 80% 0% 80% 0%;
      width: 40px;
      height: 40px;
      background: linear-gradient(-45deg, #673AB7, #131313);
      transform-style: preserve-3d;
      transform: rotate(90deg) translate(33.3333333333px) rotate(45deg);
    }
    .mandala .flower:nth-child(1) .petal:nth-child(1):after {
      position: absolute;
      content: "";
      top: 250%;
      left: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -ms-border-radius: 50%;
      -moz-border-radius: 50%;
      width: 4px;
      height: 4px;
      background: gold;
      box-shadow: 0 0 20px yellow;
      opacity: 0;
    }
    .mandala .flower:nth-child(1) .petal:nth-child(2) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -20px;
      border-radius: 80% 0% 80% 0%;
      width: 40px;
      height: 40px;
      background: linear-gradient(-45deg, #673AB7, #131313);
      transform-style: preserve-3d;
      transform: rotate(135deg) translate(33.3333333333px) rotate(45deg);
    }
    .mandala .flower:nth-child(1) .petal:nth-child(2):after {
      position: absolute;
      content: "";
      top: 250%;
      left: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -ms-border-radius: 50%;
      -moz-border-radius: 50%;
      width: 4px;
      height: 4px;
      background: gold;
      box-shadow: 0 0 20px yellow;
      opacity: 0;
    }
    .mandala .flower:nth-child(1) .petal:nth-child(3) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -20px;
      border-radius: 80% 0% 80% 0%;
      width: 40px;
      height: 40px;
      background: linear-gradient(-45deg, #673AB7, #131313);
      transform-style: preserve-3d;
      transform: rotate(180deg) translate(33.3333333333px) rotate(45deg);
    }
    .mandala .flower:nth-child(1) .petal:nth-child(3):after {
      position: absolute;
      content: "";
      top: 250%;
      left: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -ms-border-radius: 50%;
      -moz-border-radius: 50%;
      width: 4px;
      height: 4px;
      background: gold;
      box-shadow: 0 0 20px yellow;
      opacity: 0;
    }
    .mandala .flower:nth-child(1) .petal:nth-child(4) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -20px;
      border-radius: 80% 0% 80% 0%;
      width: 40px;
      height: 40px;
      background: linear-gradient(-45deg, #673AB7, #131313);
      transform-style: preserve-3d;
      transform: rotate(225deg) translate(33.3333333333px) rotate(45deg);
    }
    .mandala .flower:nth-child(1) .petal:nth-child(4):after {
      position: absolute;
      content: "";
      top: 250%;
      left: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -ms-border-radius: 50%;
      -moz-border-radius: 50%;
      width: 4px;
      height: 4px;
      background: gold;
      box-shadow: 0 0 20px yellow;
      opacity: 0;
    }
    .mandala .flower:nth-child(1) .petal:nth-child(5) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -20px;
      border-radius: 80% 0% 80% 0%;
      width: 40px;
      height: 40px;
      background: linear-gradient(-45deg, #673AB7, #131313);
      transform-style: preserve-3d;
      transform: rotate(270deg) translate(33.3333333333px) rotate(45deg);
    }
    .mandala .flower:nth-child(1) .petal:nth-child(5):after {
      position: absolute;
      content: "";
      top: 250%;
      left: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -ms-border-radius: 50%;
      -moz-border-radius: 50%;
      width: 4px;
      height: 4px;
      background: gold;
      box-shadow: 0 0 20px yellow;
      opacity: 0;
    }
    .mandala .flower:nth-child(1) .petal:nth-child(6) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -20px;
      border-radius: 80% 0% 80% 0%;
      width: 40px;
      height: 40px;
      background: linear-gradient(-45deg, #673AB7, #131313);
      transform-style: preserve-3d;
      transform: rotate(315deg) translate(33.3333333333px) rotate(45deg);
    }
    .mandala .flower:nth-child(1) .petal:nth-child(6):after {
      position: absolute;
      content: "";
      top: 250%;
      left: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -ms-border-radius: 50%;
      -moz-border-radius: 50%;
      width: 4px;
      height: 4px;
      background: gold;
      box-shadow: 0 0 20px yellow;
      opacity: 0;
    }
    .mandala .flower:nth-child(1) .petal:nth-child(7) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -20px;
      border-radius: 80% 0% 80% 0%;
      width: 40px;
      height: 40px;
      background: linear-gradient(-45deg, #673AB7, #131313);
      transform-style: preserve-3d;
      transform: rotate(360deg) translate(33.3333333333px) rotate(45deg);
    }
    .mandala .flower:nth-child(1) .petal:nth-child(7):after {
      position: absolute;
      content: "";
      top: 250%;
      left: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -ms-border-radius: 50%;
      -moz-border-radius: 50%;
      width: 4px;
      height: 4px;
      background: gold;
      box-shadow: 0 0 20px yellow;
      opacity: 0;
    }
    .mandala .flower:nth-child(1) .petal:nth-child(8) {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -20px;
      margin-left: -20px;
      border-radius: 80% 0% 80% 0%;
      width: 40px;
      height: 40px;
      background: linear-gradient(-45deg, #673AB7, #131313);
      transform-style: preserve-3d;
      transform: rotate(405deg) translate(33.3333333333px) rotate(45deg);
    }
    .mandala .flower:nth-child(1) .petal:nth-child(8):after {
      position: absolute;
      content: "";
      top: 250%;
      left: 100%;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -ms-border-radius: 50%;
      -moz-border-radius: 50%;
      width: 4px;
      height: 4px;
     .........完整代码请登录后点击上方下载按钮下载查看