使用SCSS random方法实现的随机形状和色彩的窗口

SCSS magic window, 很不错的一个创意背景图案生成器。

scss, window

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 5442
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Nunito');

@for $i from 1 through 5{div:nth-child(#{$i}){width:random(300)*1%;height:random(300)*1%;top:random(70)*1%;left:random(70)*1%;transform:rotate(random(360)+deg);-webkit-transform:rotate(random(360)+deg);}}

@mixin bg(){background: linear-gradient(135deg, $color, $color2);}
$color: rgb(random(235),random(235),random(235));
$color2: rgb(random(20),random(20),random(20));

body{background:#111}

main{max-width:360px;width:100%;position:absolute;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);left:50%;top:50%;}
figure{width:100%;height:360px;display:block;margin:0;position:relative;overflow:hidden;@include bg();}
figure:after{width:100%;height:100%;content:"";position:absolute;border:20px solid rgba(0,0,0,.8);box-sizing:border-box;}
div{background:rgba(255,255,255,.5);position:absolute;animation: effect 0.5s;mix-blend-mode:overlay;}
p{text-align:justify;font-family: 'Nunito', sans-serif;color:#444;}
p:after{content:"";background:$color;height:1px;border:0;position:absolute;bottom:0;left:0;width:100%;}
u{color:#999;text-decoration:none;}

@media screen and(max-height:490px){aside{display:inline-block;position:absolute;bottom:0;left:380px;width:220px;}}

@keyframes effect{0%{margin-top:random(10) - random(10)+px;margin-left:random(70) - random(70)+px;}}

HTML

SCSS magic window, 很不错的一个创意背景图案生成器。

scss, window

编辑器支持Emmet

快捷键

SCSS magic window, 很不错的一个创意背景图案生成器。

scss, window

使用SCSS的循环语法实现多个圆形和方形旋转

使用CSS box-shadow实现的蕨类植物图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：