颜色和图标

2019/04/14
default
暂无评论

配色

https://flatuicolors.com/
http://www.peise.net/tools/web/

图标

https://icomoon.io/app/
https://thenounproject.com/

Svg转Png

http://www.fileformat.info/convert/image/svg2raster.htm

Echarts

2018/09/02
front-end
暂无评论

收集的一些资料：
http://echarts.baidu.com/
echarts2 官方实例
 echarts3(4)官方实例 && 个人实例
123.207.117.45/demo20180919.7z

https://www.npmjs.com/package/globe.gl
https://github.com/vasturiano/three-globe
Globe.GL
地球

https://visibleearth.nasa.gov/collection/1484/blue-marble
地球

https://github.com/Gladysgong/3D_earth_all
echarts echarts-x echarts-gl 制作3D地球

https://www.makeapie.com/editor.html?c=xnyknPF1R
区贡献者维护的Apache ECharts (incubating)相关作品，与官方的 Apache ECharts (incubating) 项目无关。

http://www.popodv.com/
PoPo 数据可视化

https://echarts.apache.org/zh/option-gl.html
https://github.com/ecomfe/echarts-gl
GL配置

https://echarts.apache.org/zh/index.html
ECharts（ Apache ECharts）
https://github.com/apache/incubator-echarts
Apache ECharts

https://github.com/ecomfe/echarts-for-weixin
在微信小程序中使用 Apache ECharts (incubating)

https://github.com/xlsdg/vue-echarts-v3
第三方封装

https://mapv.baidu.com/
https://mapv.baidu.com/examples/
Forked from huiyan-fe/mapv
a library of geography visualization-地理信息可视化库
https://github.com/baidu/mapv

http://www.echartsjs.com/gallery/editor.html?c=doc-example/getting-started
数据可视化概览
 大数据可视化大屏设计经验分享
 公司大屏开发心得
 制作公司数据大屏的几点技术总结 && 时钟demo
超大7k高清显示器显示网页解决方案
 中国国家应急广播大屏幕UI设计
 使用百度echarts制作可视化大屏——最终效果和动态数据刷新
 使用百度echarts制作可视化大屏
 大屏设计系列之七：大屏幕界面设计应用案例欣赏
 大屏数据可视化示例 && demo
基于ECharts实现的可视化大屏展示
 数据可视化，个人经验总结（Echarts相关）
一个炫酷大屏展示页的打造过程
 大屏数据展示
 一个炫酷大屏展示页的打造过程

航班实时追踪
http://flightadsb.variflight.com/

数字滚动

Echarts 系列
数据可视化

demo
http://wx.ioneup.com/index.php?s=/screen/index/signin/target_id/1.html
http://wx.ioneup.com/index.php?s=/screen/index/signin/pid/5/target_id/1.html

https://blog.csdn.net/qq_42213965/article/details/80323147

百分比例子
http://gallery.echartsjs.com/editor.html?c=xr1XxW-i7M

1像素

2018/05/12
web, front-end
暂无评论

再谈Retina下1px的解决方案
 移动端 Retina 屏幕 1px 边框问题

这里使用postcss-write-svg举例

需要依赖

npm install postcss-write-svg --save-dev
npm install postcss-write-svg --save

vue页面

<style scoped>
  @svg 1px-border {
    height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 50%;
  }
  }
  .ex-font{
    font-size:18px;
  }
  .ex-border{
    border-bottom: 1px solid #ccc;
    border-image: svg(1px-border param(--color black)) 2 2 stretch;
  }
</style>

配置文件

xx\build\webpack.base.conf.js

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test    : /\.(css|scss)$/,
        use     : ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use     : [
            {
              loader: 'css-loader',
              options: {
                minimize: 'production' !== process.env.NODE_ENV ? false : true,
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: function () {
                  return [
                    require('postcss-write-svg')
                  ];
                }
              }
            },
            {
              loader: 'sass-loader',
              options: {
                outputStyle: 'expanded',
                includePaths: [
                  ROOT_PATH,
                ]
              }
            },
          ],
        }),
        include   : ROOT_PATH,
      },
      {
        test: /\.js$/,
        loader: ['babel-loader'],
        exclude : /node_modules/,
        include : ROOT_PATH,
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: `url-loader?limit=10000&name=${ASSETS_DIR}/images/[name].[hash:8].[ext]`,
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: `url-loader?limit=10000&name=${ASSETS_DIR}/fonts/[name].[hash:8].[ext]`,
      }
    ]
  },



xx\.postcssrc.js

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {},
    "postcss-write-svg": {
      utf8: false
    },
  }
}

简单实现鼠标经过放大图片效果

2016/06/28
front-end
暂无评论

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo</title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        <!--
        .thumbnail{ position:relative; z-index:0; }
        .thumbnail:hover{ background-color:transparent; z-index:50; }
        .thumbnail span{ position:absolute; background-color:#FFFFE0; left:-1000px;border:1px dashed gray; visibility:hidden; color:#000; text-decoration:none; padding:5px; }
        .thumbnail span img{ border-width:0; padding:2px; }
        .thumbnail:hover span{ visibility:visible; top:10px; left:50px; }
        p{ margin-top:200px; }
    -->
</style>
</head>
<body>
    <a class="thumbnail" href="#">
        <img src="" width="50" height="50"><br>
        <span><img src="" width="250" height="250"></span>
    </a>
</body>
</html>

html5+css3进度条倒计时动画特效

2016/03/15
front-end
暂无评论

阅读全文

让评论者的头像动起来：无压力小白级教程

2016/03/13
web
暂无评论

阅读全文

一个loading的css特效

2016/03/11
front-end
暂无评论

阅读全文

QQ登录框的蓝色Canvas动画

2016/03/07
front-end
暂无评论

大家对这个QQ登录框的这个不断波动的蓝色动画想必还是很熟悉的吧，这个可不是SWF文件写出来的，而是用了Html5的canvas特效，本站顶部也是用了这个腾讯出品的效果。来看看怎么实现的！

阅读全文

display:none与visible:hidden

2016/03/05
front-end
暂无评论

display:none与visible:hidden
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden— 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

用法如下：

<span style="display:none;>隐藏区域</span>
<span style="visibility:hidden; >隐藏区域</span>

合理使用能达到日常开发中意想不到的效果。譬如一些插件弹出可恶的输入注册码提示框和一些商业系统比如shopnc去版权等。

当然，前提只是学习之用。和谐社会，请支持官方正版软件！

纯css打造漂亮的wordpress在线客服

2016/03/05
WordPress
暂无评论

实现效果如下：

阅读全文

详解CSS3绘制会跳动的爱心

2016/03/04
front-end
暂无评论

阅读全文

CSS3+JS+PHP制作实时时钟

2016/03/04
web
暂无评论

CSS3+JS+PHP制作实时时钟

阅读全文

css实现九宫格(二)

2016/02/29
front-end
暂无评论

阅读全文

css实现九宫格(一)

2016/02/29
front-end
暂无评论

阅读全文

纯CSS制作一个非常简单的tip效果

2016/02/20
front-end
暂无评论

阅读全文

标签 CSS 下的文章

配色

图标

Svg转Png

数字滚动

需要依赖

vue页面

配置文件

用法如下：