您现在的位置是：网站首页> 编程资料编程资料

从一次项目重构说起CSS3自定义变量在项目的使用方法css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2023-10-16 300人已围观

简介 这篇文章主要介绍了从一次项目重构说起CSS3自定义变量在项目的使用方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

关于CSS3变量

声明变量的时候，变量名前面要加两根连词线（--）。

 body{ --color:red; }

上面代码中，body选择器里面声明了一个自定义变量：--color 。

它与color等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做“CSS 自定义属性"（CSS custom properties）——因为变量与自定义的 CSS 属性其实是一回事。
而且，各种值都可以‘放入’CSS变量，CSS变量可以放在‘任何地方’。

当然，类似的介绍网上一搜一堆，我们就暂且不论，进入正题！

但像一些基本应用，比如：全局通用颜色/大小值、网页换肤之类的本文就不予讨论了，大家可自行探索

起因 —— “选项卡”的重构

记得笔者曾为社团官网做过的一个项目中有一个用于宣传的“选项卡”组件：

show1

优C社团自成立以来，举办了大量的活动，用以丰富社团成员的课余生活，达到劳逸结合的目的，事实证明，这样也确实有效。
 比如，
  1. 在母亲节，我们跟随校方一起举办了 “孝·母亲节”活动（视频加载可能有些慢）,并取得了巨大的成功；
  2. 在冬至时，我们跟随校方，以及各宿舍楼一起举办了“冬至包饺子”活动,大家都玩得非常欢乐；
  3. 在闲暇时，我们还积极参与院方举办的“敬老院慰问”活动,体会非凡；
  优C工作室创建于2009年，距今已有年历史。
  经过这些年的发展，本社团出现了各个方向的人才，有PHP、java、JavaWeb、 大数据等等。。。本社团现今主流学习方向为JavaWeb，即后端实现，较偏向于网站的开发。
  社团经常通过相应的交流活动来完成一个项目的开发， 以增进对知识的总结，社员会不定时的参加一些竞赛，并都取得了不错的成绩。

 具体个人规划请扫描右侧弹出二维码询问学长！


虽然伴随着不断地有人加入、退出，但是，优C仍然在这里，等着你们，并且我坚信：优C的未来一定会更加辉煌！
——社长心愿

加入我们，加入优C。
这里，有绝妙的知识体验，脑洞大开的学长学姐，带你探索知识，学习技巧，实操项目，应对面试。
 在这里，有你想象不到的快乐！！！
 .main-left-bottoms{width: 100%;min-height: 280px;margin-top: 10px;} .main-left-bottoms h1{color: orangered;font-style: italic;} .main-left-bottoms #tabs{width: 99%;padding:5px;min-height: 280px;} .main-left-bottoms #tabs ul{list-style:none;display:block;min-height:30px;line-height:30px;border-bottom:2px red solid;} .main-left-bottoms #tabs ul li{cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0 3px;border:2px groove orangered;border-bottom:none;display:inline-block;width:65px;text-align:center;font-weight: bold;color: black;padding: 0 10px;} .main-left-bottoms #tabs ul li.on{border-bottom:2px solid skyblue;} .main-left-bottoms #tabs div{min-height: 199px;line-height:25px;border-top:none;padding:0.3125em;overflow:hidden;} #tabs div p{font-size: 0.838rem;} #tabs div ol li{font-size: 0.875rem;margin-top: 5px;} #tabs div ol li a{color: lightcoral;text-decoration: none;} #tabs div ol li a:hover{color: orange;} .main-left-bottoms .hide{display:none;}

然后通过JS为div点击元素之外的（同级）元素加上类名hide即可，非常简单。

后来学的多了，也越来越重视“用户体验”，想到：如果能让浏览器“记住”用户退出前浏览的地方，不管是页面、tab或者列表？那该多好啊。
于是就尝试「用ajax辅助浏览器state列表」达到了整体页面上的切换保存效果（点击去这里）。这确实是一种好方法，但在我逐步推出了CSS系列文章后，就比较“贪心”了：能不能不用JavaScript就达到这种效果？ —— ::target ！

（这个之后我会再推出专题文章讨论，在这里说总会有些“喧宾夺主”。。。）

再往后，CSS3推出了“自定义变量”属性，正巧碰上官网页面用vue重构，于是想着用CSS3变量把这一块重做一遍吧：

CSS3变量实现tab切换

show2

