熟悉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比多出好些功能(如变量 ...
随机推荐
- Java连接MongoDB进行增删改查
1.导入必须的包: 详情看项目:http://pan.baidu.com/s/1cvDAOY 2.通过Myeclipse创建WEB项目 3. 3.bean:创建实体类 package com.bean ...
- 大型.NET商业软件代码保护技术 技术与实践相结合保护辛苦创造的劳动成果
列举工作以来遇到的各种类型的软件所采用的代码保护技术,只讲原理不涉及技术细节实现,以避免产生法律问题.有些朋友说直接把代码放在Github开源下载,开源可以促进技术交流与进步,然而值钱的代码都积压在硬 ...
- 理解模板引擎Razor 的原理
Razor是ASP.NET MVC 3中新加入的技术,以作为ASPX引擎的一个新的替代项.简洁的语法与.NET Framework 结合,广泛应用于ASP.NET MVC 项目.Razor Pad是一 ...
- Caffe + Ubuntu 14.04 64bit + CUDA 6.5 配置说明
本文安装显卡驱动的方式已经过时, 最新安装说明请参考发布在Gist上的这篇文章,如有任何疑问,仍然欢迎在本文下留言 :P (本文档使用同一块NVIDIA显卡进行显示与计算, 如分别使用不同的显卡进行显 ...
- 【原创】.NET读写Excel工具Spire.Xls使用(1)入门介绍
在.NET平台,操作Excel文件是一个非常常用的需求,目前比较常规的方法有以下几种: 1.Office Com组件的方式:这个方式非常累人,微软的东西总是这么的复杂,使用起来可能非常不便,需要安装E ...
- JavaScript垃圾回收（二）——垃圾回收算法
一.引用计数(Reference Counting)算法 Internet Explorer 8以下的DOM和BOM使用COM组件所以是引用计数来为DOM对象处理内存,引用计数的含义是跟踪记录每个值被 ...
- 漫谈可视化Prefuse（四）---被玩坏的Prefuse API
这个双12,别人都在抢红包.逛淘宝.上京东,我选择再续我的“漫谈可视化”系列(好了,不装了,其实是郎中羞涩...) 上篇<漫谈可视化Prefuse(三)---Prefuse API数据结构阅读有 ...
- layout_weight详解
注:LinearLayout中的TextView按比例显示的时候,layout_width="0dp"或者layout_height="0dp" 在androi ...
- Elasticsearch 连接查询
在一般的关系型数据库中,都支持连接操作. 在ES这种分布式方案中进行连接操作,代价是十分昂贵的. 不过ES也提供了相类似的操作,支持水平任意扩展,实现连接的效果. 其他内容,参考Elasticsear ...
- Struts2 源码分析——前言
笔者简言 笔者在博园里面注册是在二年前.可是那个时候我不知道要写些什么,也怕写出来被别人骂误人子弟.而现在却动笔了是因为前一段时间内我去参加一些大公司的面试,让笔者内心深处留下很多问号.最近三年来我一 ...