前端及开发文章及欣赏

用cesium.js 制作一个球形地图

前端达人

要用 Cesium.js 制作一个球形地图,可以按照以下步骤:

  1. 在 HTML 文件中添加 Cesium.js 库文件的引用。可以通过以下方式获取最新版的 Cesium.js 库文件链接:https://cesium.com/downloads/。

  2. 创建一个 div 元素来容纳地球场景,并设置其样式以占满整个屏幕。

  3. 在 JavaScript 文件中创建 Cesium.Viewer 对象并将其附加到之前创建的 div 元素上。这将在屏幕上显示一个球体,并启动 Cesium.js 场景。

  4. 可以通过更改 Viewer 对象的属性来自定义地球的外观和行为。例如,可以更改摄像机的位置和方向、加载不同类型的地图数据、添加标记等等。

以下是一个简单的示例代码:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Cesium App</title>
    <style>
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.85/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
    </script>
</body>
</html>
这将创建一个简单的地球场景,可以在其中添加更
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~ 希望得到建议咨询、商务合作,也请与我们联系01063334945。  分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。  蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

CSS旋转 动画效果

前端达人

目录

动画基本使用

 动画序列

 动画常见属性

动画简写属性

大数据热点图案例

速度曲线之steps步长


动画基本使用

动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常 用来实现复杂的动画效果。

相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

制作动画分为两步: 1.先定义动画 2.再使用(调用)动画

1. 用keyframes 定义动画(类似定义类选择器)

@keyframes 动画名称 {

                   0%{

                                width:100px;

                                }

                        100%{

                                width:200px;

                }

}

动画序列 

0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。

在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意的次数。

请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

2. 元素使用动画