上面这个看似顺滑的tab切换效果其实很简单（使用vue+scss完成）：
要知道：JS中有3个针对style操作变量的API

  • 读取变量：elem.style.getPropertyValue()
  • 设置变量：elem.style.setProperty()
  • 删除变量：elem.style.removeProperty()
  • 我是内容{{i + 1}}
 .tab-navbar { display: flex; overflow: hidden; border-radius: 10px; width: 300px; height: 200px; nav { display: flex; height: 40px; background-color: #f0f0f0; line-height: 40px; text-align: center; a { flex: 1; cursor: pointer; transition: all 300ms; &.active { background-color: #3c9; color: #fff; } } } div { flex: 1; ul { --tab-index: 0; --tab-width: calc(var(--tab-count) * 100%); --tab-move: calc(var(--tab-index) / var(--tab-count) * -100%); display: flex; flex-wrap: nowrap; width: var(--tab-width); height: 100%; transform: translate3d(var(--tab-move), 0, 0); transition: all 300ms; } li { display: flex; justify-content: center; align-items: center; flex: 1; background-color: var(--bg-color); font-weight: bold; font-size: 20px; color: #fff; } } }

在

    上定义--tab-index表示Tab当前的索引，当点击按钮时重置--tab-index的值，可实现不操作DOM移动
      的位置显示指定的Tab。不操作DOM而可移动
        是因为定义了--tab-move，通过calc()计算--tab-index与--tab-move的关系，从而操控transform:translate3d()移动
          。

           export default { data() { return { index: 0, list: ["#09f", "#f90", "#66f", "#f66"] }; }, methods: { select(i) { this.index = i; this.$refs.tabs.style.setProperty("--tab-index", i); } } };

          另外，在

        • 上定义--bg-color表示Tab的背景色，也是一种比较简洁的模板赋值方式，总比写
        • 要好看一些 —— 若多个属性依赖一个变量赋值，那么使用变量赋值到style上就更方便了，那些属性可在css文件里计算与赋值，这样可帮助JS分担一些属性计算工作，大大提高了渲染性能。

          想来，上面的这一个案例肯定不能过足客官的瘾，那么：

          CSS3自定义变量实现‘另类的’loading加载条

          show3

           

           

           .strip-loading { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; li { --time: calc(var(--line-index) * 200ms); border-radius: 3px; width: 6px; height: 30px; background-color: #f66; animation: beat 1.5s ease-in-out var(--time) infinite; & + li { margin-left: 5px; } } } @keyframes beat { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.5); } }

          var() 计算函数配合自定义变量作为animation动画的delay出现，让每个元素都拥有“自己的”延迟时间 —— CSS3变量大大简化了以前CSS中由 :nth-child(N) 带来的一定程度上的代码冗余。

          炫酷的鼠标移入跟踪特效

          说来也巧，在我写这篇文章之前，恰好有一个社团后端的学长建议搞一个炫酷的button按钮代替原来的提交按钮：

          low

          改后效果大概是这样的：

          show4

          其实当时“第一版”背景颜色用了linear-gradient+animation+hue-rotate，但是学长说太花里胡哨了…嘿嘿，你们可以尝试下

          其实思路也比较简单，先对按钮布局和着色，然后使用伪元素标记鼠标的位置，定义--x和--y表示伪元素在按钮里的坐标，通过JS获取鼠标在按钮上的offsetX和offsetY分别赋值给--x和--y，再对伪元素添加径向渐变的背景色，大功告成，一个酷炫的鼠标悬浮跟踪效果就这样诞生了。

           .track-btn { margin: 0; padding: 0; /*自定义边框*/ border: 0; /*消除默认点击蓝色边框效果*/ outline: none; -webkit-appearence: none; overflow: hidden; position: relative; border-radius: 25px; height: 49.9px; background-color: #66f; cursor: pointer; line-height: 50px; text-align: center; font-weight: bold; font-size: 18px; color: #fff; padding: 0 20px; span { position: relative; pointer-events: none; } &::before { --size: 0; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background-image: radial-gradient(circle closest-side, #09f, transparent); content: ""; transform: translate3d(-50%, -50%, 0); transition: width 200ms ease, height 200ms ease; } &:hover::before { --size: 200px; } }
           const btn = document.getElementsByClassName("track-btn")[0]; btn.addEventListener("mousemove", e => { btn.style.setProperty("--x", `${e.offsetX}px`); btn.style.setProperty("--y", `${e.offsetY}px`); });

          你还可以在此之上添加更加优秀的动画！

          现实&展望

          前面说了：css3变量你可以‘放在’任何地方 —— 事实上，哪怕是“不常为人所知”的 ::root 中，都可以作为单独存放变量的“净土”

           //引用/修改style中的css3变量值 document.documentElement.style.setProperty("名",值)

          值得注意的是：如果你要在css中修改自定义变量，目前建议最好是放到同一个“目标”中！比如：

           #angular { --angular: ""; } #angular:checked { --angular: "angular"; }

          现在大多数网站都会根据页面响应式定义布局中项目之间的默认间距及页面上所有不同部分的默认padding、字体大小甚至排版布局。但很多时候，我们只能通过不同的“外链css文件”切换或者小范围内改变所有相应的属性值。但这会导致一点：在没有到达“下一个“media临界值”之前，总会有一些距离出现“意外”，比如：在某一段document.documentElement.clientWidth || document.body.clientWidth;内，元素之间的间距会很大，但在较小的屏幕上空间不足以承受太多空白而且在之前或之后，其间距又会“突变”。

           :root { --size: 1.5em; } @media (min-width: 30em) { :root { --size: 2em; } } .Container { margin: 0 auto; max-width: 60em; font-size: var(--size); }

          我们还可以在js中监听resize页面大小改变以实时改变 --size 的值，而且变量越多，节省的代码更多。 —— 这在以前只能寄希望于引入scss / less库了。

          自定义属

          上一篇：纯 CSS 实现拖拽效果的代码纯CSS实现左右拖拽改变布局大小

          下一篇：纯CSS实现页面中的列表收拉效果让CSS flex布局最后一行列表左对齐的N种方法(小结)CSS字体、文本、列表属性详细介绍CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现css中有序无序列表项list样式设置方法CSS如何设置列表样式属性(看这篇文章就够用了)css列表滑动防止被底部遮住和适配屏幕长一点的机型处理

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网