css-方形组件圆形阴影和动画

本文主要是介绍css-方形组件圆形阴影和动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

css-方形组件圆形阴影和动画目录

文章目录

前言
效果
代码

前言

CSS特效
思路：1个div包裹4个，最外层作为阴影来源，内部4个作为补齐补板。
主要用到以下：
- border-radius
- box-shadow
- @keyframe, animation
- z-index
- transition
- position, top, left

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Border Radius</title><style>body{background-color: pink;}#box1 {width: 100px;height: 100px;background: #ffffff;position: relative;margin: 30% auto;border-radius: 50%;box-shadow: 15px 15px 17px 17px rgba(0,0,0,0.2);transition: 2s;animation-name: test;animation-direction: reverse;animation-duration: 2s;animation-timing-function: linear;animation-iteration-count: infinite;animation-fill-mode: forwards;z-index: 999;}#box2 {width: 30px;height: 100px;border-radius: 50%;background-color: #ffffff;position: absolute;top: 0;left: 80px;z-index: 1;}#box3 {width: 30px;height: 100px;border-radius: 50%;background-color: #ffffff;position: absolute;top: 0;right: 80px;z-index: 1;}#box4 {width: 100px;height: 30px;border-radius: 50%;background-color: #ffffff;position: absolute;top: 80px;z-index: 1;}#box5 {width: 100px;height: 30px;border-radius: 50%;background-color: #ffffff;position: absolute;bottom: 80px;z-index: 1;}@keyframes test {from {background-color: aqua;opacity: 0.5;}to {background-color: purple;opacity: 1;}}</style>
</head>
<body>
<div id="box1"><div id="box2"></div><div id="box3"></div><div id="box4"></div><div id="box5"></div>
</div>
</body>
</html>