css常用效果实现

时间：2023-03-30 17:03:38 CSS

1.CSS仿实心三角形特效

//实心倒三角.triangle{margin:15px00130px;//调整位置position:absolute;边框：10px纯白色；边框-左颜色：透明；边框底色：透明；border-right-color:transparent;}2.Angular美化原生select的下拉选项样式(空心下拉箭头)

{{name}}.triangle{位置：绝对；//控制位置margin-left:220px;margin-top:10px;.inner-down{//空心下拉箭头width:8px;高度：8px；边框：1px实心#CACFD2；边框宽度：1px1px00；变换：旋转（135度）；底部边距：10px；边距顶部：-5px；}.inner-up{//空心上拉箭头width:8px;高度：8px；边框：1px实心#CACFD2；边框宽度：001px1px;变换：旋转（135度）；底部边距：10px；scroll">

.scroll{//总进度条宽度:70%;height:5px;background:#d9e4e7;position:relative;margin-top:15px;border-radius:5px;}.bar{//控制手柄圆width:20px;height:20px;background:#fff;position:absolute;top:-7px;left:0;cursor:pointer;border-radius:50%;}.mask{//进度position:absolute;left:0;top:0;background:#3498db;width:0;height:5px;border-radius:5px;}-angular6不能通过document对象直接操作page对象！需要以angular特有的方式操作：1.import{ElementRef}from'@angular/core';2.constructor(publicelement:ElementRef){}3.pass**this.element.nativeElement.querySelector('#scroll');操作对象！**videoProgress(){const_that=this;constscroll=this.埃尔ment.nativeElement.querySelector('#scroll');//总进度条constbar=this.element.nativeElement.querySelector('#bar');//按下鼠标时拖动白色小圆圈constmask=this.element.nativeElement.querySelector('#mask');//已经过了的蓝色进度条bar.onmousedown=function(event){//鼠标按下小圆圈事件letbarleft=0;constleftVal=event.clientX-this.offsetLeft;document.onmousemove=function(event2){//鼠标移动事件barleft=event2.clientX-leftVal;如果(barleft<0){barleft=0;}elseif(barleft>scroll.offsetWidth-bar.offsetWidth){barleft=scroll.offsetWidth-bar.offsetWidth;}mask.style.width=barleft+'px';//设置进度条的长度bar.style.left=barleft+'px';//设置小圆圈距离起始位置的长度//当前播放的百分比_that.currentTime=(barleft/(scroll.offsetWidth-bar.offsetWidth))*(_that.getPlayBackTotalTime);//解决几个操作，比如:mouse当光标左键已经弹出时，进度条仍然会随着鼠标来回滑动，会出现类似悬停效果的bug！if(window.getSelection){if(window.getSelection().empty){//Chromewindow.getSelection().empty();}elseif(window.getSelection().removeAllRanges){//Firefoxwindow.getSelection().removeAllRanges();}}}document.onmouseup=function(){//mouseup不做任何操作document.onmousemove=null;}}}4.原生仿视频播放器

.control-wrapper{用户选择：无；高度：40px；行高：40px；宽度：100%；背景色：#000；边框：1px纯灰色；显示：弹性；justify-content:space-between;}/*总进度条*/.scroll{width:75%;高度：6px；背景：#d9e4e7；；位置：相对；保证金：0自动；顶部边距：15px；边界半径：5px；z-index:999;}/*控制手柄圈圈*/.bar{width:15px;高度：15px；背景：#fff；位置：绝对；顶部：-5px；左：0；游标：指针；border-radius:50%;}/*已经走过去的程度*/.mask{position:a绝对的；左：0；顶部：0；背景：#3498db；宽度：0；高度：6px；border-radius:5px;}/*音量进度条*/.scroll_voice{width:100px;高度：6px；背景：#d9e4e7；；位置：相对；保证金：0自动；顶部边距：15px；边界半径：5px；z-指数：999；:15px;高度：15px；背景：#fff；位置：绝对；顶部：-5px；左：0；游标：指针；：绝对；左：0；顶部：0；背景：#3498db；宽度：0；高度：6px；border-radius:5px;}//播放控制进度条函数videoProgress(){letbarleft=0;bar.onmousedown=function（事件）{varevent=event||窗口事件；varleftVal=event.clientX-this.offsetLeft;$('body').on('mousemove',function(){varevent=event||window.event;barleft=event.clientX-左值；如果(barleft<0){barleft=0;}elseif(barleft>scroll.offsetWidth-bar.offsetWidth){barleft=scroll.offsetWidth-bar.offsetWidth;}//拖动进度条，更新进度条样式，记录拖动百分比drag_playPercentdrag_playPercent=parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth)*100);mask.style.width=drag_playPercent+'%';bar.style.left=drag_playPercent+"%";})$('body').on('mouseup',function(){$('body').off();//移除所有事件并解决快速拖动时偶尔出现的悬停错误！...})}}//音量控制进度条函数videoVoiceProgress(){letbarleft=0;bar_voice.onmousedown=function（事件）{varevent=event||窗口事件；varleftVal=event.clientX-this.offsetLeft;$('body').on('mousemove',function(event){varevent=event||window.event;barleft=event.clientX-左值；如果(barleft<0){barleft=0;}elseif(barleft>scroll_voice.offsetWidth-bar_voice.offsetWidth){barleft=scroll_voice.offsetWidth-bar_voice.offsetWidth;}//拖动进度条，更新进度条样式，记录拖动百分比drag_voice_playPercent=parseInt(barleft/(scroll_voice.offsetWidth-bar_voice.offsetWidth)*100);mask_voice.style.width=drag_voice_playPercent+'%';bar_voice.style.left=drag_voice_playPercent+"%";})$('body').on('mouseup',function(){$('body').off();...})}}5.Angular6--实现列表拖动和排序HTML5原生实现拖动并排序//1.设置被拖动元素为可拖动-->设置[draggable]属性//2.设置拖放Elements-->【ondragstart】事件中，通过dataTransfer.setData设置被拖放的元素dragstart(ev:DragEvent,index){ev.dataTransfer.setData('Text',index);//传递被拖放元素索引的索引}//3.设置拖放的目的地-->拖拽的目的地需要在【ondragover】事件中设置　preventDefault允许ittobedroppeddragover(e:Event){e.preventDefault();}//4.Place,resetposition-->[drap]eventtransferstheobjecttothedestinationdrop(e:DragEvent,endIndex){e.防止默认（）；//[dataTransfer.getData]拖动元素所在数组中的索引conststartIndex=e.dataTransfer.getData('Text');consttmp=this.printList[startIndex];this.printList[startIndex]=this.printList[endIndex];//[endIndex]isTheindexvalueofthedestinationthis.printList[endIndex]=tmp;}六.美化原生滚动轴样式

20:13视频1201812180841....m-video-list-wrap每{高度：732px;溢出-y：自动；overflow-x:hidden;}.m-video-list-wrapper::-webkit-scrollbar{/*滚动条整体样式*//*控制y轴滚动轴宽度*/width:8px;/*控制x轴滚动轴的高度*/height:10px;}.m-video-list-wrapper::-webkit-scrollbar-track{/*滚动条内的轨道*/border-radius:0px;background-color:#eee;}.m-video-list-wrapper::-webkit-scrollbar-thumb{/*滚动条内的小方块*/border-radius:5px;背景：rgba(0,0,0,0.2);}

上一篇：【Css】img图片根据宽高较大一方适应容器

下一篇：《进击前端工程师》CSS配色秘笈

css常用效果实现相关文章