使用CSS3動畫做出光芒萬丈的效果
阿新 • • 發佈：2019-02-08
css程式碼:
/**************************遮罩****************************/ .mui-backdrop { position: fixed; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; } /*遮罩裡面的內容塊*/ .mui-backdrop .backdrop-content { width: 90%; height: auto; background-color: white; position: relative; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; } .mui-backdrop .backdrop-content .mui-icon-close { font-size: 30px; position: absolute; top: -70px; color: white; right: 10px; } /**************************自定義遮罩-結束***********************/ /**********************優惠劵樣式************************/ /*優惠劵的背景色*/ .youhuiquan-one-type { height: 80px; clear: both; margin-top: 7px; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #FEDFA9; } /*.youhuiquan-one-type:first-child { margin-top: 0; background: #FEDFA9; }*/ /*鋸齒效果*/ .sawtooth { /* 相對定位，方便讓before和after偽元素絕對定位偏移 */ position: relative; /* 把超出div的部分隱藏起來 */ overflow: hidden; } .sawtooth:before, .sawtooth:after { content: ' '; width: 0; height: 100%; /* 絕對定位進行偏移 */ position: absolute; top: 10px; } .sawtooth:before { /* 圓點型的border */ border-right: 6px dotted white; /* 偏移一個半徑，讓圓點的一半覆蓋div */ left: -2px; } .sawtooth:after { /* 圓點型的border */ border-left: 5px dotted white; /* 偏移一個半徑，讓圓點的一半覆蓋div */ top: 0px; right: 30px; } .coupon-content-div { display: flex; justify-content: space-between; width: 100%; padding-left: 20px; padding-right: 20px; font-size: 16px; } .coupon-content-div .coupon-money { margin-top: 10px; } .coupon-jianjie { display: flex; flex-direction: column; justify-content: center; align-items: center; } .coupon-img { position: absolute; top: -50px; } .coupon-img img { width: 90%; } .coupon-but-div { position: absolute; bottom: -50px; width: 100%; } .coupon-but-div button { width: 60%; height: 40px; background-color: #FFE838; border-radius: 20px; border: none; color: #F94D39; font-weight: bolder; font-size: 18px; -moz-box-shadow: 2px 5px 17px #333333; -webkit-box-shadow: 2px 5px 17px #333333; box-shadow: 2px 5px 17px #333333; } /**********************優惠劵樣式-結束********************************/ /************************優惠劵彈框樣式**********************/ .touming-sanjiao { position: absolute; right: 0; width: 110%; height: 100%; background: rgba(255, 255, 255, 0.2); -webkit-transform: rotate(-14deg); -webkit-transform-origin: right top; transform: rotate(-14deg); transform-origin: right top; } .coupon-zong-div { margin-top: 130px; background-color: white; border-radius: 10px; width: 90%; height: auto; z-index: 999; } .coupon-list-div { padding: 10px; padding-left: 20px; padding-right: 20px; height: auto; } /**************************優惠劵彈框樣式-結束*****************************/ /**************光芒四射-開始***************/ /* 用來實現動畫的keyframes; 從0度旋轉到360度 */ /* 用來實現動畫的keyframes; 從0度旋轉到360度 */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); /*相容 android低版本*/ transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg);/*相容 android低版本*/ transform: rotate(360deg); } } /* 實現光線輻射效果 */ #rays { /* 表現動畫效果 */ /*使背景圖鋪滿*/ /*background-size: 100%;*/ background: url(images/rays-main.png) no-repeat; background-position: center; background-color: transparent; /*是背景圖居中*/ /*background-color: black;*/ position: absolute; width: 300px; height: 300px; border-radius: 50%; top: 5%; /*相容 android低版本*/ -webkit-animation-name: spin; -webkit-animation-duration: 40000ms; /*相容 android低版本*/ -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-name: spin; animation-duration: 40000ms; animation-iteration-count: infinite; animation-timing-function: linear; } /**************光芒四射-結束***************/
html程式碼
<div id="coupondiv" class="mui-backdrop mui-hidden"> <div id="rays"></div> <div class="backdrop-content"> <div v-on:click="closeCouponfun()" class="mui-icon mui-icon-close"></div> <div class="coupon-img" style="text-align: center;width: 100%;"> <img src="images/coupont_title.png"> </div> <div class="coupon-list-div" style="display: flex;flex-direction: column;margin-top: 20px;"> <div class="youhuiquan-one-type sawtooth"> <div class="coupon-content-div"> <div> <div class="coupon-type"> 商城購物 </div> <div class="coupon-money">¥<span style="font-size: 35px;color: red;">200</span></div> </div> <div class="coupon-jianjie" style="z-index: 1;"> <div style="font-size: 20px;color: black;">發士大夫</div> <div style="color: #545252;margin-top: 10px;">過期時間:2018-20-20</div> </div> </div> <div class="touming-sanjiao"></div> </div> <div class="youhuiquan-one-type sawtooth"> <div class="coupon-content-div"> <div> <div class="coupon-type"> 商城購物 </div> <div class="coupon-money">¥<span style="font-size: 35px;color: red;">200</span></div> </div> <div class="coupon-jianjie" style="z-index: 1;"> <div style="font-size: 20px;color: black;">發士大夫</div> <div style="color: #545252;margin-top: 10px;">過期時間:2018-20-20</div> </div> </div> <div class="touming-sanjiao"></div> </div> <div class="youhuiquan-one-type sawtooth"> <div class="coupon-content-div"> <div> <div class="coupon-type"> 商城購物 </div> <div class="coupon-money">¥<span style="font-size: 35px;color: red;">200</span></div> </div> <div class="coupon-jianjie" style="z-index: 1;"> <div style="font-size: 20px;color: black;">發士大夫</div> <div style="color: #545252;margin-top: 10px;">過期時間:2018-20-20</div> </div> </div> <div class="touming-sanjiao"></div> </div> </div> <div class="coupon-but-div" style="text-align: center;"> <button type="button">一鍵領取</button> </div> </div> </div>