css3 animation动画如何在鼠标移出之后不让动画立即停止? 5C

https://cloud.baidu.com
图片说明
这个动画为什么在鼠标移出以后,没有立即停止动画,而是接着又运动到初始位置?
要纯css完成啊!

5个回答

animation可以是设置时间,你可以设置在几秒内完成这个动作,对了,这个鼠标移上去触发应该使用的jQuery的animate() 方法,也可以设置完成动作的时间

你可以通过keyframes设置关键帧,你设置50%的时候是一种状态,然后100%的时候又是另一种状态,通过设置一个周期就可以实现这样的效果。具体你看下keyframes是怎么使用的就可以了。

u011500781
vcxiaohan2 请问,‘通过设置一个周期就可以实现这样的效果’怎么设置一个周期,因为我鼠标移入的时候通过keyframes运动起来了,但是我鼠标移出之后就立刻回到初始位置了,而不是像它这样最缓动到初始位置
大约 2 年之前 回复

.img{transition:all 0.9s;-moz-transition:all 0.9s;-webkit-transition:all 0.9s;-o-transition:all 0.9s;}
.img:hover{transform:scale(1.2);-ms-transform:scale(1.2);-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);}

你图里的这个 , 鼠标移动上去的时候 不变的那块是一个img
你看着动的地方是另一个div的css样式控制的 , 我特地给你把代码扒下来了 - -
animation:dot2 1.8s cubic-bezier(.455, .03, .515, .955)
希望可以给分 - -

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js通过触摸事件给元素添加animation动画,在安卓微信浏览器很卡,而且动画延迟很高
js通过添加class类,class类里面写了相应的animation动画,但是事件触发的时候animation动画很卡,而且事件触发后等一会动画才出来。希望懂的人来回答: 1.事件是touchstart (不是click事件的那种300ms的延迟) 2.所有元素都是绝对定位(不会导致layout重绘) 3.没有添加任何延迟函数,animation-delay为0s 4.就算我不添加class类,直接把animation动画写在元素上面,通过事件控制元素显示来触发animation动画也会卡,而且动画延迟照样高 5.建议大家先用安卓手机试验一下再来回答我这个问题
css3 animation手机切换页面效果
css3 animation手机中全屏切换页面效果,页面切换是animation效果,每个页面会有图片和文字当页面中的图片加了animation效果后,在iPhone手机中页面在切换的时候就出现了击穿(上一个页面和下一个页面切换的时候重合了),但在安卓和pc上切换是正常的,求大神来解决下!
css3 定义的动画效果,IE和其他浏览器显示不一致
.magic { animation: magic 1s linear; animation-fill-mode: forwards; } @keyframes magic { 0% { opacity: 1; transform-origin: 50% 0; transform: scale(1, 1); } 50% { opacity: 0.5; transform-origin: 50% 0; transform: translate(275px, -60px) scale(0.5, 0.5); } 100% { opacity: 0; transform-origin: 50% 0; transform: translate(550px, -120px) scale(0, 0); } }
CSS3动画在安卓机卡顿
CSS3动画在安卓机卡顿现象如何解决,而在iOS中很流畅,希望安卓和iOS加载动画达到相同效果
如何解决css3动画在安卓机上卡顿现象
在苹果机上测试css3动画完好流畅,但是安卓机上卡的惨不忍睹,求解决方案
CSS3过渡动画导致图片显示不正常
如题,想制作一个贺年页面。但是过渡动画进行时图片显示不正常。还请各位大牛帮忙指点![图片说明](https://img-ask.csdn.net/upload/201710/23/1508762176_908016.jpg)箭头指出的地方即使图片显示错误的地方![图片说明](https://img-ask.csdn.net/upload/201710/23/1508762221_242547.jpg)另外附上代码: html代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css"/> <title>Happy new year!</title> </head> <body> <div id = "main"> <div id = "test">恭贺新禧</div> <div id = "test-left">&nbsp;&nbsp;新年、新事、新开始、新起点、一定会有新的收获,祝愿各位事事如意,岁岁平安,年年有今日,岁岁有今朝。<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--阡陌 旧时光</div> <div id = "bgm"> <audio src = "bgm/金蛇狂舞.mp3" autoplay loop> 很抱歉,音乐播放功能不支持IE9以下版本的浏览器(如果你能看到这行字说明你的浏览器就是IE9以下的版本......) </audio> </div> </div> </body> </html> CSS代码: @charset "utf-8"; /* CSS Document */ #main{ height :800px; width :100%; background :url(../image/bg3.jpg); background-size: cover; background-position: center; animation: back 30s linear; animation-fill-mode :forwards } #test{ width :400px; height :100px; float :left; margin-top :100px; margin-left :50px; color :#FFF; font-size :100px; line-height :100px; text-align :center; } #test-left{ width :390px; height :280px; float :left; margin-top :230px; font-size :25px; color :#FFF; animation: move1 3s ease-out .2s; } @keyframes move{ 0%{ margin-left :0; } 100%{ margin-left :50px; } } @keyframes move1{ 0%{ margin-top :300px; }100%{ margin-top :230px; } } @keyframes text{ 0%{ opacity :1; }100%{ opacity :0; } } @keyframes back{ 0%{ background :url(../image/bg.jpg); }50%{ background :url(../image/bg2.jpg); }100%{ background :url(../image/bg3.jpg); } }
css3的animation的animation-play-state问题
http://i.maka.im/pcviewer/T_EEGEQYFL?mode=storeTemplate&ts=1470395808 这个网址里面,他里面所有的div动画都用animation的running和pasued控制的。 ![图片说明](https://img-ask.csdn.net/upload/201608/05/1470397261_785487.png) 但是我自己写了一个demo的时候,,从pasued变到running却没有效果,他只有重新加载一次动画效果。下面是我的自己写的demo. ``` <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/animate.css"> <style> .aa,.bb{ width: 300px; height: 300px; border:1px solid #ddd; } .a1{ width: 100px; height: 100px; background: #ddd; } .a2{ width: 100px; height: 100px; background: #f00; } .bb .b1,.bb .b2{ width: 100px; height: 100px; } .b1{ background: #000; } .b2{ background: #dd0; } </style> </head> <body> <div class="aa"> <div class="a1 fadeInDown animated"> </div> <div class="a2 fadeInDown animated"> </div> </div> <div class="bb"> <div class="b1 fadeInDown animated"> </div> <div class="b2 fadeInDown animated"> </div> </div> <button id="btn1">11</button> <button id="btn2">22</button> <script type="text/javascript" src="js/jquery.min.js"></script> <script> $("#btn1").click(function(){ $(".a1").css({ "animation-name":"fadeInDown", "-webkit-animation-play-state":"running" }); $(".a2").css({ "animation-name":"fadeInDown", "-webkit-animation-play-state":"running" }); $(".b1").css({ "animation-name":"fadeInDown", "-webkit-animation-play-state":"paused" }); $(".b2").css({ "animation-name":"fadeInDown", "-webkit-animation-play-state":"paused" }); }); $("#btn2").click(function(){ $(".a1").css({ "animation-name":"fadeInDown", "-webkit-animation-play-state":"paused" }); $(".a2").css({ "animation-name":"fadeInDown", "-webkit-animation-play-state":"paused" }); $(".b1").css({ "animation-name":"fadeInDown", "-webkit-animation-play-state":"running" }); $(".b2").css({ "animation-name":"fadeInDown", "-webkit-animation-play-state":"running" }); }) </script> </body> </html> ```
css切图加动画出现的问题
``` #content-slide-3 .fourth_liubian{ width:1282px; height:1038px; position:absolute; z-index:8; top:0px; left:-320px; background-color:white; -webkit-clip-path:polygon(320px 0px,961px 0px,1282px 555px,961px 1038px,320px 1038px,0px 555px); transform-origin:641px 555px; animation:8s fourth_liubian4 forwards; -webkit-animation:18s fourth_liubian4 forwards; -moz-animation:8s fourth_liubian4 forwards; -o-animation:8s fourth_liubian4 forwards; } @-webkit-keyframes fourth_liubian4{ 0%{ transform:scale(1,1) rotate(0deg); } 100%{ transform:scale(0,0) rotate(360deg); } } <div id="content-slide-3"> <div class="fourth_liubian"></div> </div> ``` 请运行以下代码,需求:做一个正六边形,并且给正六边形添加动画,动画效果为正六边形进行缩小的同时进行旋转。出现的问题:切出来的正六边形不添加动画效果时是正常的,但是添加动画效果后,动画效果播放的过程中正六边形的周围会出现一些个不正常的图片干扰,而且每次刷新出现的东西不一样,当动画播放完毕后,图片又回到正常状态。求解答 ps:求另一种切正六边形的方法,要整体的正六边形,拼接的不要,谢谢
图片轮播触发CSS3动画 求解答
就是 有三个图片轮播,每轮播一次触发当前div里面的css3动画 求解答
关于CSS3动画的一段JS代码问题
下面的jquery代码部分,$('.next')的click事件是没问题的,$('.prev')事件里执行到第3次点击就出问了,然后我把里面的animation4换成animation1,animation3换成animation2就是没问题的,CSS3的代码我也贴出来了,我实在看不出这几个animation有什么错,求大神解答!! ``` <div class="header"> <div class="logo"> <img src="images/logo.png" alt=""> </div> <div class="ss-bar hidden-lg hidden-md"></div> <div class="bar col-lg-4 visible-lg visible-md"> <ul> <li><a href="">长城会</a></li> <li><a href="">会员网络</a></li> <li><a href="">GMIC</a></li> <li><a href="">联系我们</a></li> </ul> </div> </div> <div class="banner"> <div id="carousel1" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel1" data-slide-to="0" class="active"></li> <li data-target="#carousel1" data-slide-to="1"></li> <li data-target="#carousel1" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/1.jpg"> </div> <div class="item"> <img src="images/2.jpg"> </div> <div class="item"> <img src="images/3.jpg"> </div> </div> </div> <div class="s1"> <b>啊啊啊啊啊啊啊啊啊啊啊啊啊啊</b> </div> <div class="s1"> <b>呃呃呃呃呃呃呃呃呃额</b> </div> <div class="s1"> <b>滴答滴答滴答滴答滴答滴答滴答滴答</b> </div> <a href="javascript:;" class="prev">&lt;</a> <a href="javascript:;" class="next">&gt;</a> </div> ``` ``` $('.s1').eq(1).css('display', 'none'); $('.s1').eq(2).css('display', 'none'); $('.s1').eq(0).addClass('animation2'); var nowslide = 0; var animateflag = true; var temp1; $('.next').click(function(event) { if(animateflag){ animateflag = false; $('.s1').eq(nowslide).removeClass('animation1'); $('.s1').eq(nowslide).removeClass('animation2'); (nowslide >= 2) ? temp1=0:temp1=(nowslide + 1); $('.s1').eq(temp1).css('display', 'block'); $('.s1').eq(nowslide).addClass('animation1'); nowslide = nowslide + 1;if(nowslide >= 3) nowslide = 0; setTimeout(function(){$('#carousel1').carousel('next');},850); setTimeout(function(){$('.s1').eq(temp1).addClass('animation2').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){animateflag = true;});},1300); } }); $('.prev').click(function(event) { if(animateflag){ animateflag = false; $('.s1').eq(nowslide).removeClass('animation4'); $('.s1').eq(nowslide).removeClass('animation3'); (nowslide <= 0) ? temp1=2:temp1=(nowslide - 1); $('.s1').eq(temp1).css('display', 'block'); $('.s1').eq(nowslide).addClass('animation4'); nowslide = nowslide - 1;if(nowslide <= -1) nowslide = 2; setTimeout(function(){$('#carousel1').carousel('prev');},850); setTimeout(function(){$('.s1').eq(temp1).addClass('animation3').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){animateflag = true;});},1300); } }); ``` ``` .animation1 { animation: animation1 .6s linear forwards; } .animation2 { animation: animation2 .6s linear forwards; } .animation3 { animation: animation3 .6s linear forwards; } .animation4 { animation: animation4 .6s linear forwards; } @keyframes animation1 { 0% { left: 20%; } 60% { left: 19%; } 100% { left: -40%; } } @keyframes animation2 { 0% { left: 100%; } 55% { left: 90%; } 100% { left: 20%; } } @keyframes animation3 { 0% { left: -40%; } 60% { left: -39%; } 100% { left: 20%; } } @keyframes animation4 { 0% { left: 20%; } 55% { left: 30%; } 100% { left: 100%; } } ```
CSS动画,如何实现当滚轮滚动到当前页面显示
CSS动画,如何实现当滚轮滚动到当前页面显示时,进行显示这个页面,并且是动态显示,也就是将两个图片合并到一起,然后显示出来,具体来说就是一张很长的界面,当一部分出现在用户能够看到的屏幕中时就动态的显示动画,当图片滚出屏幕时,动态的消失
css3动画第一次总卡顿?
目前webapp 开发中要实现动画交互 translate3d 应该是最流程的了, 但是貌似有个问题:比如一个从左侧滑出的侧边栏,在动画第一次执行的时候总有点卡顿,当你来来回回多滑几次它就顺畅了。。。?不知道什么原因! 之前我是想 会不会是因为 刚开始浏览器并没留意到这个元素接下来的动画,然后你来回滑几次后他留意了(也就是translate3d 骗浏览器加速了),所以后面顺畅了, 但是我在加上will-change并没什么改善,第一次还是卡顿。 望知乎大神们能给指点指点。 另外webapp 性能着实是差,苹果几乎可以忽略,但是较差的andeoid简直没法直视,卡的像小时候看 劣质 vcd 一样,不知道还有没有优化办法。。。。? ps: 知乎提了这个问题万年后预览才8,5次是我自己,看CSDN了!感谢各位大神的回答
鼠标移入然后正方体向左转90度的3D的效果
我想写一个鼠标移入然后这个正方体会向左转90度的3D的效果,也就是把它原本在右边的那个面变成正对我的,请问怎么写,css3的3D我不太会啊
问一个关于css3的动画方面的问题
代码如下: ``` <!doctype html> <html> <head> <meta charset="gb2312"> <title>动画</title> <style> body{ margin:0px; padding:opx; } header{ text-align:center; } .act_content{ } .mod_style{ position:absolute; top:716px; left:200px; width:870px; heigth:560px; } .haha{ position:absolute; top:0; left:0; width:600px; height:450px; display:block; background:url("头像.jpg") 0px 0px no-repeat; } .haha1{ background-positoin:0 0; top:100px; left:72px; } .haha2{ background-positoin:0 -115; top:39px; left:242px; } .haha3{ background-positoin:0 -215; top:71px; left:452px; } .shake1{ -webkit-animation-duration:2.5s; } .shake2{ -webkit-animation-duration:3.5s; } .shake3{ -webkit-animation-duration:1.5s; } .box{ width:400px; margin:100px auto; animation:rotate 4s linear infinite; animation-delay:2s; } .shake1,.shake2,.shake3{ -webkit-animation-iteration-count:infinite; -webkit-animation-name:shake; -webkit-animation-timing-function:ease-in-out; } @-webkit-keyframes shake{ 0%{ -webkit-transform:rotate(0deg); -webkit-transform-origin:50% 0; } 25%{ -webkit-transform:rotate(90deg); -webkit-transform-origin:50% 0; } 50%{ -webkit-transform:rotate(180deg); -webkit-transform-origin:50% 0; } 75%{ -webkit-transform:rotate(240deg); -webkit-transform-origin:50% 0; } 100%{ -webkit-transform:rotate(360deg); -webkit-transform-origin:50% 0; } } img{ width:100%; display:block; } @-webkit-keyframes rotate{ 0%{ transform:rotate(0deg); } 25%{ transform:rotate(90deg); } 50%{ transform:rotate(180deg); } 75%{ transform:rotate(240deg); } 100%{ transform:rotate(360deg); } } footer{ text-align:right; font-size:20px; color:blank; > } </style> </head> <body> <header>世界就这么大!</header> <div class="act_content"> <div class="mod_style"> <p>loli</p> <span class="haha haha1 shake1"></span> <span class=" haha haha2 shake2"></span> <span class="haha haha3 shake3"></span> </div> </div> <div class="box"> <img src="图片.png"> </div> </div> <footer> &copy 你的世界 </footer> </body> </html> ``` 请问下面的代码的意思,请解释一下: .haha1{ background-positoin:0 0; top:100px; left:72px; } .haha2{ background-positoin:0 -115; top:39px; left:242px; } .haha3{ background-positoin:0 -215; top:71px; left:452px; } 这里的background-position和top left请解释一下到底是什么,如果可以的话可以画张图解释一下,谢谢
js加css3实现动画问题。。
第一个:::: function slideList(){ var downY = 0; var step = 1/4; var nowIndex = 0; var nextorprevIndex = 0; $li.on('touchstart',function(ev){ var touch = ev.originalEvent.changedTouches[0]; downY = touch.pageY; nowIndex = $(this).index(); $li.on('touchmove',function(ev){ var touch = ev.originalEvent.changedTouches[0]; $(this).siblings().hide(); if( touch.pageY < downY ){ //↑ nextorprevIndex = nowIndex == $li.length-1 ? 0 : nowIndex + 1; $li.eq(nextorprevIndex).css('transform','translate(0,'+(viewHeight + touch.pageY - downY)+'px)'); } else if( touch.pageY > downY ){ nextorprevIndex = nowIndex == 0 ? $li.length-1 : nowIndex - 1; $li.eq(nextorprevIndex).css('transform','translate(0,'+(-viewHeight + touch.pageY - downY)+'px)'); } $li.eq(nextorprevIndex).show().addClass('zIndex'); $(this).css('transform','translate(0,'+(touch.pageY - downY)*step+'px) scale('+(1-Math.abs(touch.pageY - downY)/viewHeight*step)+')'); }); $li.on('touchend',function(ev){ var touch = ev.originalEvent.changedTouches[0]; if( touch.pageY < downY ){ $(this).css('transform','translate(0,'+(-viewHeight * step)+'px) scale('+(1-step)+')'); } else if( touch.pageY > downY ){ $(this).css('transform','translate(0,'+(viewHeight * step)+'px) scale('+(1-step)+')'); } $(this).css('transition','.3s'); $li.eq(nextorprevIndex).css('transform','translate(0,0)'); $li.eq(nextorprevIndex).css('transition','.3s'); }); }); $li.on('transitionEnd webkitTransitionEnd',function(ev){ resetFn(); }); function resetFn(){ $li.css('transition',''); $li.eq(nextorprevIndex).removeClass('zIndex').siblings().hide(); } } 第二个;;:: function slideList(){ var downY=0; var step=1/4; var nowIndex=0; var nextIndex=0; $li.on('touchstart',function(ev){ var touch = ev.originalEvent.changedTouches[0]; nowIndex=$(this).index(); downY=touch.pageY; $li.on('touchmove',function(ev){ var touch = ev.originalEvent.changedTouches[0]; $(this).siblings().hide(); if(downY>touch.pageY){ nextIndex= nowIndex == $li.length-1 ? 0 : nowIndex+1; $li.eq(nextIndex).css('transform','translate(0,'+(viewHeight + touch.pageY - downY)+'px'); }else if(downY<touch.pageY){ nextIndex=nowIndex==0 ? $li.length-1 : nowIndex-1; $li.eq(nextIndex).css('transform','translate(0,'+(-viewHeight+touch.pageY-downY)+'px'); } $li.eq(nextIndex).show().addClass("zIndex"); $(this).css('transform','translate(0,'+(touch.pageY-downY)*step+'px) scale('+(1-Math.abs(touch.pageY-downY)/viewHeight*step)+')'); }) $li.on('touchend',function(ev){ var touch = ev.originalEvent.changedTouches[0]; if(downY>touch.pageY){ $(this).css('transform','translate(0,'+(-viewHeight*step)+'px) scale('+(1-step)+')'); }else if(downY<touch.pageY){ $(this).css('transform','translate(0,'+(viewHeight*step)+'px) scale('+(1-step)+')'); } $(this).css('transition','0.3s'); $li.eq(nextIndex).css('transform','translate(0,0)'); $li.eq(nextIndex).css('transition','0.3s'); }) }) $li.on('transitionEnd webkitTransitionEnd',function(ev){ reswtFn(); }) function reswtFn(){ $li.css('transition',''); $li.eq(nextIndex).removeClass('zIndex').siblings().hide(); } } 效果为什么第二个不行????????第一个可以???????、
安卓机微信浏览器中CSS动画执行卡顿,怎么解决?
移动端web页面,有CSS动画,IOS微信中打开页面,动画执行效果很好,可是安卓机打的页面,CSS动画执行有卡顿,怎么解决
Javascript获取有CSS动画的标签的属性值
//CSS中的动画: @keyframes move{ 0% {left:0px;} 100% {left:100px;} } //CSS样式: .move1{ width:100px; height:100px; animation:move 1000ms; -webkit-animation:move 1000ms } //div标签: div id="1" class="move1" ---------- 或者 .move2{ width:100px; height:100px; transform:translate(100px,0px); /*x轴移动100px,y轴0px*/ -webkit-transform:translate(100px,0px); transition: transfrom 1s; -webkit-transition: -webkit-transform 1s; } //div标签: div id="1" class="move2" ---------- 请问我该如何在Javascript中获取div标签在动画移动中的left属性? 直接documen.getElementById("1").style.left不行 webkit内核不支持currentStyle,getComputedStyle还没有试 CSS中的动画是怎么样的一个原理呢? 还请各位提供解决问题的办法或者思路 ---------- ps:我是想做一个网页上的小游戏,类似于节奏大师那种,就是一个一个方块移动到底部时按下对应的按钮完成得分,现在就是不知道怎么解决 如何知道方块到达底部 的问题
css3里3d动画用的多么
如题,正在学前端,3d动画这部分需要着重研究么???!!!!!!!!!
css3写旋转3D方块出问题了
用css3写旋转的方块,思路就是先把两个元素放在容器中,让一个元素的rotateX为0,另一个为-90度,然后在鼠标移入时使容器的rotateX从0变到90deg,现在出现了一个问题就是鼠标移入,父容器怎么都不动,也已经设置了position:relative了。源码如下,css是用less写的。![图片说明](https://img-ask.csdn.net/upload/201706/29/1498742020_847168.png)![图片说明](https://img-ask.csdn.net/upload/201706/29/1498742029_907561.png)![图片说明](https://img-ask.csdn.net/upload/201706/29/1498742041_835152.png)![图片说明](https://img-ask.csdn.net/upload/201706/29/1498742048_649307.png)
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私有的数
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过
Linux(服务器编程):15---两种高效的事件处理模式(reactor模式、proactor模式)
前言 同步I/O模型通常用于实现Reactor模式 异步I/O模型则用于实现Proactor模式 最后我们会使用同步I/O方式模拟出Proactor模式 一、Reactor模式 Reactor模式特点 它要求主线程(I/O处理单元)只负责监听文件描述符上是否有事件发生,有的话就立即将时间通知工作线程(逻辑单元)。除此之外,主线程不做任何其他实质性的工作 读写数据,接受新的连接,以及处...
阿里面试官问我:如何设计秒杀系统?我的回答让他比起大拇指
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图和个人联系方式,欢迎Star和指教 前言 Redis在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在Redis的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸,打败了...
五年程序员记流水账式的自白。
不知觉已中码龄已突破五年,一路走来从起初铁憨憨到现在的十九线程序员,一路成长,虽然不能成为高工,但是也能挡下一面,从15年很火的android开始入坑,走过java、.Net、QT,目前仍处于android和.net交替开发中。 毕业到现在一共就职过两家公司,目前是第二家,公司算是半个创业公司,所以基本上都会身兼多职。比如不光要写代码,还要写软著、软著评测、线上线下客户对接需求收集...
C语言魔塔游戏
很早就很想写这个,今天终于写完了。 游戏截图: 编译环境: VS2017 游戏需要一些图片,如果有想要的或者对游戏有什么看法的可以加我的QQ 2985486630 讨论,如果暂时没有回应,可以在博客下方留言,到时候我会看到。 下面我来介绍一下游戏的主要功能和实现方式 首先是玩家的定义,使用结构体,这个名字是可以自己改变的 struct gamerole { char n
一文详尽系列之模型评估指标
点击上方“Datawhale”,选择“星标”公众号第一时间获取价值内容在机器学习领域通常会根据实际的业务场景拟定相应的不同的业务指标,针对不同机器学习问题如回归、分类、排...
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外...
压测学习总结(1)——高并发性能指标:QPS、TPS、RT、吞吐量详解
一、QPS,每秒查询 QPS:Queries Per Second意思是“每秒查询率”,是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准。互联网中,作为域名系统服务器的机器的性能经常用每秒查询率来衡量。 二、TPS,每秒事务 TPS:是TransactionsPerSecond的缩写,也就是事务数/秒。它是软件测试结果的测量单位。一个事务是指一...
Python爬虫爬取淘宝,京东商品信息
小编是一个理科生,不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具(Python+pycharm2019.3+selenium+xpath+chromedriver)其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple/ 
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
Java工作4年来应聘要16K最后没要,细节如下。。。
前奏: 今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。 以下就是他的简历和面试情况。 基本情况: 专业技能: 1、&nbsp;熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、&nbsp;熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins 3、&nbsp;熟悉Nginx、tomca
2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
点击“技术领导力”关注∆  每天早上8:30推送 作者| Mr.K   编辑| Emma 来源| 技术领导力(ID:jishulingdaoli) 前天的推文《冯唐:职场人35岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯
程序员该看的几部电影
##1、骇客帝国(1999) 概念:在线/离线,递归,循环,矩阵等 剧情简介: 不久的将来,网络黑客尼奥对这个看似正常的现实世界产生了怀疑。 他结识了黑客崔妮蒂,并见到了黑客组织的首领墨菲斯。 墨菲斯告诉他,现实世界其实是由一个名叫“母体”的计算机人工智能系统控制,人们就像他们饲养的动物,没有自由和思想,而尼奥就是能够拯救人类的救世主。 可是,救赎之路从来都不会一帆风顺,到底哪里才是真实的世界?
Python绘图,圣诞树,花,爱心 | Turtle篇
每周每日,分享Python实战代码,入门资料,进阶资料,基础语法,爬虫,数据分析,web网站,机器学习,深度学习等等。 公众号回复【进群】沟通交流吧,QQ扫码进群学习吧 微信群 QQ群 1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle()...
作为一个程序员,CPU的这些硬核知识你必须会!
CPU对每个程序员来说,是个既熟悉又陌生的东西? 如果你只知道CPU是中央处理器的话,那可能对你并没有什么用,那么作为程序员的我们,必须要搞懂的就是CPU这家伙是如何运行的,尤其要搞懂它里面的寄存器是怎么一回事,因为这将让你从底层明白程序的运行机制。 随我一起,来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说,我们首先就要搞明白它是怎么回事,也就是它的内部构造,当然,CPU那么牛的一个东
还记得那个提速8倍的IDEA插件吗?VS Code版本也发布啦!!
去年,阿里云发布了本地 IDE 插件 Cloud Toolkit,仅 IntelliJ IDEA 一个平台,就有 15 万以上的开发者进行了下载,体验了一键部署带来的开发便利。时隔一年的今天,阿里云正式发布了 Visual Studio Code 版本,全面覆盖前端开发者,帮助前端实现一键打包部署,让开发提速 8 倍。 VSCode 版本的插件,目前能做到什么? 安装插件之后,开发者可以立即体验...
破14亿,Python分析我国存在哪些人口危机!
2020年1月17日,国家统计局发布了2019年国民经济报告,报告中指出我国人口突破14亿。 猪哥的朋友圈被14亿人口刷屏,但是很多人并没有看到我国复杂的人口问题:老龄化、男女比例失衡、生育率下降、人口红利下降等。 今天我们就来分析一下我们国家的人口数据吧! 一、背景 1.人口突破14亿 2020年1月17日,国家统计局发布了 2019年国民经济报告 ,报告中指出:年末中国大陆总人口(包括31个
2019年除夕夜的有感而发
天气:小雨(加小雪) 温度:3摄氏度 空气:严重污染(399) 风向:北风 风力:微风 现在是除夕夜晚上十点钟,再有两个小时就要新的一年了; 首先要说的是我没患病,至少现在是没有患病;但是心情确像患了病一样沉重; 现在这个时刻应该大部分家庭都在看春晚吧,或许一家人团团圆圆的坐在一起,或许因为某些特殊原因而不能团圆;但不管是身在何处,身处什么境地,我都想对每一个人说一句:新年快乐! 不知道csdn这...
听说想当黑客的都玩过这个Monyer游戏(1~14攻略)
第零关 进入传送门开始第0关(游戏链接) 请点击链接进入第1关: 连接在左边→ ←连接在右边 看不到啊。。。。(只能看到一堆大佬做完的留名,也能看到菜鸡的我,在后面~~) 直接fn+f12吧 &lt;span&gt;连接在左边→&lt;/span&gt; &lt;a href="first.php"&gt;&lt;/a&gt; &lt;span&gt;←连接在右边&lt;/span&gt; o...
在家远程办公效率低?那你一定要收好这个「在家办公」神器!
相信大家都已经收到国务院延长春节假期的消息,接下来,在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了,相反,对于沟通效率,文件协作,以及信息安全都有着极高的要求。有着非常多的挑战,比如: 1在异地互相不见面的会议上,如何提高沟通效率? 2文件之间的来往反馈如何做到及时性?如何保证信息安全? 3如何规划安排每天工作,以及如何进行成果验收? ......
作为一个程序员,内存和磁盘的这些事情,你不得不知道啊!!!
截止目前,我已经分享了如下几篇文章: 一个程序在计算机中是如何运行的?超级干货!!! 作为一个程序员,CPU的这些硬核知识你必须会! 作为一个程序员,内存的这些硬核知识你必须懂! 这些知识可以说是我们之前都不太重视的基础知识,可能大家在上大学的时候都学习过了,但是嘞,当时由于老师讲解的没那么有趣,又加上这些知识本身就比较枯燥,所以嘞,大家当初几乎等于没学。 再说啦,学习这些,也看不出来有什么用啊!
2020年的1月,我辞掉了我的第一份工作
其实,这篇文章,我应该早点写的,毕竟现在已经2月份了。不过一些其它原因,或者是我的惰性、还有一些迷茫的念头,让自己迟迟没有试着写一点东西,记录下,或者说是总结下自己前3年的工作上的经历、学习的过程。 我自己知道的,在写自己的博客方面,我的文笔很一般,非技术类的文章不想去写;另外我又是一个还比较热衷于技术的人,而平常复杂一点的东西,如果想写文章写的清楚点,是需要足够...
别低估自己的直觉,也别高估自己的智商
所有群全部吵翻天,朋友圈全部沦陷,公众号疯狂转发。这两周没怎么发原创,只发新闻,可能有人注意到了。我不是懒,是文章写了却没发,因为大家的关注力始终在这次的疫情上面,发了也没人看。当然,我...
这个世界上人真的分三六九等,你信吗?
偶然间,在知乎上看到一个问题 一时间,勾起了我深深的回忆。 以前在厂里打过两次工,做过家教,干过辅导班,做过中介。零下几度的晚上,贴过广告,满脸、满手地长冻疮。 再回首那段岁月,虽然苦,但让我学会了坚持和忍耐。让我明白了,在这个世界上,无论环境多么的恶劣,只要心存希望,星星之火,亦可燎原。 下文是原回答,希望能对你能有所启发。 如果我说,这个世界上人真的分三六九等,...
节后首个工作日,企业们集体开晨会让钉钉挂了
By 超神经场景描述:昨天 2 月 3 日,是大部分城市号召远程工作的第一天,全国有接近 2 亿人在家开始远程办公,钉钉上也有超过 1000 万家企业活跃起来。关键词:十一出行 人脸...
Java基础知识点梳理
Java基础知识点梳理 摘要: 虽然已经在实际工作中经常与java打交道,但是一直没系统地对java这门语言进行梳理和总结,掌握的知识也比较零散。恰好利用这段时间重新认识下java,并对一些常见的语法和知识点做个总结与回顾,一方面为了加深印象,方便后面查阅,一方面为了学好java打下基础。 Java简介 java语言于1995年正式推出,最开始被命名为Oak语言,由James Gosling(詹姆
2020年全新Java学习路线图,含配套视频,学完即为中级Java程序员!!
新的一年来临,突如其来的疫情打破了平静的生活! 在家的你是否很无聊,如果无聊就来学习吧! 世上只有一种投资只赚不赔,那就是学习!!! 传智播客于2020年升级了Java学习线路图,硬核升级,免费放送! 学完你就是中级程序员,能更快一步找到工作! 一、Java基础 JavaSE基础是Java中级程序员的起点,是帮助你从小白到懂得编程的必经之路。 在Java基础板块中有6个子模块的学
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合
相关热词 c# 压缩图片好麻烦 c#计算数组中的平均值 c#获取路由参数 c#日期精确到分钟 c#自定义异常必须继承 c#查表并返回值 c# 动态 表达式树 c# 监控方法耗时 c# listbox c#chart显示滚动条
立即提问