div {

width: 200px;

height: 200px;

background-color: aqua;

margin: 100px auto; /* 调用动画 */

animation-name: 动画名称;

/* 持续时间 */ animation-duration: 持续时间; } 

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <style>
  9. /* 我们想页面一打开,一个盒子就从左边走到右边 */
  10. /* 1. 定义动画 */
  11. @keyframes move {
  12. /* 开始状态 */
  13. 0% {
  14. transform: translateX(0px);
  15. }
  16. /* 结束状态 */
  17. 100% {
  18. transform: translateX(1000px);
  19. }
  20. }
  21. div {
  22. width: 200px;
  23. height: 200px;
  24. background-color: pink;
  25. /* 2. 调用动画 */
  26. /* 动画名称 */
  27. animation-name: move;
  28. /* 持续时间 */
  29. animation-duration: 2s;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div></div>
  35. </body>
  36. </html>

 动画序列

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <style>
  9. /* from to 等价于 0% 和 100% */
  10. /* @keyframes move {
  11. from {
  12. transform: translate(0, 0);
  13. }
  14. to {
  15. transform: translate(1000px, 0);
  16. }
  17. } */
  18. /* 动画序列 */
  19. /* 1. 可以做多个状态的变化 keyframe 关键帧 */
  20. /* 2. 里面的百分比要是整数 */
  21. /* 3. 里面的百分比就是 总的时间(我们这个案例10s)的划分 25% * 10 = 2.5s */
  22. @keyframes move {
  23. 0% {
  24. transform: translate(0, 0);
  25. }
  26. 25% {
  27. transform: translate(1000px, 0)
  28. }
  29. 50% {
  30. transform: translate(1000px, 500px);
  31. }
  32. 75% {
  33. transform: translate(0, 500px);
  34. }
  35. 100% {
  36. transform: translate(0, 0);
  37. }
  38. }
  39. div {
  40. width: 100px;
  41. height: 100px;
  42. background-color: pink;
  43. animation-name: move;
  44. animation-duration: 10s;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div>
  50. </div>
  51. </body>
  52. </html>

 动画常见属性

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <style>
  9. @keyframes move {
  10. 0% {
  11. transform: translate(0, 0);
  12. }
  13. 100% {
  14. transform: translate(1000px, 0);
  15. }
  16. }
  17. div {
  18. width: 100px;
  19. height: 100px;
  20. background-color: pink;
  21. /* 动画名称 */
  22. animation-name: move;
  23. /* 持续时间 */
  24. /* animation-duration: 2s; */
  25. /* 运动曲线 */
  26. /* animation-timing-function: ease; */
  27. /* 何时开始 */
  28. animation-delay: 1s;
  29. /* 重复次数 iteration 重复的 conut 次数 infinite 无限 */
  30. /* animation-iteration-count: infinite; */
  31. /* 是否反方向播放 默认的是 normal 如果想要反方向 就写 alternate */
  32. /* animation-direction: alternate; */
  33. /* 动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */
  34. /* animation-fill-mode: forwards; */
  35. /* animation: name duration timing-function delay iteration-count direction fill-mode; */
  36. /* animation: move 2s linear 0s 1 alternate forwards; */
  37. /* 前面2个属性 name duration 一定要写 */
  38. /* animation: move 2s linear alternate forwards; */
  39. }
  40. div:hover {
  41. /* 鼠标经过div 让这个div 停止动画,鼠标离开就继续动画 */
  42. animation-play-state: paused;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <div>
  48. </div>
  49. </body>
  50. </html>

动画简写属性

linear 匀速

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

animation: myfirst 5s linear 2s infinite alternate;

简写属性里面不包含 animation-play-state

暂停动画:animation-play-state: puased; 经常和鼠标经过等其他配合使用

想要动画走回来 ,而不是直接跳回来:animation-direction : alternate

盒子动画结束后,停在结束位置: animation-fill-mode : forwards 

大数据热点图案例

还没听。。


速度曲线之steps步长
 

animation-timing-function:规定动画的速度曲线,默认是“ease“

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <style>
  9. div {
  10. overflow: hidden;
  11. font-size: 20px;
  12. width: 0;
  13. height: 30px;
  14. background-color: pink;
  15. /* 让我们的文字强制一行内显示 */
  16. white-space: nowrap;
  17. /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
  18. animation: w 4s steps(10) forwards;
  19. }
  20. @keyframes w {
  21. 0% {
  22. width: 0;
  23. }
  24. 100% {
  25. width: 200px;
  26. }
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div>世纪佳缘我在这里等你</div>
  32. </body>
  33. </html>

CSS基础学习——动画

前端达人

一、CSS3 2D变形(利用Transfrom方法)

1、rotate(angle)
元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: rotate(30deg) ;
        margin: 200px auto;
    }
</style>
<body>
    <div>

    </div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

效果如图
在这里插入图片描述
如果当rotate里面的值为负数时,比如ratate(-10deg),效果如图:
在这里插入图片描述

2、 translate(x,y)方法
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。也就是相对于页面左部和顶部的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: translate(20px, 20px);
    }

</style>
<body>

    <div></div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

效果如下
在这里插入图片描述
初次之外还有其他的参数

transform: translate(200px);
如果只带一个参数,这个参数代表的是x方向位移值,y方向位移为0

transform: translateX(200px);
对X方向移动

transform: translateY(200px);
对Y方向移动

3、scale() 方法
通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: scale(2,0.5);
        margin: 20px auto;
    }

</style>
<body>

    <div></div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

效果如图
在这里插入图片描述
可以看到,长边变为了原来的两倍,宽边变为了原来的0.5倍

transform: scale(1.5);x轴和y轴都放大1.5倍
transform: scaleX(1.5);x轴放大1.5倍
transform: scaleY(1.5);y轴放大1.5倍
transform-origin: left top;改变中心点位置为左上角,当然还可以自由搭配,右下(right bottom),右上(right top)

4、 skew() 方法
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: skew(30deg,30deg);
        margin: 200px auto;
    }

</style>
<body>

    <div></div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

效果如图

在这里插入图片描述
意思就是:围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 30 度。可能看起来比较抽象

transform: skew(230deg);如果只带一个参数,只有x轴方向的扭曲
transform: skewX(230deg); 对X轴进行翻转
transform: skewY(230deg); 对Y轴进行翻转

其实还是很好理解的,比如两个图叠加在一起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .demo{
        width: 200px;
        height: 200px;
        margin: 200px auto;
        border: 1px solid #000;
    }

    .box{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        transform: skew(5deg,0deg);
    }

</style>
<body>
<div class="demo">
    <div class="box"></div>
</div>

</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

在这里插入图片描述
可以看到,所谓的X轴翻转,其实就是x方向的移动,上面的线向左移动5px,下面的线向右移动5px,加入Y也一样
比如:transform: skew(0deg,5deg);
在这里插入图片描述
左边的线向上移动5px,右边的线向下移动5px,同时改变时 transform: skew(5deg,5deg);

在这里插入图片描述
最好记的方式就是对角线的同时移动,左上右下是排斥,左下右上是吸引

