熟悉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比多出好些功能(如变量 ...
随机推荐
- css基础总结一
最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...
- TSQL HASHBYTES 用法
HashBytes 使用Hash 算法,能够产生高质量的Hash值,大幅度提高识别数据相异的准确性,但是HashBytes函数无法提供100%的准确度,如果业务逻辑要求不允许有误差,那么不要使用任何H ...
- 初了解NodeJS
发现了NodeJS以后让我有一种很激动的心情,因为它能做我以前一直想写的东西,而如果没有NodeJS我还需要去学习别的语言,但是有了NodeJS以后就可以通过Javascript来写我的程序了,不得不 ...
- C++程序员们，快来写最简洁的单例模式吧
想必每一位程序员都对设计模式中的单例模式非常的熟悉吧,以往我们用C++实现一个单例模式需要写以下代码: class CSingleton { private: CSingleton() //构造函数是 ...
- Html标签之frameset&图片切换
今天为大家分享一下刚刚总结好的html经验,以备不时之需. 首先介绍一下frameset标签,此标签用于同一页面内切换网页,在大多数网页中都可以看到,因为项目的需要,故而研究一二. frameset标 ...
- Unity 游戏存档 PlayerPrefs类的用法
unity3d提供了一个用于本地持久化保存与读取的类--PlayerPrefs.工作原理非常简单,以键值对的形式将数据保存在文件中,然后程序可以根据这个名称取出上次保存的数值. PlayerPr ...
- 原创：C语言打开、下载、删除网页，统计网页字符个数
本程序由本人在华夏联盟的ID闪电笨笨原创,首发地址:http://bbs.hx95.com/ 写此程序希望可以可以激发新手学习C语言的积极性! C语言代码实现功能如下: 1.实现 ...
- Kibana中doc与search策略的区别
在kibana中包含两种策略:doc和search.使用了两个循环队列来获取请求,并进行响应. doc的代码如下: clientMethod: 'mget' search的代码如下: clientMe ...
- 【转】NoSQL初探之人人都爱Redis：（1）Redis简介与简单安装
一.NoSQL的风生水起 1.1 后Web2.0时代的发展要求 随着互联网Web2.0网站的兴起,传统的关系数据库在应付Web2.0网站,特别是超大规模和高并发的SNS类型的Web2.0纯动态网站已经 ...
- <textarea>输入框提示文字
背景 看了过时的资料,花费大把时间,不过也有收获,还是写写吧! 分析 有同学可能想到直接在<textarea>标签内输入帮助文字,但是这又有一个新问题--因为<textarea> ...