熟悉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比多出好些功能(如变量 ...
随机推荐
- emmet插件学习，练习中遇到一些问题
emmet插件学习:帮助提高敲代码效率的插件 参考文献:Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/1 ...
- iOS设备的越狱方法
最近公司的事情很忙,在开发一个类似于微信的App,经常加班,所以也没有时间去更新微信公众账号的内容了.iOSJailbreak, 申请这个账号大概有一个多月了吧,发布的内容不多,更多是针对开发者的内容 ...
- QQ5.0左侧滑动显示效果
前三篇为大家介绍了如何实现简单的类QQ5.0左侧的侧滑效果,本篇我将带领大家一起探讨一下如何真正实现QQ5.0左侧的侧滑效果,对于本篇的内容与之前的三篇关联性很强,如果前三篇你已经完全掌握,对于这一篇 ...
- 服务器程序DEBUG
服务器程序DEBUG 服务器端设定 Tomcat 默认我们启动Tomcat是使用下边的命令 ./catalina.sh start 如果想DEBUG的话,只需要加一个参数打开JPDA(Java Pla ...
- Elasticsearch聚合 之 Terms
之前总结过metric聚合的内容,本篇来说一下bucket聚合的知识.Bucket可以理解为一个桶,他会遍历文档中的内容,凡是符合要求的就放入按照要求创建的桶中. 本篇着重讲解的terms聚合,它是按 ...
- 基于HT for Web 3D呈现Box2DJS物理引擎
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是 ...
- 解析导航栏的url--selnium，beautifulsoup实战
前段时间做ui自动化测试的时候,导航栏菜单始终有点问题,最后只好直接获取到url,然后直接使用driver.get(url)进入页面: 包括做压测的时候,比如我要找出所有报表菜单的url,这样不可能手 ...
- C#基础02
学习"传智播客视频基础"做的课堂笔记,您有幸读到,若其中有错误部分,请您务必指明.另外请给出您的宝贵建议,谢谢. **************基础知识************ 1: ...
- 数论 - Funny scales(SPOJ - SCALE)
Funny scales Problem's Link ------------------------------------------------------------------------ ...
- JS 实现可停顿的垂直滚动
var ScrollMiddle = { 'Odiv':document.getElementById('comment'), // 目标DOM 'Oli': document.getElementB ...