吃豆豆动画特效

最新推荐文章于 2022-08-19 15:17:40 发布

J江.

最新推荐文章于 2022-08-19 15:17:40 发布

阅读量347

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_46262513/article/details/115451777

版权

这篇博客为初学者提供了详细的吃豆豆动画特效制作教程，通过CSS样式和HTML展示，逐步指导如何实现豆豆的动态效果，适合零基础的学习者跟随实践。

摘要由CSDN通过智能技术生成

小白也能看懂的代码吃豆豆动画特效（零基础）
跟着一步一步写代码你也能制作出此特效
废话不多说，直接上干货吧！

CSS样式展示

1.1默认样式清零

* {
   
 /* 默认样式 */
  padding: 0px;
  margin: 0px;
 /* 背景颜色 */
  background-color: black;

在这里插入图片描述

1.2

div {
   
  width: 200px; 
  height: 200px;   
  /* 上边距 */          
  margin-top: 100px;
   /* 大盒子圆角设置 */
  border-radius: 50% 50%;
  /* 小圆的圆角设置 */
   border-radius: 100px;
   box-shadow:
   /* 盒子阴影 横向 纵向  模糊半径 颜色*/
   300px 0px 0px -80px red,
   450px 0px 0px -80px red,
   600px 0px 0px -80px red,
   750