css画图「不定时持续更新」

Airy 发布于2019-08-30 15:56 / 1065人阅读

摘要：最近项目有个侧边栏缩放的需求，用箭头按钮控制。不过本人是感觉用起来好理解一些。还有一个我更喜欢，代码更简洁的，个人感觉更加漂亮的，用两个旋转的正方形重叠的，如图参考文档纯实现箭头上下左右的箭头无敌制作上下左右箭头

最近项目有个侧边栏缩放的需求，用箭头按钮控制。借此也查了一些，顺道简单记录下来

1.实心箭头：border

HTML:

CSS:

.arrow{
    display: block;
    border: 10px solid #FFF;
    border-left-color:#F00;
    width:1px;
}

https://blog.csdn.net/u013415...

2.线条箭头：border+transform

HTML:

CSS:

.slide-button{
    width: 18px;
    height: 60px;
    background-color: rgba(191, 152, 115, 0.2);
    position: absolute;
    right: 0;
    top: 40%;
}


.arrow{
    display: inline-block;
    position: relative;
    width: 18px;
    height: 60px;
    margin: 0 auto;
}
.arrow::after{
    display: inline-block;
    content: " ";
    height: 8px;
    width: 8px;
    border-width: 0 2px 2px 0;
    border-color: #bf9873;
    border-style: solid;
    transform: rotate(135deg);
    transform-origin: center;
    transition: transform .3s;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 1px;
}
.arrow:hover{
    transform: rotate(180deg);
    transform-origin: (left, top);
    transition:all .5s ease-in .1s;
}

或是把transform: rotate(135deg)改为transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0)也是可行的，没有详细比较两者区别。不过本人是感觉rotate用起来好理解一些。

3.banner两头的箭头

一个三角形重叠另一个三角形（一个设置颜色，另一个设置为背景色），然后用绝对定位露出一点点的，这样就形成了箭头了。

HTML：

还有一个我更喜欢，代码更简洁的，个人感觉更加漂亮的，用两个旋转45°的正方形重叠的，
如图：

HTML：

CSS：

        *{
            margin:0;
            padding: 0;
        }
 
        .arrowbox{
            width: 30px;
            height: 100px;
            background-color: #ffffd;
            position: relative;
            margin-top: 10px;
        }
 
        .arrow{
            display: block;
            width: 10px;
            height: 10px;
        }
        .right,.left,.top,.bottom{
            position: absolute;
            top:45px;
            left: 0;
        }
        
        .rightarrow1,.rightarrow2{
            border-top:10px transparent dashed;
            border-right: 10px transparent dashed;
            border-bottom: 10px transparent dashed;
            border-left: 10px solid blue;
            position: absolute;
            top: 0;
            left: 0;
        }
        .rightarrow1{
            left: 2px;
            border-left:10px solid blue;
        }
 
        .rightarrow2{
            border-left: 10px solid    #ffffd;
        }
 
        .right{
            left: 6px;
        }
 
        .leftarrow1,.leftarrow2{
            border-top:10px transparent dashed;
            border-right: 10px solid blue;
            border-bottom: 10px transparent dashed;
            border-left: 10px transparent dashed;
            position: absolute;
            top: 0;
            left: 0;
        }
        .leftarrow1{
            left: -2px;
            border-right: 10px solid blue;
        }
        .leftarrow2{
            border-right:10px solid #ffffd; 
        }
        .left{
            left: -4px;
        }
 
        .toparrow1,.toparrow2{
            border-top:10px transparent dashed;
            border-right: 10px transparent dashed;
            border-bottom: 10px solid blue;
            border-left: 10px transparent dashed;
            position: absolute;
            top: 0;
            left: 0;
        }
        .toparrow1{
            top: -2px;
            border-bottom: 10px solid blue;
        }
        .toparrow2{
            border-bottom:10px solid #ffffd; 
        }
        .top{
            left:2px;
        }
 
        .bottomarrow1,.bottomarrow2{
            border-top:10px solid blue;
            border-right: 10px transparent dashed;
            border-bottom: 10px transparent dashed;
            border-left: 10px transparent dashed;
            position: absolute;
            top: 0;
            left: 0;
        }
        .bottomarrow1{
            top: 2px;
            border-top: 10px solid blue;
        }
        .bottomarrow2{
            border-top:10px solid #ffffd; 
        }
        .bottom{
            left:2px;
        }

参考文档：

纯css实现箭头,上下左右的箭头

CSS3 Transform

CSS无敌：制作上下左右箭头

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117559.html

设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

Hanks10100 2019-08-20 14:39 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

MasonEast 2019-08-05 10:50 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

novo 2019-08-01 16:25 评论0 收藏0
JavaScript 工作原理之十－使用 MutationObserver 监测 DOM 变化

摘要：概述是现代浏览器提供的用来检测变化的网页接口。比如通知用户当前所在的页面所发生的一些变化。触发回调前返回最新的批量变化。在函数内部，开始必须使用代码进行检查，确保是我们所监听的动画。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第十章。网络应用...

bbbbbb 2019-08-29 15:40 评论0 收藏0
JavaScript 工作原理之十－使用 MutationObserver 监测 DOM 变化

摘要：概述是现代浏览器提供的用来检测变化的网页接口。比如通知用户当前所在的页面所发生的一些变化。触发回调前返回最新的批量变化。在函数内部，开始必须使用代码进行检查，确保是我们所监听的动画。原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第十章。网络应用...

zone 2019-08-26 12:01 评论0 收藏0