熟悉scss
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>满天星</title>
<link rel="stylesheet" type="text/css" href="css/star.css"/>
</head>
<body>
<div class="star-1"></div>
<div class="star-2"></div>
<div class="star-3"></div>
</body>
</html>
//scss
@function minStar( $n ){
$value:"#{random(2000)}px #{random(2000)}px #fff";
@for $i from 1 through $n{
$value:#{$value},#{random(2000)}px #{random(2000)}px #fff;
}
@return $value;
}
html{
height: 100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);;
overflow: hidden;
}
.star-1{
width: 1px;
height: 1px;
box-shadow:minStar(700);
color: #fff;
position: absolute;
top:;
animation: move1 5s infinite linear; }
.star-2{
width: 1.5px;
height: 1.5px;
position: absolute;
top:;
box-shadow: minStar(700);
color: #fff;
animation: move1 10s infinite linear;
}
.star-3{
width: 2px;
height: 2px;
position: absolute;
top:;
box-shadow: minStar(700);
color: #fff;
animation: move1 15s infinite linear;
}
@keyframes move1{
0%{
top:;
}
100%{
top:-500px;
}
}
熟悉scss的更多相关文章
- Sass带来的变革_sass, scss 教程_w3cplus - Google Chrome
Sass带来的变革 作者:大漠 日期:2014-11-17 点击:5291 sass scss 接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上.同时也让自己喜欢上 ...
- 【Sass/SCSS】我花4小时整理了的Sass的函数
[Sass/SCSS]我花4小时整理了的Sass的函数 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 Sass 定义了各 ...
- 高薪诚聘熟悉ABP框架的.NET高级开发工程师（2016年7月28日重发）
招聘单位是ABP架构设计交流群(134710707)群主阳铭所在的公司-上海运图贸易有限公司 招聘岗位:.NET高级开发工程师工作地点:上海-普陀区 [公司情况]上海运图贸易有限公司,是由易迅网的创始 ...
- Vue ES6 Jade Scss Webpack Gulp
一直以来非常庆幸曾经有翻过<代码大全2>:这使我崎岖编程之路少了很多不必要的坎坷.它在软件工艺的话题中有写到一篇:"首先是为人写程序,其次才是机器(Write Programs ...
- 学习Spring——两个你熟悉的不能再熟悉的场景使用
最近公众号受邀获取了留言和赠送模板的权限,小开心(欢迎去公众号JackieZheng围观). 我们大致的了解了Spring这个框架对于依赖注入的使用和诠释可谓是淋漓尽致.因为有了Spring的这个IO ...
- Ruby安装Scss
Ruby安装Scss 引言 已经许久不写HTML了,今天有点以前的东西要改.但是刚装的Windows10,已经没有以前的Web开发环境了.只好重新安装. 结果Webstorm装好后配置Scss出现错误 ...
- vim 常用命令逐渐熟悉以及常用的配置记录
本篇博客记录的是我自己学习vim的常用命令的过程中,各个命令的逐渐熟悉的顺序(有一部分已经熟悉的命令没有列出),已经对vim编辑器本身的一些设置的记录 1.G 快速将光标切换到文件的最底部 2.u 撤 ...
- CSS预处理框架：less，scss
CSS预处理器:less和sass:CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用 变量.简单的程序逻辑.函数等等在编程语言中 ...
- sass/scss 和 less的区别
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
随机推荐
- linux安全检查
1 ssh后门 检察语句: grep -E "user,pas|user:pas" /usr/bin/* /usr/local/sbin/* /usr/local/bin/* /b ...
- dubbo+zookeeper简单环境搭建
dubbo+zoopeeper例子 [TOC] 标签(空格分隔): 分布式 dubbo dubbo相关 dubbo是目前国内比较流行的一种分布式服务治理方案.还有一种就是esb了.一般采用的是基于Ap ...
- Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...
- CSS清浮动
× 目录 [1]定义 [2]方法 [3]兼容 前面的话 人们经常谈起清浮动,其实就是解决浮动元素的包含块高度塌陷的问题 定义 clear 清除 值: left | right | both | non ...
- sublime简要笔记
选中单词 [1]选中当前单词 ctrl+d [2]跳过当前单词 ctrl+k ctrl+d [3]选中相同的所有单词 alt+f3 [4]多行游标 按住shift,然后按住鼠标右键向下拖动 行操作 [ ...
- Android线程之Looper
之前已经为大家奉献了关于Handler和Message的使用,本篇我们来了解一下Handler内部的具体使用,本篇主要探讨Looper的在处理Handler的消息机制中起的重要作用,我们知道我们在子线 ...
- Cwinux源码解析（五）
Cwinux源码解析(五)
- 记一次上传文件到七牛云存储的经历（Plupload & UEditor）（.net）
七牛 配置ACCESS_KEY和SECRET_KEY Qiniu.Conf.Config.ACCESS_KEY = "ACCESS_KEY"; Qiniu.Conf.Config. ...
- Tools - Git与GitHub
Git Wiki - Git 开源的分布式版本控制系统,用于敏捷高效地管理项目版本. Git - HomePage Git - CHEAT SHEET git_cheat_sheet.pdf GitH ...
- iOS-地图报错超出了经纬度范围Invalid Region
做地图定位的时候,使用一下代码 // 经纬度 CLLocationDegrees latitude = [storeDict[@"lat"] doubleValue]; CLLoc ...