css和html实现花瓣动画效果：

本文主要是介绍css和html实现花瓣动画效果：，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

css和html实现花瓣动画效果

如图1
在这里插入图片描述

首先我们要画一个建立一个正方行模型，里面来接椭圆

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color:white;}.losts{position:absolute;margin:300px 300px;width: 300px;height: 300px;background-color: blue; }.losts1{background-color: pink;width: 300px;height: 300px;}</style>
</head>
<body><div class="losts"><div class="losts1 snow1"></div></div>
</body>
</html>3

如图2：
在这里插入图片描述

在里面实现椭圆：

在里面添加：

 border-radius: 0px 300px 0px 300px;

效果如图3：

在这里插入图片描述

实现旋转：

.losts:hover .snow1{transform: rotate(0deg);}.losts:hover .snow2{transform: rotate(30deg);}.losts:hover .snow3{transform: rotate(60deg);}.losts:hover .snow4{transform: rotate(90deg);}.losts:hover .snow5{transform: rotate(-90deg);}.losts:hover .snow6{transform: rotate(-30deg);}.losts:hover .snow7{transform: rotate(-60deg);}.losts:hover .snow7{transform: rotate(-90deg);}

确定旋转轴中心：

transform-origin: 300px 300px;

旋转开始时间移动动画：

 transition: all 0.2;

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: black;}.losts{position:absolute;margin:300px 300px;width: 300px;height: 300px;/* background-color: blue; */transform: rotate(45deg);}.losts1{position: absolute;top: 0px;left: 0;opacity: 0.7;background-color: pink;width: 300px;height: 300px;border-radius: 0px 300px 0px 300px;transform-origin: 300px 300px;transition: all 0.2;}.losts:hover .snow1{transform: rotate(0deg);}.losts:hover .snow2{transform: rotate(30deg);}.losts:hover .snow3{transform: rotate(60deg);}.losts:hover .snow4{transform: rotate(90deg);}.losts:hover .snow5{transform: rotate(-90deg);}.losts:hover .snow6{transform: rotate(-30deg);}.losts:hover .snow7{transform: rotate(-60deg);}.losts:hover .snow7{transform: rotate(-90deg);}</style>
</head>
<body><div class="losts"><div class="losts1 snow1"></div><div class="losts1 snow2"></div><div class="losts1 snow3"></div><div class="losts1 snow4"></div><div class="losts1 snow5"></div><div class="losts1 snow6"></div><div class="losts1 snow7"></div></div>
</body>
</html>3

效果图：
在这里插入图片描述