5、matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

如题:将div右移100px,下移200px,旋转30度,x轴缩放1.5倍,y轴缩放2倍。

(1)transform: translate(100px, 200px) rotate(30deg) scale(1.5, 2);

(2)transform: matrix(1.299, 0.75, -1, 1.732, 100, 200)

计算方法
在这里插入图片描述
效果如图
在这里插入图片描述

6、transform-origin 属性
允许你改变被转换元素的位置
语法: transform-origin: x-axis y-axis z-axis;
属性值:
x-axis :定义视图被置于 X 轴的何处。可能的值:left,center,right,length,%。
y-axis :定义视图被置于 Y 轴的何处。可能的值:top,center,bottom,length,%。
z-axis :定义视图被置于 Z 轴的何处。可能的值:length。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-origin</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .demo{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #000;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #f00;
            transform: rotate(60deg);
            transform-origin: right bottom;
        }
    </style>
</head>
<body>
<div class="demo">
    <div class="box"></div>
</div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

效果如图
在这里插入图片描述
形象的来说,就是规定你从哪个角开始旋转,比如规定右下角旋转,则图形以右下角为旋转角,顺时针旋转60°

二、CSS3 3D变形

1、perspective属性
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
注释:perspective 属性只影响 3D 转换元素。
语法: perspective: number|none;
属性值:
number :元素距离视图的距离,以像素计。
none :默认值。与 0 相同。不设置透视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>perspective</title>
    <style>
        .father{
            position: relative;
            width: 200px;
            height: 200px;
            padding: 10px;
            margin: 200px auto;
            border: 1px solid #999;
            perspective: 150px;
        }
        .son{
            width: 100px;
            height: 50px;
            padding: 50px;
            position: absolute;
            border: 1px solid #f00;
            background-color: #0ff;
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

效果如图
在这里插入图片描述

2、trasform-style属性
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
注释:该属性必须与 transform 属性一同使用。
语法: transform-style: flat|preserve-3d;
属性值:
flat :子元素将不保留其 3D 位置。
preserve-3d :子元素将保留其 3D 位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-style</title>
    <style>
        .wrapper{
            width: 200px;
            height: 100px;
            margin: 200px auto;
        }
        .div1,.div2{
            width: 200px;
            height: 100px;
            padding: 20px;
        }
        .div1{
            background-color: #f00;
            transform: rotateY(30deg);
            transform-style: preserve-3d;

        }
        .div2{
            background-color: #655fff;
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="div1">div1
        <div class="div2">div2</div>
    </div>
</div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

效果如图
在这里插入图片描述

3、CSS3过渡
transition 属性是一个简写属性,用于设置四个过渡属性:
transition-property:规定设置过渡效果的 CSS 属性的名称。
transition-duration:规定完成过渡效果需要多少秒或毫秒。
transition-timing-function:规定速度效果的速度曲线。
transition-delay:定义过渡效果何时开始。
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
语法: transition: property duration timing-function delay;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition过渡动画</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            position: relative;
            border: 1px solid #eee;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 100px;
            top: 100px;
            transform: rotate(0deg);
            transition-property: all;
            transition-duration: .8s;
        }
        .box:hover .demo{
            left: 500px;
            width: 300px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

或者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition过渡动画</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            position: relative;
            border: 1px solid #eee;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 100px;
            top: 100px;
            transform: rotate(0deg);
            transition: left 2s ease 500ms, width 5s ease-in-out;
        }
        .box:hover .demo{
            left: 500px;
            width: 300px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

可以自行实验一下

4、CSS3动画

使用@keyframes
通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键帧动画</title>
    <style>
        .box{
            width: 100%;
            height: 800px;
            position: relative;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute;
            /*animation: move 5s ease-in-out infinite alternate ;*/
            -webkit-animation: move 5s ease-in-out 500ms 2 alternate ;
            -moz-animation: move 5s ease-in-out 500ms 2 alternate ;
            -ms-animation: move 5s ease-in-out 500ms 2 alternate ;
            -o-animation: move 5s ease-in-out 500ms 2 alternate ;
            animation: move 5s ease-in-out 500ms 2 alternate ;
        }
        @keyframes move {
            0%{
                left: 100px;
            }
            45%{
                left: 200px;
                top: 100px;
                background-color: #00f;
            }
            75%{
                left: 400px;
                top: 300px;
                background-color: #64ff77;
            }
            100%{
                left: 500px;
                top: 500px;
                background-color: #ff4975;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

或者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键帧动画</title>
    <style>
        .box{
            width: 100%;
            height: 800px;
            position: relative;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute;
            /*animation: move 5s ease-in-out infinite alternate ;*/
            -webkit-animation: move 5s ease-in-out 500ms 2 alternate ;
            -moz-animation: move 5s ease-in-out 500ms 2 alternate ;
            -ms-animation: move 5s ease-in-out 500ms 2 alternate ;
            -o-animation: move 5s ease-in-out 500ms 2 alternate ;
            animation: move 5s ease-in-out 500ms 2 alternate ;
        }
        @keyframes move {
           from{
                left: 100px;
            }
            to{
                left: 500px;
                background-color: #00f;
            }
        }

    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

animation:move 5s ease-in-out 500ms 2 alternate

move:表示animation-name ,动画名称

5s:表示animation-duration,时长

ease-in-out:表示animation-timing-function 规定动画的速度曲线

除此以外还有:
linear:动画从头到尾的速度是相同的。
ease:默认。动画以低速开始,然后加快,在结束前变慢。
ease-in:动画以低速开始。
ease-out:动画以低速结束。
ease-in-out:动画以低速开始和结束。

500ms:表示animation-delay,规定在动画开始之前的延迟。

2 :表示animation-iteration-count,规定动画应该播放的次数。

alternate:表示animation-direction,规定是否应该轮流反向播放动画,如果 animation-direction 值是 “alternate”,则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

用css画一个空心圆环,使用纯CSS画一个圆环(代码示例)

前端达人

本篇文章通过代码示例介绍一下使用纯CSS画圆环的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

3b98c20306e2c9d95532ec8bb7753265.png

画圆环思想很简单:首先画两个圆,设置不同的背景色;然后让两个圆的圆心重合即可。

难度系数

☆☆

HTML

解析:此处有父容器

CSS.container {

position: relative;

top: 0;

left: 0;

width: 300px;

height: 300px;

background-color: lightgrey;

}

.ring-style {

display: inline-block;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: blue;

width: 260px;

height: 260px;

border-radius: 260px;

}

.ring-style::before {

content: ' ';

display: inline-block;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: white;

width: 200px;

height: 200px;

border-radius: 200px;

}

解析:设置元素的宽高、圆角效果,即可画出一个圆

通过 ::before 伪元素和本体元素,创建两个圆

通过基于父容器的绝对定位,设置 top、left、translate 属性,让元素基于父容器水平、竖直居中,即可让两个圆的圆心重合

【推荐教程:CSS视频教程 】

效果图

e6b5a99b91be36358f46cb9fa35bf984.png

知识点border-radius

::before && ::after

元素水平、竖直居中

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

Echarts legend属性使用

前端达人

Echarts的legend属性是对图例组件的相关配置
而legend就是Echarts图表中对图形的解释部分:
图例

其中legend自身常用的配置属性如下:

orient

设置图例的朝向

属性值:

vertical // 垂直显示
或者
horizontal // 水平显示

legend: { orient: 'vertical' } 
  • 1
  • 2
  • 3

vertical

 legend: { orient: 'horizontal' } 
  • 1
  • 2
  • 3

horizontal

x/y(left/top)

设置图例在X轴方向上的位置以及在Y轴方向上的位置

位置 取值
x/left left/center/right
y /top top/center/bottom

例子:

legend: { orient: 'vertical', x:'right', y:'center' } 
  • 1
  • 2
  • 3
  • 4
  • 5

x/y

样式设置

属性 说明
backgroundColor 背景颜色
borderColor 边框颜色
borderWidth 边框宽度
padding 内边距

注意:边框宽度和内边距属性值为数值,不加单位。

legend: { orient: 'vertical', x:'center', y:'top', backgroundColor: '#fac858', borderColor: '#5470c6', borderWidth: '200', } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

echarts

itemGap

控制每一项的间距,也就是图例之间的距离
属性值为数值,不带单位

legend: { orient: 'horizontal', x:'center', y:'top', itemGap: 40 } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

echarts

itemHeight

控制图例图形的高度
属性值为数字,不加单位

legend: { orient: 'horizontal', x:'center', y:'top', itemHeight: 5 } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

echarts

textStyle

设置图例文字样式
属性值为一个对象

legend: { orient: 'horizontal', x:'center', y:'top', textStyle: { color: 'red', fontSize: '20px', fontWeight: 700 } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

echarts

selected

设置图例的某个选项的数据默认是显示还是隐藏。
false: 隐藏
属性值:对象,属性值内容:图例上的数据与boolean构成键值对
如果某选项设置为false,那么图标上的数据也会默认不显示,而图例会以灰色样式显示

legend: { orient: 'horizontal', x:'center', y:'top', selected:{ '搜索引擎': false, '联盟广告': false } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

echarts

data

图例上显示的文字信息,如果不设置该项,默认会以series设置的信息作为图例信息。如果设置该项,必须与series设置的信息一致,才会生效。
而该属性的作用:可以单独对图例中某个选项进行单独设置样式
比如:

legend: { orient: 'horizontal', x:'center', y:'top', data:[{ name: '搜索引擎', icon: 'circle', textStyle: {fontWeight: 'bold', color: 'orange'} },'直接访问','邮件营销','联盟广告','视频广告'] } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

以上单独设置中
name:指定该项的名称,必填
icon:指定图例项的icon,可以为内置的图形7个图形,或者自定义图标的形式:'image://url'
textStyle::设置文本样式
echarts





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

超详细的VSCode下载和安装教程以及解决VSCode下载速度特别慢的问题

前端达人

1. 引言

今天用WebStorm运行前端代码时,发现不太好打断点。

于是,打算改用VSCode来运行前端代码,但前提是要安装VSCode,如下便是超详细的VSCode安装教程以及解决VSCode下载速度特别慢的问题。

2. 下载VSCode

  1. 打开VSCode官网

https://code.visualstudio.com

在这里插入图片描述

  1. download下载

在这里插入图片描述

在这里插入图片描述

  1. 下载特别慢
    在这里插入图片描述

你会发现VSCode官网地址下载很慢,或者下着下着就暂停了,如下图所示:

在这里插入图片描述

如果下载完成,那得等到猴年马月。

3. 解决VSCode下载速度特别慢

  1. 单击右下角全部显示

我是用chrome浏览器,点击右下角的全部显示按钮,可以跳转到下载内容页面。

如果你是用其他浏览器,可能使用其他方式跳转到下载内容页面。

在这里插入图片描述

在这里插入图片描述

  1. 鼠标放置在下图红框中,右键鼠标,复制链接地址

在这里插入图片描述

  1. 将复制号的下载链接地址放到任意地方,并将蓝色区域的地址替换成国内镜像地址:vscode.cdn.azure.cn

在这里插入图片描述

https://az764295.vo.msecnd.net/stable/129500ee4c8ab7263461ffe327268ba56b9f210d/VSCodeUserSetup-x64-1.72.1.exe修改为https://vscode.cdn.azure.cn/stable/129500ee4c8ab7263461ffe327268ba56b9f210d/VSCodeUserSetup-x64-1.72.1.exe

将替换后的地址输入到浏览器的地址栏中,如下图所示,按enter键即可快速下载。

在这里插入图片描述

在这里插入图片描述

速度是不是立刻提升了。

4. 安装VSCode

  1. 我同意此协议 -> 下一步

在这里插入图片描述

  1. 选择更换文件夹 -> 下一步

因为我的系统盘(C盘)的内存不够用了,需要更换到其他盘符,我更换到D盘中。

如果你不想更换到其他盘符,可以直接下一步即可。

在这里插入图片描述

在这里插入图片描述

  1. 选择附加任务 -> 下一步。根据你的需求勾选复选框。

在这里插入图片描述

  1. 准备安装 -> 安装

在这里插入图片描述

在这里插入图片描述

  1. 安装完成 -> 完成

在这里插入图片描述

  1. 打开VSCode

在这里插入图片描述





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

01 【Sass的安装使用】

前端达人

Sass的安装使用

1.介绍

1.1 CSS预处理技术,及种类介绍

什么是css预处理技术

  • CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
  • 通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如变量$main-color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。

css预处理技术的种类

  • Sass(SCSS)
  • LESS
  • Stylus
  • Turbine
  • Swithch CSS
  • CSS Cacheer
  • DT CSS

如此之多的 CSS 预处理器,那么“我应该选择哪种 CSS 预处理器?”也相应成了最近网上的一大热门话题,各大技术论坛也是争论不休。

到目前为止,在众多优秀的 CSS 预处理器语言中就属 SassLESS 和 Stylus 最优秀。

1.2 什么是sass

Sass(Syntactically Awesome StyleSheets)是一种CSS预处理器(preprocessor), 是一款强化 CSS 的辅助工具。可以高效的编写样式,同时实现变量、嵌套、组合、继承等编程语言功能。

css是一门非程序式语言,没有变量、函数、scope(作用域)等概念。

  • CSS需要书写大量看似没有逻辑的代码,冗余度比较高
  • 不方便维护及扩展,难以复用
  • css没有很好的计算能力
  • 非前端工程师往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码

CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者只要使用这种语言进行CSS的编码工作就可以了。

“用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正常的 CSS 文件,以供项目使用。”

2.关于scss和sass

sass是最早出现的css预处理语言,有着比less更强大的功能。采用Ruby语言编写。

最初版本采用的是严格缩进的风格(不带大括号( {} )和分号( ; ),这一语法也导致一开始,sass并不太为开发者所接受)。

从 V3 版本开始放弃了缩进式的风格,并完全兼容普通的css代码,也因此从第三代开始,sass也被称为scss。

Sass 3 就是 Scss,是Sassy CSS的简写,它是CSS3语法的超集,也就是说所有有效的CSS/CSS3样式也同样适合于Sass。

对现代编程来说,sass就是scss,也因此,sass现在的扩展名为.scss(如果是旧版本的sass,可能扩展名会为.sass)。

3.安装和命令行编译

cmd打开本地命令控制窗口,输入下面字符串然后回车就装好了。

npm install -g sass 
  • 1

编译.scss文件为.css文件:

Sass使用.scss作为文件后缀名,不能直接在< link >标签里使用,需要编译为 .css文件。 演示:

  1. 建一个html文件,随便写个h1标签:

image-20220823140518434

  1. 建一个.scss后缀的文件,如input.scss,写点基本样式sass的语法:
    image-20220823140550201

  2. 在html文件所在的路径下打开cmd命令控制符,输入:

    //单文件转换命令
    sass input.scss:output.css
    
    // 或 sass input.scss output.css 
            
    • 1
    • 2
    • 3
    • 4

    表示把名字为 input.scss 转换成名字为 ouput.css 的文件。
    回车后,接下来发现就得到了css的文件。

    image-20220823140645814

使用 : 编译输出时,前后不能有空格,即 : 前紧跟输入的scss文件,: 后紧跟输出的css文件。

: 冒号形式的命令,常用于编译文件夹(中的所有sass文件)的输入输出。

css文件内容如下,可以看出转换好了:
 image-20220823140750386
接下来就是老操作了,在HTML里用 < link >标签把css文件引入就行。

  1. 但是不可能说写一句.scss语句就转换一次,太麻烦,所以可以自动转换,当我在.scss里写一句,.css就自动生成一句。在cmd输入以下:

    sass --watch input.scss:ouput.css 
            
    • 1

    表示监视变化,当input.scss一变化,output.css就变化

空格和冒号对应生成css的两中模式,如果是一对一模式(一个scss生成一个css),使用空格即可;如果是多对多模式,比如一个文件夹生成到另一个文件夹,同时一次性有多个scss文件生成css文件等。

# 编译 light.scss 和 dark.scss 到 light.css 和 dark.css. > sass light.scss:light.css dark.scss:dark.css

sass  --watch  fileFolder:outputFolder/css 
  • 1
  • 2
  • 3
  • 4

当名字为fileFolder这个文件夹里任意一个.scss后缀的文件变化时,就将其编译到名字outputFolder/css这个文件夹里面(会自动生成相应的.css文件)

4.Sass文件编译快览

4.1 命令行编译配置选项

可以通过 sass -h 或 sass --help 查看详细配置项。

配置选项可以指定编译后的css的排版、是否生成调试map、开启debug等,最常用的是 --style 和 --sourcemap

4.2 --watch监听文件变化

sass使用--watch选项,用于监听scss文件的变化。这样,当scss文件内容有改动时,会自动编译为css。

  • 监听单个scss文件
sass --watch .\firstsass.scss .\firstsass1.css 
  • 1
  • 监听scss文件夹
sass --watch .\scssdir\ .\cssdir\

sass --watch scssdir:cssdir 
  • 1
  • 2
  • 3

可以看到,使用 : 可以指定输出的路径(文件夹),否则css将默认生成在源scss文件所在目录中。

  • 结合 --style 监听
sass --watch app/sass:public/stylesheets --style=compressed 
  • 1

使用压缩(compressed)的样式(style)输出 css 文件

4.3 --style指定css的样式

--style 的css格式有两种:expanded(默认)、compressed

旧版本的Ruby实现中有四种样式,还有nestedcompact

// 指定编译格式
sass input.scss:output.css --style=expanded 
  • 1
  • 2

比如,一个scss文件如下:

.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

下面,可以查看expandedcompressed编译后的css格式。

  1. expanded :默认值,未压缩的展开的css格式

每个选择器和声明单独一行。

执行如下命令编译:

sass styletest.scss styletest.css --style=expanded

# 或 sass styletest.scss styletest.css 
  • 1
  • 2
  • 3

expanded编译过后的样式,是标准的没有经过任何压缩,全部字符展开的css格式:

.box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  1. compressed 去除所有的空白字符,全部css内容压缩为一行

生产环境中推荐的css格式。

执行如下命令编译,将css结果输出在命令行中:

sass --style=compressed styletest.scss

.box{width:300px;height:400px}.box-title{height:30px;line-height:30px} 
  • 1
  • 2
  • 3

5.使用VSCode插件编译

5.1 基本使用

live sass compiler是VSCode扩展,可以实时地将SASS / SCSS文件编译/转换为CSS文件。

  • 可以自动添加css兼容性前缀,-webkit-,-moz-,-ms,-o-等。
  • 可以自定义css文件解析后的代码样式(expanded 展开,compact,compressed 压缩,nested)。
  • 可自定义编译/转换后的文件扩展名(.css或.min.css)。

1.在vscode插件里搜索live sass compiler安装。

2.安装后,新建scss文件,在vscode底部状态栏中点击watch sass,此时状态为 Watching ,即可自动解析sass为css文件。

image-20220823173100339

5.2 自定义设置

在使用live sass compiler插件时,并不是所有的默认设置都如我们所愿,那么,我们来看一下如何自定义设置。

1.编译/转换后的文件格式、扩展名、保存位置

  • 文件格式
    格式可以是expanded,compact,compressed或nested。默认值为 expanded。
  • 扩展名
    扩展名可以是.css或.min.css。默认值为.css。
  • 保存位置
    默认的转换后的css文件保存在scss文件的同级目录下,但实际,我们通常需要把所有scss文件保存在scss文件夹,而css文件希望保存在css的文件夹,如图所示:
    image-20220823173159840

我们在配置中如下设置:

"liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" } ] 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

savePath即为导出后的文件保存位置。

2.去掉编译时出现的css.map文件
在每个文件编译后,默认设置下,会同时出现一个map格式的文件,有时并不需要该文件,那么我们如何去掉呢?

"liveSassCompile.settings.generateMap": false, 
  • 1

默认值为true,我们设置为false即可。

3.设置css兼容性前缀
live sass compiler可以在编译时自动添加CSS兼容性前缀(-webkit-,-moz-,-ms,-o-等),如下设置:

"liveSassCompile.settings.autoprefix": [ "> 1%", "last 3 versions" ], 
  • 1
  • 2
  • 3
  • 4

其中,

  • ">1%"是指 通过全球使用情况统计信息选择出的高于1%使用率的浏览器版本。
  • "last 3 versions"是指 每个浏览器的最后3个版本。

这里也可以设置为具体的浏览器,如下:

"liveSassCompile.settings.autoprefix": [ "ie >= 6", //ie6以上 "firefox >= 8", "chrome >= 24", "Opera>=10" ], 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

总结

个人配置:

"liveSassCompile.settings.generateMap": true, "liveSassCompile.settings.autoprefix": [ "ie >= 6", //ie6以上 "firefox >= 8", "chrome >= 24", "Opera>=10" ], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**" ], "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" }, "liveSassCompile.settings.showOutputWindow": true ] 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
压缩生成min.css文件 "liveSassCompile.settings.formats": [ // More Complex { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" } ] 
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

感觉总体作用不大,还是结合webpack等工具,实时更新页面内容时,实时编译scss,而不需要单独使用该工具。

6.使用webpack编译

在目前主流的前端项目中,一般是使用 Webpack 来构建我们的前端项目,并且大多数都跑在 Node 环境下。

行如下命令安装 sass-loader :

npm install mini-css-extract-plugin -D npm install css-loader -D npm install sass-loader --save-dev 
  • 1
  • 2
  • 3

webpack.config.js


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~ 希望得到建议咨询、商务合作,也请与我们联系01063334945。  分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。  蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

layui表格种单选框中的回显

前端达人

let form = layui.form
        layui.table.render({
            id: 'commanderId',
            elem: '#users-list',
            url: '/team-cpt/competition/findUserByUnitId',
            method: 'post',
            request: {pageName: 'pageNum'},
            where: {cptId: cptId, unitId: unitId,realName:realName,phone:phone},
            parseData: convert2LayuiGrid,
            page: true,
            cols: [[
                {field: 'id', title: 'ID', fixed: 'left', hide: true},
                {type: 'radio', fixed: 'left', width: '10%', hide: false},
                {field: 'realName', title: '姓名', align: 'center', fixed: 'left'},
                {field: 'username', title: '手机号', align: 'center', fixed: 'left'}
            ]],
            done: function (res, curr, count) {
                for (let i = 0; i <res.data.length ; i++) {
                    if (res.data[i].id === commanedrId) {
                        $('div.layui-unselect.layui-form-radio')[i].click()//选中
                        //下面三句是通过更改css来实现选中的效果
                        var index = res.data[i]['LAY_TABLE_INDEX'];
                        // $('tr[data-index=' + index + '] ').addClass('layui-table-click');
                        $('tr[data-index=' + index + '] input[type="radio"]').prop('checked', true);
                        $('tr[data-index=' + index + '] input[type="radio"]').next().addClass('layui-form-radioed');
                        $('tr[data-index=' + index + '] i').addClass('layui-anim-scaleSpring');
                    }
                }
                form.render('radio'); //layui表单中改变属性一定要重新渲染

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~ 希望得到建议咨询、商务合作,也请与我们联系01063334945。  分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。  蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

JavaScript自定义事件广播与订阅

前端达人

昨天写聊天室用到nodejs的event模块,今天也用JavaScript前端的 event写一个,通过一次触发,全局响应,接下来做单页应用,尝试不以传统方式进行事件处理,改为以自定义event进行处理,看看对传统单页应用的与我的想法在实际实施上有什么区别和影响。

<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title></title> </head> <body> <input id="bu1" type="button" value="点我"> <script> //自定义test1事件 var ev1 = new Event('t1', {bubbles: 'true', cancelable: 'true'});
    ev1.aaa='ev1'; //创建event的对象实例。 var ev2 = document.createEvent('HTMLEvents'); // 3个参数:事件类型,是否冒泡,是否阻止浏览器的默认行为 ev2.initEvent('t2', true, true);
    ev2.aaa = 'ev2';

    document.getElementById("bu1").addEventListener('click', function () { document.dispatchEvent(ev1);
        document.dispatchEvent(ev2);
    }, false);

    (function () { document.addEventListener('t1', function (e) { console.log(e.aaa+1);
        }, false); //document上绑定自定义事件oneating document.addEventListener('t2', function (e) { console.log(e.aaa+2);
        }, false);
    })();
    (function () { document.addEventListener('t1', function (e) { console.log(e.aaa+3);
        }, false); //document上绑定自定义事件oneating document.addEventListener('t2', function (e) { console.log(e.aaa+4);
        }, false);
    })();
    (function () { document.addEventListener('t1', function (e) { console.log(e.aaa+5);
        }, false); //document上绑定自定义事件oneating document.addEventListener('t2', function (e) { console.log(e.aaa+6);
        }, false);
    })(); </script> </body> </html>
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

input输入框改变颜色 以及input输入内容更改颜色

前端达人

效果图
在这里插入图片描述
1- 改变input输入框颜色
border: 1px solid pink;
2-改变input输入内容颜色
color: pink;
全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css新增属性值</title>
    <style>
        /* 必须是input元素;但是同时也具备input元素有value这个值    用中括号[]*/
        /* input[value]{
            color:red
        } */

        *{
            padding: 0;
            margin: 0;
        }
        input[type=password]{
            color: pink;
            border: 1px solid pink;
            outline: none;

        }
    </style>
</head>
<body>
    <!--1.利用属性选择器就可以不用借助于类或者id选择器  -->

    <!-- <input type="text" value="请输入你喜欢的人">
    <input type="text"> -->
      <!-- 2.属性选择器还可以选择属性=值的某些元素 -->
      <input type="text">
      <input type="password">

</body>
</html>``` 
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com