css效果，只有你想不到！

背景

近期看到小朋友说在学习CSS,于是我看一了一编MDN,发现一些好用的特性做个分享

本文主要是如下几个特性，var(); inset; filter

demo1

实现

  <div class="box">
     <h2>CSS</h2>
   </div>
   
    .box{
            position:relative;
	    display: flex;
            width:180px;
            height:260px;
	    margin:100px auto;
	    flex-direction: column;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 20px;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .box h2{
            color:#fff;
            font-size: 80px;
            text-shadow: 2px 2px pink;
            z-index: 1;
        }
        .box::before{
            content: "";
            position: absolute;
            width: 120px;
            height: 120%;
            background: linear-gradient(#00ccff,#d500f9);
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: rotate 4s  linear infinite;

        }
        .box::after{
            content: "";
            position: absolute;
            background: #0e1538;
            /* 定义 3D inset 边框。其效果取决于 border-color 的值
            */
           inset: 5px;
            border-radius: 20px;
        }

        @keyframes rotate {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }

小结

相对简单，主要是用到inset属性，结合animate 旋转动画

demo2

实现

<section>
		<div class="box">
			<div class="circle">
				<span style="--i:0"></span>
				<span style="--i:1"></span>
				<span style="--i:2"></span>
				<span style="--i:3"></span>
				<span style="--i:4"></span>
				<span style="--i:5"></span>
				<span style="--i:6"></span>
				<span style="--i:7"></span>
				<span style="--i:8"></span>
				<span style="--i:9"></span>
				<span style="--i:10"></span>
				<span style="--i:11"></span>
				<span style="--i:12"></span>
				<span style="--i:13"></span>
				<span style="--i:14"></span>
				<span style="--i:15"></span>
				<span style="--i:16"></span>
				<span style="--i:17"></span>
				<span style="--i:18"></span>
				<span style="--i:19"></span>
				<span style="--i:20"></span>
				
			</div>
			<div class="circle">
				<span style="--i:0"></span>
				<span style="--i:1"></span>
				<span style="--i:2"></span>
				<span style="--i:3"></span>
				<span style="--i:4"></span>
				<span style="--i:5"></span>
				<span style="--i:6"></span>
				<span style="--i:7"></span>
				<span style="--i:8"></span>
				<span style="--i:9"></span>
				<span style="--i:10"></span>
				<span style="--i:11"></span>
				<span style="--i:12"></span>
				<span style="--i:13"></span>
				<span style="--i:14"></span>
				<span style="--i:15"></span>
				<span style="--i:16"></span>
				<span style="--i:17"></span>
				<span style="--i:18"></span>
				<span style="--i:19"></span>
				<span style="--i:20"></span>
				
			</div>
			
		</div>
	</section>
        
        section{ 
			display: flex;
			height:100vh;
			width: 100%;
			animation:  animatColor 8s linear infinite;
			justify-content: center;
			align-items: center;
			background: #042104;;

		 }
		 .box{
			 display: flex;
		 }
		 .circle{
			position: relative;
			width:150px;
			height: 150px;
			margin: 0 -7.5px;
		 }
	
		 .circle span{
			 position: absolute;
			 left: 0;
			 top: 0;
			 width: 100%;
			 height: 100%;
			 transform: rotate(calc(18deg*var(--i)));
			 
		 }
		 .circle span::before {
			 content: "";
			 position: absolute;
			 width: 15px;
			 height: 15px;
			 background: #00ff0a;
			 border-radius: 50%;
			 right: 0;
			 box-shadow: 0 0 10px #00ff0a,
							0 0 20px #00ff0a,
							0 0 40px #00ff0a,
							0 0 60px #00ff0a,
							0 0 80px #00ff0a,
							0 0 100px #00ff0a;
			top: calc(50% - 7.5px);
			transform: scale(0.1);
			animation: animate 4s linear infinite;
			animation-delay: calc(0.1s*var(--i));
		 }
		 .circle:nth-child(2) {
		 	transform: rotate(-180deg);
		 }
		 .circle:nth-child(2) span::before{
		 	animation-delay: calc(-0.1s*var(--i));
		 }
		 @keyframes animate {
                     0%{
                             transform: scale(1);
                     }
                     50%,100% {
                             transform: scale(0.1)
                     }
		 }
		 @keyframes animatColor {
                     0%{
                             //函数在输入图像上应用色相旋转
                             filter: hue-rotate(0deg);
                     }
                     100% {
                             filter: hue-rotate(360deg);
                     }
		 }

小结：

主要是animate 动画缩放，filter特性，盒子二相对盒子一反向旋转原理，动画延迟

以上可以复制到playcode.io/1485575 在线预览看效果，

另外推荐个几个站点：

MDN: filter - CSS：层叠样式表 | MDN (mozilla.org)

cssplay:Stu Nicholls | CSS PLAY | CSS Demonstrations

这个站点10多年前刚开始使用css时就一直用的，尤其可以看看老外的实现效果，将css发挥的淋漓尽致，只有你想不到，没有老外做不到，相信你看了上面的实现效果，对CSS会有一种新的认知。。。

css渐变：CSS Gradient — Generator, Maker, and Background

css动画：Keyframes.app