css
console.log( )
吾日三省吾身:这事能不能不干、这事能不能推给别人干、这事能不能明天干。
展开
-
nuxt中全局引入样式文件
使用@nuxtjs/style-resources配置nuxt.config.jsstyleResources: { scss: ['~/assets/style/main.scss'], hoistUseStatements: true,},buildModules: [ '@nuxtjs/style-resources'],原创 2021-12-31 16:38:07 · 1166 阅读 · 0 评论 -
vue中使用scss全局变量
插件版本"node-sass": "^4.14.1","sass-loader": "^7.3.1","sass-resources-loader": "^2.1.1",node-sass和sass-loader默认最新版本,使用时会有各种版本报错上面的版本可用vue,config,js配置module.exports = { css: { loaderOptions: { sass: { data:原创 2021-03-29 18:57:53 · 3549 阅读 · 3 评论 -
animate动画懒加载
制作css动画可以使用animate动画库,也有在animate的基础上改进的动画库,例如aos.js wow.js动画如果一开始加载页面就全部播放完毕就没有了做动画的意义懒加载也就是当页面视图滑动到元素的时候才会执行元素的动画,主要很两种情况一、动画只执行一次,窗口移走再次移回,动画不会再次执行wow.js以animate为基础的动画,可以实现这种效果<divclass="card_text comeInLeftwow"data-wow-duration="1.5s"...原创 2021-04-02 17:28:09 · 870 阅读 · 0 评论 -
input file模式 隐藏/修改“未选择文件“几个字
百度搜出来各种复杂操作直接input的title值原创 2020-07-15 18:24:23 · 1975 阅读 · 2 评论 -
css实现滚屏展示效果
我这里是20条数据循环展示,页面同时能展示四条数据,一次循环20s实现无缝滑动需要把前四条数据加到最后,否则会出现数据瞬变(因为循环结束会瞬间拉回,原来位置重新向下滑动),也就是有24条数据不说废话,直接上代码实现滑动功能的主要代码@keyframes myMove { 0% { transform: translateY(0); } 100% { transform: translateY(-500%);//我是按百分比设定高度,所以下滑的距离是5*原创 2020-05-09 14:58:20 · 1456 阅读 · 1 评论 -
css样式初始化
CSS样式初始化代码为什么要初始化CSS?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。最简单的初始化方法就是: * {padding: 0; margin: 0;} 。有很多人也...转载 2019-12-02 14:48:50 · 203 阅读 · 0 评论 -
动画效果animate.css
制作文字动画效果 样式挺多1、从官网下载 https://raw.github.com/daneden/animate.css/master/animate.css 下载文件,在项目中引入2.直接在项目中引入<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.m...原创 2019-07-22 18:09:03 · 1548 阅读 · 0 评论