熟悉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比多出好些功能(如变量 ...
随机推荐
- 快速入门系列--WCF--05事务
最近开始WCF相关知识的学习,虽然实际工作中使用公司自己的一套SOA系统,但微软的一套服务架构还是具有很大的参考意义.除了WCF的一些基础使用,相对比较复杂的内容有分布式的事务和通信的安全等,不过基本 ...
- JSON学习之一
1.JSON:JavaScript Object Notation(javaScript对象表示法),JSON是存储和交换文本信息的语法,类似XML:JSON比XML更小,更快,更易解析: { &qu ...
- 体验Visual Studio 2015 Windows Forms应用程序开发与维护
昨天到半夜还没有等到Visual Studio 2015的下载地址,实在熬不住就先休息了.北美地区的时区比北京时间要晚一些,今天早上到公司就看到Visual Studio 2015的下载地址,迅速的将 ...
- Android登录等待效果
上一篇为大家分享了关于AsyncTask的使用,本篇结合AsyncTask为大家介绍一个我们经常看到的一个效果,就是当我们点击登录后,会弹出一个请等待的小窗体,这个效果是如何实现的呢?本篇我就带大家简 ...
- 使用Google产品以来遇到的最糟糕、最霸道、最让人抓狂的设计
很久没有登录cnblogs@gmail.com这个邮箱,今天通过gmail.com登录了一下,登录后出现一个对话框要求设置性别与出生日期,而且必须要设置,不设置不让登录. 这个邮箱是我们网站用的是邮箱 ...
- nodejs常用组件
mssql 用途:连接SqlServer数据库 excel 用途:操作excel文档 nodegrass 用途:模拟用户进行get/post请求,下载文件等
- Ext.Net全部Icon图标名称展示
- RHEL6 某业务用户ulimit -a命令找不到
最终确定是shell环境问题,临时改为/bin/bash即可查看. 1.问题现象 # su - jingyu $ id uid=(jingyu) gid=(jingyu) (jingyu) $ uli ...
- 在Python中实现PageFactory模式
关于 PageFactory 的概念主要是Java中内置了PageFactory类. import org.openqa.selenium.support.PageFactory; …… 例子,htt ...
- 【GIT】使用Git命令窗口将本地工程提交至远程GitHub
目标: 1.解决的问题是如何通过Git命令窗口将本地工程提交至GitHub. 2.方便园友的同时也方便自己以后解决此类问题. 步骤: 1.首先登陆GitHub网站https://github.com/ ...