• css-边框流水线

    效果图：
    请添加图片描述

    代码：

    

	
		
		
		
		
	
	
		
    
			
    
			
    
			
    
		
    
	


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65

    效果图

    请添加图片描述
    代码：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			*{
				margin: 0;
				padding: 0;
				
			}
			 body{
				 background-color: black;
			 }
			.container{
				width: 100vw;
				height: 100vh;
				backdrop-filter: blur(50px);
				display: flex;
				justify-content: center;
			}
			.box{
				z-index: 1;
				width: 250px;
				box-sizing: border-box;
				height: 250px;
				margin: 50px;
				background-color: red;
				position: relative;
				overflow: hidden;
				-webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4));
				
			}
			:root{
				--wi:5px;
				--hi:5px;
			}
			.rect_out{
				z-index: 3;
				position: absolute;
				width: calc(100% - var(--wi));
				height: calc(100% - var(--hi));
				left: calc(var(--wi)/2);
				top: calc(var(--hi)/2);
				background-color: green;
			}
			.rect_in{
				z-index: 2;
				width: 100%;
				height: 100%;
				background-color: yellow;
				position: absolute;
				left: -50%;
				top: -50%;
				border-radius: 50%;
				transform-origin: right bottom;
			    animation: rotate 5s linear infinite;
			}
			@keyframes rotate{
				from{
					transform: rotate(0deg);
				}
				
				to{
					transform: rotate(360deg);
				}
			}
			
		</style>
		
		<div class="container">
			<div class="box">
				<div class="rect_out"></div>
				<div class="rect_in"></div>
			</div>
		</div>
	</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
  • 相关阅读:
    【小程序源码】2022虎年背景全新UI头像框制作带安全检测
    DID：零知识证明的第一个应用试验场
    2.6.C++项目：网络版五子棋对战之数据管理模块-游戏房间管理模块的设计
    学习笔记2--高精度地图定义及价值
    dayjs格式转换成日期
    前端的限流主要是通过什么方式实现的？
    VSCode远程调试Python代码环境配置
    windows安装mycat1.4
    《征服数据结构》块状链表
    【web-攻击本地编译性应用程序】(11.3)格式化字符串漏洞
  • 原文地址：https://blog.csdn.net/sunboylife/article/details/134001825