标签：add 变化 pad relative pointer style span 外边距 pos
在css中使用伪类虽然实现了样式的改变，但由于没有过渡效果会显得很生硬。以前如果要实现过渡，就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡（transition）功能，就可以从一组样式平滑的切换到另一组样式。
1 <style> 2 .slickButton { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: background 0.5s; 10 -webkit-transition: background 0.5s; 11 } 12 13 .slickButton:hover { 14 color: black; 15 background: yellow; 16 } 17 </style> 18 19 <button class="slickButton">hangge.com</button>
1 <style> 2 .slickButton { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: background 0.5s, color 0.5s; 10 -webkit-transition: background 0.5s, color 0.5s; 11 } 12 13 .slickButton:hover { 14 color: black; 15 background: yellow; 16 } 17 </style> 18 19 <button class="slickButton">hangge.com</button>
如果想要过渡所有的样式，并且希望所有过渡都同步完成，可以在指定属性名的地方填 all。
1 transition: all 0.5s; 2 -webkit-transition: all 0.5s;
1 <style> 2 .slickButton2 { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 opacity: 0.5; 10 transition: opacity 0.5s; 11 -webkit-transition: opacity 0.5s; 12 } 13 .slickButton2:hover { 14 opacity: 1; 15 } 16 </style> 17 <button class="slickButton2">hangge.com</button>
熊猫办公https://www.wode007.com/sites/73654.html
1 <style> 2 .slickButton3 { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: box-shadow 0.5s; 10 -webkit-transition: box-shadow 0.5s; 11 } 12 .slickButton3:hover { 13 box-shadow:5px 5px 10px gray; 14 } 15 </style> 16 <button class="slickButton3">hangge.com</button>
1 <style> 2 .slickButton4 { 3 color: white; 4 font-weight: bold; 5 padding: 10px; 6 border: solid 1px black; 7 background: lightgreen; 8 cursor: pointer; 9 transition: box-shadow 0.5s; 10 -webkit-transition: box-shadow 0.5s; 11 } 12 13 .slickButton4:hover { 14 box-shadow:0px 0px 20px orange; 15 } 16 </style> 17 <button class="slickButton4">hangge.com</button>
CSS3的过渡效果，使用transition实现鼠标移入/移出效果
标签：add 变化 pad relative pointer style span 外边距 pos
原文地址：https://www.cnblogs.com/ypppt/p/13060864.html
