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

最新推荐文章于 2023-07-23 18:44:37 发布

莫兮是我

最新推荐文章于 2023-07-23 18:44:37 发布

阅读量247

点赞数

分类专栏：前端 CSS 文章标签： animation css css3

本文链接：https://blog.csdn.net/u013362192/article/details/116041574

版权

前端同时被 2 个专栏收录

67 篇文章 0 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

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>

莫兮是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-方形组件圆形阴影和动画

css-方形组件圆形阴影和动画目录文章目录前言效果代码前言CSS特效思路：1个div包裹4个，最外层作为阴影来源，内部4个作为补齐补板。主要用到以下：border-radiusbox-shadow@keyframe, animationz-indextransitionposition, top, left效果代码<!DOCTYPE html><html lang="en"><head> <meta chars
复制链接

扫一扫