CSS3鼠标悬停图片显示文字动画
工具/原料
adobedreamweaver
方法/步骤
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代艨位雅剖码。<divclass="wrap"><div惺绅寨瞀class="tile"><divclass="text"><h1>Loremipsum.</h1><imgsrc="a.png"><h2class="anie-text">Moreloremipsumbaconipsum.</h2><pclass="anie-text">bresao</p><divclass="dots"><span></span><span></span><span></span></div></div></div><divclass="tile"><divclass="text"><h1>Loremipsum.</h1><imgsrc="b.png"><h2class="anie-text">Moreloremipsumbaconipsum.</h2><pclass="anie-text">bresao</p><divclass="dots"><span></span><span></span><span></span></div></div></div><divclass="tile"><divclass="text"><h1>Loremipsum.</h1><imgsrc="c.png"><h2class="anie-text">Moreloremipsumbaconipsum.</h2><pclass="anie-text">bresao</p><divclass="dots"><span></span><span></span><span></span></div></div></div><divclass="tile"><divclass="text"><h1>Loremipsum.</h1><imgsrc="d.png"><h2class="anie-text">Moreloremipsumbaconipsum.</h2><pclass="anie-text">bresao</p><divclass="dots"><span></span><span></span><span></span></div></div></div></div>
4、书写css代码跷孳岔养。body{background-color:#eee;}*{margin:惺绅寨瞀0;padding:0;font-family:"HPE";}.wrap{margin:0auto;width:1000px;max-width:1000px;}.tile{width:400px;height:300px;margin:20px;background-color:#99aeff;display:inline-block;background-size:cover;position:relative;cursor:pointer;transition:all0.4sease-out;box-shadow:0px35px77px-17pxrgba(0,0,0,0.44);overflow:hidden;color:white;}.tileimg{height:100%;width:100%;position:absolute;top:0;left:0;z-index:0;transition:all0.4sease-out;}.tile.text{z-index:99;position:absolute;padding:30px;height:calc(100%-60px);}.tileh1{font-weight:300;text-shadow:2px2px10pxrgba(0,0,0,0.3);}.tileh2{font-weight:100;margin-top:20px;font-style:italic;transform:translateX(200px);}.tilep{font-weight:300;margin-top:20px;line-height:25px;transform:translateX(-200px);transition-delay:0.2s;}
5、书写css3代码。.anie-text{opacity:0;transition:all0.6sease-in-out;}.tile:hover{box-shadow:0px35px77px-17pxrgba(0,0,0,0.64);transform:scale(1.05);}.tile:hoverimg{opacity:0.2;}.tile:hover.animate-text{transform:translateX(0);opacity:1;}.dots{position:absolute;bottom:20px;right:30px;margin:0auto;width:30px;height:30px;color:currentColor;display:flex;flex-direction:column;align-items:center;justify-content:space-around;}.dotsspan{width:5px;height:5px;background-color:currentColor;border-radius:50%;display:block;opacity:0;transition:transform0.4sease-out,opacity0.5sease;transform:translateY(30px);}.tile:hoverspan{opacity:1;transform:translateY(0px);}.dotsspan:nth-child(1){transition-delay:0.05s;}.dotsspan:nth-child(2){transition-delay:0.1s;}.dotsspan:nth-child(3){transition-delay:0.15s;}
6、代码整体结构。
7、查看效果。
