江苏龙网

  1. 主页 > 生活百科 > >

阿里大牛纯CSS实现了常见的UI效果，不信你看

css

在用纯css实现这些效果之前，笔者先介绍几个常用的SCSS Mixin和一个得力武器，用它们来进行创作将会事半功倍
覆盖 - cover@mixin cover($top: 0, $left: 0, $width: 100%, $height: 100%) {position: absolute;top: $top;left: $left;width: $width;height: $height;}当你想在原先元素的基础上再“复制”一个元素，并将其覆盖在它身上时，你将会用到它

阿里大牛纯CSS实现了常见的UI效果，不信你看

文章插图
 
demo地址：https://codepen.io/alphardex/pen/GRjEoBZ
嵌入 - inset@mixin inset($inset: 0) {position: absolute;top: $inset;left: $inset;right: $inset;bottom: $inset;}同样地，这也是在原先元素基础上复制出一个元素，只不过这个元素位置和原先的元素相同，大小会基于原先的元素而增减 。
举个例子，倘若你想创建多个半径不同的同心圆，这个Mixin将会很有帮助
aqua.cssaqua.css是笔者开源的一个优雅的、轻量级的CSS框架 。里面有很多常用的组件以及常用的样式类，用它来写CSS体验将会非常爽
在codepen上，笔者准备了一个aqua.css模版，大家可以用它来进行CSS的创作
常见UI效果条纹效果
阿里大牛纯CSS实现了常见的UI效果，不信你看

文章插图
 
首先，我们要抓住“边框”这个词，如何创作出一个特殊的边框呢？如果一般的CSS属性实现不了的话，可以考虑用伪元素来实现，思路如下：在原先的元素下方创建一个有条纹背景的伪元素，并保证原先元素覆盖住它就行，这样就模拟了边框的效果 。
那么如何创建条纹背景呢？这里我们将使用repeating-linear-gradient来实现它
<div class="card w-80"><div class="border-stripe rounded-xl">Lorem ipsum...</div></div>.border-stripe {--stripe-width: 0.5rem;--stripe-deg: -45deg;--stripe-color-1: var(--grey-color-1);--stripe-offset-1: 2px;--stripe-color-2: var(--skin-color-2);--stripe-offset-2: 1rem;--stripe-radius: 15px;--stripe-inset: calc(var(--stripe-width) * -1);&::before {@include inset(var(--stripe-inset));content: "";z-index: -1;background: repeating-linear-gradient(var(--stripe-deg),var(--stripe-color-1) 0 var(--stripe-offset-1),var(--stripe-color-2) 0 var(--stripe-offset-2));border-radius: var(--stripe-radius);}}为了保证复用性，这里将其抽象成了border-stripe类，里面的值都可以通过CSS变量来动态调节
demo地址：https://codepen.io/alphardex/pen/VwKWvdG
光泽效果
阿里大牛纯CSS实现了常见的UI效果，不信你看

文章插图
 
一看到光泽，相信你可能会想到一个关键角色——径向渐变，通过它，我们可以创作出放射状的图案，而光泽也恰好是放射状的，再根据背景可以叠加的特性，光泽效果就能轻松实现了
<div class="flex flex-col space-y-4"><span class="btn btn-primary btn-round inline-flex"><span class="font-bold text-grad">Shine Button 1</span></span><span class="btn btn-info btn-round btn-depth inline-flex"><span class="font-bold">Shine Button 2</span></span></div>:root {--blue-color-1: #08123d;--gold-color-1: #dcb687;--brown-color-1: #50301f;--brown-color-2: #936237;--gold-grad-1: radial-gradient(circle at 50% 5%,#{transparentize(white, 0.5)},#eba262),#eba262;--gold-grad-2: linear-gradient(88deg, #e7924e 0%, #f8ffee 50%, #e7924e 100%);--blue-grad-1: radial-gradient(circle at 50% 5%,#{transparentize(white, 0.8)},#091344),#091344;--primary-color: var(--blue-grad-1);--info-color: var(--gold-grad-1);}.btn {&-primary {border: 4px solid var(--gold-color-1);span {background-image: var(--gold-grad-2);}}&-info {color: var(--brown-color-1);border: none;}&-depth {box-shadow: 0 -5px 0 var(--brown-color-2);}}demo地址：https://codepen.io/alphardex/details/vYXZNez
不规则形状
阿里大牛纯CSS实现了常见的UI效果，不信你看

文章插图
 
首先，让我们先观察一下上图的缎带形状是由哪些基本形状组成的：中间是一个矩形，矩形下方有2个三角形，左右2侧各有一个被裁切过的矩形 。一提裁切，就能想到clip-path这个属性，于是问题也就很好解决了
<div class="ribbon">Pure CSS Ribbon<div class="block"></div><div class="block"></div><div class="block"></div><div class="block"></div></div>.ribbon {--ribbon-color-1: var(--yellow-color-1);--ribbon-color-2: var(--yellow-color-2);--ribbon-color-3: var(--yellow-color-3);position: relative;padding: 0.5rem 1rem;color: white;background: var(--ribbon-color-1);.block {&:nth-child(1),&:nth-child(2) {position: absolute;bottom: -20%;width: 20%;height: 20%;background: var(--ribbon-color-2);clip-path: polygon(0 0, 100% 100%, 100% 0);}&:nth-child(1) {left: 0;}&:nth-child(2) {right: 0;transform: scaleX(-1);}&:nth-child(3),&:nth-child(4) {position: absolute;z-index: -1;top: 20%;width: 40%;height: 100%;background: var(--ribbon-color-3);clip-path: polygon(0 0, 25% 50%, 0 100%, 100% 100%, 100% 0);}&:nth-child(3) {left: -20%;}&:nth-child(4) {right: -20%;transform: scaleX(-1);}}}


推荐阅读


上一篇：华硕WiFi6路由器 新品RT-AX68U点评

下一篇：reGeorg搭建HTTP隧道和流量分析