超链接hover切换效果

最新推荐文章于 2024-01-15 20:00:00 发布

a554977639

最新推荐文章于 2024-01-15 20:00:00 发布

阅读量304

点赞数

原文链接：http://www.cnblogs.com/zq635929457/p/4358879.html

版权

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
                <title>css3制作经验hover切换效果</title>
                <style type="text/css">
                        body, html {
                                margin:0; padding:0; overflow:hidden; height:100%; width:100%; background:orange; font-size:12px; } .clear { clear:both; } .container { width:100px; height:100px; position:relative; overflow:hidden; text-shadow:0px 0px 5px orange; text-align:center; line-height:100px; font-size:2rem; float:left; margin-left:20px; margin-top:20px; } .container .before, .container .after { width:100%; height:100%; border-radius:50%; position:absolute; top:0px; left:0px; transition-duration:0.35s; -webkit-transition-duration:0.35s; -moz-transition-duration:1s; -o-transition-duration:1s; } /*默认行为*/ .container .before { background:white; left:0px; color:black; } .container .after { background:black; left:100%; color:#fff; } .container:hover .before { left:-100%; } .container:hover .after { left:0%; } /*demo1 由左而右*/ .container.demo1 .before { left:0px; } .container.demo1 .after { left:-100%; } .container.demo1:hover .before { left:100%; } .container.demo1:hover .after { left:0%; } /*demo2 由上而下*/ .container.demo2 .before { left:0px; } .container.demo2 .after { top:-100%; left:0px; } .container.demo2:hover .before { top:100%; left:0px; } .container.demo2:hover .after { top:0%; } /*demo3 由下而上*/ .container.demo3 .before { left:0px; } .container.demo3 .after { top:100%; left:0px; } .container.demo3:hover .before { top:-100%; left:0px; } .container.demo3:hover .after { top:0%; } /*demo4 扁的由下而上*/ .container.demo4 .before { left:0px; } .container.demo4 .after { top:100%; left:0px; } .container.demo4:hover .before { height:0px; } .container.demo4:hover .after { top:0%; } /*demo5 扁的由上而下*/ .container.demo5 .before { left:0px; } .container.demo5 .after { top:-100%; left:0px; } .container.demo5:hover .before { height:0px; top:100%; } .container.demo5:hover .after { top:0%; } /*demo6 扁的由左而右*/ .container.demo6 .before { left:0px; } .container.demo6 .after { top:0%; left:-100%; } .container.demo6:hover .before { width:0px; left:100%; } .container.demo6:hover .after { left:0%; } /*demo7 扁的由右而左*/ .container.demo7 .before { left:0px; } .container.demo7 .after { top:0%; left:100%; } .container.demo7:hover .before { width:0px; } .container.demo7:hover .after { left:0%; } /*demo8 */ .container.demo8 .before { left:0px; } .container.demo8 .after { left:0%; -webkit-transform:scale(0); } .container.demo8:hover .before { -webkit-transform:scale(0); } .container.demo8:hover .after { -webkit-transform:scale(1); } /*demo9 */ .container.demo9 .before { } .container.demo9 .after { top:100%

转载于:https://www.cnblogs.com/zq635929457/p/4358879.html

a554977639

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超链接hover切换效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1....
复制链接

扫一扫