本文主要是介绍网页Css特效知识之有魔力的按钮，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style type="text/css">*{/**号为通配符,此处是设定所有元素共有的样式*/border:solid 1px black;background: black;}.box{/*依然是最大的盒子,放置所有元素*/width: 790px;height: 350px;/*为了使其在网页中央,依然设置为自动*/margin-left: auto;margin-right: auto;margin-top: 50px;}.item{width: 200px;height: 300px;margin: 20px;/*依然设置为浮动,可以去掉试一下,会惨不忍睹*/float: left;padding: 10px;}.pic{/*图片的特效,在鼠标放上去时会有特效,鼠标离开依然会有*/height: 200px;/*若以下两句去掉,则只有在鼠标离开时会有特效*/transition: all 0.8s;transform: rotateZ(360deg) scale(1.2);/*此处解释详见我的博客Css特效知识之相册*/}.pic:hover{transition: all 0.8s;transform: rotateZ(-360deg) scale(1.2);}.btn{margin-top: 20px;height: 50px;width: 200px;position: relative;}.word{color: green;font: "微软雅黑";font-size: 28px;float: left;margin-bottom: 10px;margin-top: 10px;margin-left: 15px;width: 50px;height: 30px;}.allow{height: 20px;width: 26px;float:right;margin-bottom: 20px;margin-top: 20px;margin-right: 20px;}.btn:hover .allow{margin-right: 10px;transition: all 0.6s;}.btn .borderLeft{/*建立一个div,特效由div组成*/width: 2px;/*可以将此处大小改为200px看一下效果*/height: 0px;/*此处两个参数十分重要,一不小心就会混乱*//*可以尝试自己写一写这里的两个参数*//*下面的右下上这三个div的这里的两个参数都不一样,但方法一样*/background: white;position: absolute;color: greenyellow;left: 0px;top: 100px;/*同样上面的这两个参数也比较重要*/transform: rotate(360deg);transition: all 0.6s;}.btn:hover .borderLeft{top: 0;bottom: 0;height: 48px;width: 2px;}.btn .borderRight{width: 2px;height: 0px;background: white;position: absolute;right: 0px;bottom: 200px;transform: rotate(360deg);transition: all 0.6s;}.btn:hover .borderRight{bottom: 0;width: 2px;top: 0;height: 48px;}.btn .borderDown{width: 0px;height: 2px;background: white;position: absolute;right: 400px;bottom: 0px;transform: rotate(360deg);transition: all 0.6s;}.btn:hover .borderDown{right: 0;left: 0;width: 198px;height: 2px;}.btn .borderTop{width: 0px;height: 2px;background: white;position: absolute;color: blue;left: 400px;top: 0px;transform: rotate(360deg);transition: all 0.6s;}.btn:hover .borderTop{color: red;left: 0;right: 0;width: 198px;height: 2px;}</style><body><div class="box"><div class="item"><div class="pic" style="background: url(img/mission.png) no-repeat center;"></div><div class="btn"><div class="word">MISSION</div><img class="allow" src="img/allow.png" /><div class="borderLeft"></div><div class="borderTop"></div><div class="borderRight"></div><div class="borderDown"></div></div></div><div class="item"><div class="pic" style="background: url(img/play.png) no-repeat center;"></div><div class="btn"><div class="word">PLAY</div><img class="allow" src="img/allow.png" /><div class="borderLeft"></div><div class="borderTop"></div><div class="borderRight"></div><div class="borderDown"></div></div></div><div class="item"><div class="pic" style="background: url(img/touch.png) no-repeat center;"></div><div class="btn"><div class="word">TOUCH</div><img class="allow" src="img/allow.png" /><div class="borderLeft"></div><div class="borderTop"></div><div class="borderRight"></div><div class="borderDown"></div></div></div></div></body>
</html>/*网页鼠标放置到按钮会有四道白线从四个方向汇成按钮的边框，同时按钮中小箭头向右移动少许，当鼠标放置到按钮上方图案上时，图片旋转360度。
*/网页鼠标放置到按钮会有四道白线从四个方向汇成按钮的边框，同时按钮中小箭头向右移动少许，当鼠标放置到按钮上方图案上时，图片旋转360度。
下面是网页特效，实际效果比图片中录制效果要快一点，鼠标放在上面三个图标上，图标旋转360°同时图标稍微放大，当鼠标离开时，图标倒转360°恢复原状，同时大小恢复原状。当鼠标放在下面的按钮上时，按钮四周出现四条白色线（div）汇聚成一起形成按钮边框，当鼠标离开时恢复原来状态。
这篇关于网页Css特效知识之有魔力的按钮的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
