分享一些可能用到的原生前端CSS的例子，不如进来看看吧？

时间：2023-04-02 15:50:47 HTML

前言今天分享一些原生CSS或者CSS+JS的实用例子。这些例子比较简单，但是在实际开发中都有可能遇到。相信对一些童鞋还是有帮助的~css时间轴效果时间轴是一个很常见的效果，我们可以通过css的相对定位和绝对定位来实现，期间我们可以根据实际情况调整各个属性的值发展。以满足需求。效果：代码：HTML2020-05-1319:11

divclass="message_item">2020-05-1319:10

CSS。message_item{高度：145px;宽度：300px；左填充：12px；左边框：1pxsolid#979797；位置：相对；}.message_time{高度：17px；行高：17px；字体大小：12px；底部边距：12px；}.message_circle{位置：绝对；宽度：8px；高度：8px；背景色：#547ABD；边界半径：50%；左：-4px；顶部：5px；要实现，我们可以使用CSS伪类和CSS3的transform属性来实现。第一个HTMLCSS.box{width:200px;高度：80px；背景：#E3EAF4；位置：相对；}.box::after{内容：'';高度：12px；宽度：12px；-webkit变换：旋转（45度）；变换：旋转（45度）；顶部：-4px；左：20px；修改classCSS.box{width:200px;中的第二个HTML高度：80px；位置：相对；边框：1px实心#E3EAF4；背景色：#ffffff；}.box::after{内容：'';高度：12px；宽度：12px；-webkit变换：旋转（45度）；变换：旋转（45度）；顶部：-8px；左：20px；位置：绝对；背景色：#ffffff；边框：1px实心#E3EAF4；底部边框：无；border-right:none;}以上两个其实就是设备背景色和border设置的区别。前面的时间线和信息框可以结合起来完成一个完整信息时间线的例子。CSSVolumeBallEffect这里的波浪效果参考了chokcoco大佬的文章，纯CSS实现波浪效果！效果HTML40%CSS.box{高度：500px；填充顶部：100px；padding-left:200px;}.circular{height:100px;宽度：100px；边框：2px实心#4682B4；边界半径：50%；隐;框大小：边框框；位置：相对；}.num{位置：绝对；左：50%；顶部：50%；z-指数：30；;}.content{位置：绝对；高度：30px；宽度：100px；背景：#4682B4；底部：0px;}.content::after,.content::before{content:"";400像素；高度：400px；顶部：0；左：50%；背景色：rgba(255,255,255,.7)；边界半径：40%42%40%41%；转换：翻译（-50%，-100%）r大手笔（0）；动画：旋转8s线性无限；z-index:10;}.content::after{边界半径:42%40%41%40%;背景色：rgba(255,255,255,.9)；变换：平移（-50%，-100%）旋转（0）；动画：旋转8s线性-5s无限；z-index:20;}@keyframesrotate{50%{transform:translate(-50%,-103%)rotate(180deg);}100%{变换：平移(-50%,-100%)旋转(360deg);}}容量球内体积的高度就是.content的div的高度，波浪的幅度和波浪的滚动速度可以通过设置属性的值来实现。在实际使用中，我们基本上只需要动态设置.content的高度就可以实现不同容量的显示。移动端抽屉式导航移动端导航有很多种，抽屉式导航是比较常见的一种。下面我们结合javascript和css实现移动端抽屉导航的效果：HTML

首页文章ArchiveCSS抽屉导航核心是通过css3的transition实现导航栏高度的过渡；还需要注意的是，虽然父元素的高度发生了变化，但是如果子元素的高度固定或者有内容，布局还是会受到影响。所以我们要将父元素的溢出设置为隐藏，这样子元素就不会打开父元素了。#root{宽度：100%；高度：400px；边距顶部：100px；背景：#cccccc；}*{边距：0；填充：0；}li{列表样式：无；}.box{宽度：400px；边框：1px实心#eeeeee；高度：100%；保证金：0自动；背景：#ffffff；}.btn-box{宽度：100%；高度：60px；显示：弹性；证明内容：flex-end；对齐项目：居中；border-bottom:1pxsolid#cccccc;}.btn{height:40px;宽度：40px；显示：弹性；弹性方向：列；弹性包装：包装；证明内容：周围空间；边框：无；背景：#ffffff；大纲：无；}.btn跨度{显示：内联块；高度：4px；宽度：30px；背景：#2b2b2b；}.content-box{高度：0；border-bottom:1pxsolid#dddddd;背景：#cccccc；溢出：隐藏；/*让子元素不能抖开父亲元素*/transition:heightease-out.3s;-webkit-transition:heightease-out.3s;/*Safari*/}.content-li{padding:5px10px;马尔杜松子酒底部：20px；字体大小：20px;}.active{背景：#ffffff;}JavaScriptletbtn=document.getElementById("btn");letnav=document.getElementById("content-box");letcontentLi=document.getElementsByClassName("content-li");lethide=true;letlength=contentLi.length;/***实现导航栏抽屉*/btn.addEventListener('click',function(){if(hide){nav.style.height="200px";hide=false;}else{nav.style.height="0";hide=true;}});/***导航选择效果*/for(leti=0;i

上一篇：前端开发应该知道的网站

下一篇：TP5整合阿里云OSS上传文件第二节,异步上传头像(下)

分享一些可能用到的原生前端CSS的例子，不如进来看看吧？相关文章