標籤：style http color os io ar cti div
1、首先腦補一個知識點，我們在代碼中經常看到-webkit或-moz,那這些有什麼作用了，看下代碼就知道了：
-webkit-border-radius: 2px; /*Webkit:Google支援：圓角*/-moz-border-radius: 2px; /*Mozilla:Firefox支援：圓角*/-ms-border-radius: 2px; /*Microsoft:IE9支援：圓角*/-o-border-radius: 2px; /*Opera支援：圓角*/border-radius: 2px; /*圓角*/
2、好了，呼吸燈的原理就是修改標籤的不透明度，主要利用到css3的animation動畫
<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>呼吸燈</title> <style type="text/css"> /* css代碼 */ </style></head><body> <div class="breath_light" title="呼吸線"></div></body></html>
3、css代碼是這樣的：
.breath_light { width: 50px; /* 寬度 */ height: 4px; /* 高度 */ opacity: 0.1; /* 不透明度 */ overflow: hidden; /* 溢出隱藏 */ background: #99dd33; /* 背景色 */ margin: 25% auto; /* 外邊距 */ /* IE10、Firefox and Opera，IE9以及更早的版本不支援 */ animation-name: breath; /* 動畫名稱 */ animation-duration: 3s; /* 動畫時間長度3秒 */ animation-timing-function: ease-in-out; /* 動畫速度曲線：以低速開始和結束 */ animation-iteration-count: infinite; /* 播放次數：無限 */ /* Safari and Chrome */ -webkit-animation-name: breath; /* 動畫名稱 */ -webkit-animation-duration: 3s; /* 動畫時間長度3秒 */ -webkit-animation-timing-function: ease-in-out; /* 動畫速度曲線：以低速開始和結束 */ -webkit-animation-iteration-count: infinite; /* 播放次數：無限 */ } @keyframes breath { from { opacity: 0.1; } /* 動畫開始時的不透明度 */ 50% { opacity: 1; } /* 動畫50% 時的不透明度 */ to { opacity: 0.1; } /* 動畫結束時的不透明度 */ } @-webkit-keyframes breath { from { opacity: 0.1; } /* 動畫開始時的不透明度 */ 50% { opacity: 1; } /* 動畫50% 時的不透明度 */ to { opacity: 0.1; } /* 動畫結束時的不透明度 */ }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
