如何使用CSS3/SCSS实现逼真的车窗雨滴效果
参考下面方法:
1先实现一个小雨滴
首先雨滴是一个个小的椭圆形元素:
.raindrop {
width: 8px;
height: 7px;
border-radius: 100%;
}
2其次雨滴是一个个凸透镜,能折射出远处的景色,远景所处位置远大于2倍焦距,成倒立、缩小的实像。
“倒立”的效果可以通过旋转180°来实现,“缩小”的效果通过设置背景图片的尺寸来达到(下面把背景图缩小到全屏的5%并居中)。
.raindrop {
position: absolute;
background-image: url(“背景图地址”);比如:i.imgur.com/xQdYC7x.jpg 前面加上http://。
background-size: 5vw 5vh;
background-position: 50%;
transform: rotate(180deg) rotateY(0);
}
这样就得到了一个小雨点。
3随机雨滴
接着要创建一些随机分布的雨点对象,假如只有几个,可以手动编写CSS代码,但如果有几十个,直接写CSS代码的效率和可维护性就很差了。
使用SCSS的random方法,来随机微调雨点对象的尺寸和绝对位置。
// 生成0到1之间的随机数
$x:random();
$y:random();
// 随机尺寸和位置
$drop-width:5px+random(11);
$drop-stretch:0.7+(random()*0.5);
$drop-height:$drop-width*$drop-stretch;
.raindrop:nth-child(#{$i}){
left:$x * $width;
top:$y * $height;
width:$drop-width;
height:$drop-height;
background-position:percentage($x) percentage($y);
}
}
4效果增强
还可以给雨滴添加一点闪光的视觉效果,通过CSS3滤镜来实现:
[css] view plain copy
.raindrop {
filter: brightness(1.2);
-webkit-filter: brightness(1.2);
}
如何在webpack+vue.js下配置使用scss
//在项目下,运行下列命令行
npm install –save-dev sass-loader
//因为sass-loader依赖于node-sass,所以还要安装node-sass
npm install –save-dev node-sass
//解析.scss文件,对于用 import 或 require 引入的sass文件进行加载,以及
声明的内部样式进行加载
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(“style”, ‘css!sass’) //这里用了样式分离出来的插件,如果不想分离出来,可以直接这样写 loader:’style!css!sass’
怎么用webstormscss生成css文件夹的方法
这个要通过ruby安装scss,然后在webstorm中配置file watcher 安装ruby,cmd下通过gem install sass,这个可以去网上找一个具体的操作.打开webstorm,点击settings,在左边tools里面找到file watcher,点击右边的+号,选择scss,这时候,如果前面安装好sass的话,在program中找到sass的bat文件(我的是Ruby22-x64\bin\scss.bat) 确认即可.
hbuild怎么引用scss文件
Sass的安装:
1.安装:SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。
假定你已经安装好了Ruby,接着在命令行输入下面的命令:
gem install sass
然后,就可以使用了。
2:使用:
SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。SASS提供两种编译方式,一种是手动编译,一种是监视编译(–watch),手动编译就是当你撰写好CSS时下指令去做编译,监视编译则是你指令一个目录,当此目录里面的*.scss档案有改变时(新增、覆写等等),就会自动去做编译的动作。先来讲手动编译方式:
下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)
sass test.scss
如果要将显示结果保存成文件,后面再跟一个.css文件名。
sass test.scss test.css
SASS提供四个编译风格的选项:
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
生产环境当中,一般使用最后一个选项。
sass –style compressed test.sass test.css
还有一种监视的方式做编译,在命令行中切换到当前sass或者scss文件所在的目录,然后运行
sass –watch scss:css
SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。
Compass的安装:
1.安装:安装ruby之后,输入命令
gem install compass
2.使用:创建一个 COMPASS 项目
在命令行中切换到你需要创建项目的目录,运行:
compass create “projectname”
这个命令会创建一个包含一系列文件的目录,其中最重要的是配置文件 config.rb,其他文件如果你不需要都可以删除。
在 config.rb 中你可以修改 SASS 和 CSS 的目录及其它一些基础设置。
实时编译 SASS 文件
COMPASS 提供的默认方法是:
在命令行下切换到项目目录,运行
compass watch
COMPASS 将会实时监控 SASS 目录的文件变化,只要你一保存文件,立即将相应文件编译为 CSS 文件。
webstorm 怎么添加scss
1、下载ruby最新版2.1.5,安全起见可以安装ruby 1.9.3-p551
ruby安装文件自己百度一下,容易找到。
2、安装过程中,一定注意勾选第二项!否则cmd命令会找不到。
3、安装完后,检查是否安装成功
Win+r快捷键启动cmd命令窗口,输入ruby -v,注意中间空格,显示版本号说明成功。
4、借助ruby安装sass,dos命令窗口输入“gem install sass”
该命令一定要在system32文件下cmd.exe执行,默认安装目录在C:\Windows\System32\cmd.exe文件
5、安装过程中,耐心等待,直到提示安装进度100%。
同样通过“sass -v”命令(中间有空格)检查安装结果,显示当前版本号。
6、接着需要配置webstorm下sass编译环境。
打开webstorm创建空项目,点击“File”菜单选择“Setting”,搜索“watcher”关键字,
7、点击右边绿色加号,选择“SCSS”文件类型。
8、输入监视文件类型名称(随便写),关键第二个选项,一定要选择ruby安装目录bin文件下的scss.bat文件
9、最后,创建.scss文件输入scss css代码,保存后会生成后缀.css文件,说明环境编译没问题。
在html中怎么调用sass文件
这个文件夹应该是webstorm这样的编辑器创建的,我猜想它可能用于记录一些project项目配置等,比如:查询索引.
webstrom怎样设置scss生成css的文件路径
导入.sass或.scss文件
css有一个不太常用的特性,即@import导入功能,它允许在一个css文件中导入其他css文件。然而,结果是只有执行到@import规则时,浏览器才会去下载其他css文件,这会导致页面样式加载特别慢,从而容易出现页面闪的问题。
sass也有@import导入规则,与css不同的是,sass中的@import规则会在生成css文件时,把相关的文件导入合并成一个文件,而无需浏览器去下载其他的文件。另外在被导入文件中定义的变量等也可以在导入文件中正常使用。
在使用@import导入sass文件时,可以省略sass文件的后缀名.sass或.scss,例如:
– a.scss
body {
background-color: #f00;
}
– style.scss
@import “a”;
div {
color: #333;
}
编译后的style.css文件内容如下:
body {
background-color: #f00;
}
div {
color: #333;
}
webstorm里怎么用Compass/Scss,在scss中引入compass/reset就报错
安装COMPASS.方法:gem install compass Compass有五个模块reset、 css3、 layout、 typography、 utilities,要导入指定模块的话,在scss文件中使用如下语法:@import "compass/reset";
react+webpack+scss 怎么编译css独立文件
处理scss文件需要 sass-loader
npm install sass-loader node-sass –save-dev
【注】 以下配置中需要用到的模块,请自行安装
extract-text-webpack-plugin
postcss-loader
precss
autoprefixer
然后在webpack.config.js文件做以下配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//css文件提取器需要的插件
varExtractTextPlugin=require(‘extract-text-webpack-plugin’);
//postcss-loader 需要的配置项
varprecss = require(‘precss’);
varautoprefixer = require(‘autoprefixer’);
module.exports = {
…
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(‘style’,’css!postcss-loader’,’sass’)}
]
},
postcss: function() {
return[precss, autoprefixer];
}
}
scss 怎么定义css3动画
itjob为你解答: @keyframes xxx{ from{background:red;} to{background:black} 或 0%{} 50%{} 100%{} } .itjob{ animation-name:xxx; animation-duration:2s; . . . }