溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么用純css3實現(xiàn)的發(fā)光屏幕旋轉特效

發(fā)布時間：2021-07-30 15:36:26 來源：億速云 閱讀：223 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“怎么用純css3實現(xiàn)的發(fā)光屏幕旋轉特效”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用純css3實現(xiàn)的發(fā)光屏幕旋轉特效”吧！

　　今天給大家?guī)硪豢罴僣ss3實現(xiàn)的發(fā)光屏幕旋轉特效。該屏幕由純css3實現(xiàn)帶發(fā)光旋轉特效，效果圖如下：

怎么用純css3實現(xiàn)的發(fā)光屏幕旋轉特效

　　實現(xiàn)的代碼。

　　html代碼：

XML/HTML Code復制內(nèi)容到剪貼板

  1. <div class="screen">  

  2.     </div>  

　　css3代碼：

CSS Code復制內(nèi)容到剪貼板

  1. *{   

  2.     margin: 0;   

  3.     padding: 0;   

  4. }   

  5. *,   

  6. *:before,   

  7. *:after {   

  8.   -webkit-box-sizing: border-box;   

  9.      -moz-box-sizing: border-box;   

  10.           box-sizing: border-box;   

  11. }   

  12. html,body{   

  13.     height: 100%;   

  14. }   

  15. html{   

  16.     background-color: #1d1d1d;   

  17. }   

  18. body{   

  19.     position: relative;   

  20.     margin: 0;   

  21.     padding: 0;   

  22.   transform-style: preserve-3d;   

  23.   

  24.   -webkit-perspective: 500px;   

  25.           perspective: 500px;   

  26. }   

  27.   

  28. /*Screen*/  

  29. .screen{   

  30.     position: absolute;   

  31.     top: 50%;   

  32.     left: 50%;     

  33.     width: 320px;   

  34.     height: 210px;   

  35.     margin-top: -105px;   

  36.     margin-left: -160px;   

  37.   

  38.     border-radius: 8px;   

  39.     box-shadow: 0 0 80px #0caba8;   

  40.     overflow: hidden;   

  41.     z-index: 100000;   

  42.   

  43.     -webkit-animation: screenMove01 2s,   

  44.                        boxShine     2.5s 2s infinite alternate ,   

  45.                        screenMove02 5s infinite alternate linear;   

  46.   

  47.        -moz-animation: screenMove01 2s,   

  48.                        boxShine     2.5s 2s infinite alternate ,   

  49.                        screenMove02 5s infinite alternate linear;   

  50.   

  51.          -o-animation: screenMove01 2s,   

  52.                        boxShine     2.5s 2s infinite alternate ,   

  53.                        screenMove02 5s infinite alternate linear;   

  54.   

  55.             animation: screenMove01 2s,   

  56.                        boxShine     2.5s 2s infinite alternate ,   

  57.                        screenMove02 5s infinite alternate linear;   

  58. }   

  59. .screen::before{   

  60.     display: block;   

  61.     content:"";   

  62.     position: absolute;   

  63.     top: 0;   

  64.     left: 0;   

  65.     width: 320px;   

  66.     height: 210px;   

  67.   

  68.     border-width: 5px;   

  69.     border-style: solid;   

  70.   border-image: -webkit-linear-gradient(to bottombottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1;    

  71.   border-image:    -moz-linear-gradient(to bottombottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1;    

  72.   border-image:      -o-linear-gradient(to bottombottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1;    

  73.   border-image:         linear-gradient(to bottombottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1;    

  74. }   

  75. .screen::after{   

  76.     display: block;   

  77.     content:"";   

  78.     position: absolute;   

  79.     top: 3px;   

  80.     left: 3px;   

  81.     width: 314px;   

  82.     height: 204px;   

  83.   

  84.     border: 3px solid #1d1d1d;   

  85.     border-color:rgba(29,29,29,0.9);   

  86.     border-radius: 5px;   

  87.     background: -webkit-linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);   

  88.   background:    -moz-linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);   

  89.   background:      -o-linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);   

  90.   background:         linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);   

  91.   

  92.   

  93.     -webkit-background-size: 300% 300%;   

  94.      -moz-background-size: 300% 300%;   

  95.          -o-background-size: 300% 300%;   

  96.       -ms-background-size: 300% 300%;   

  97.             background-size: 300% 300%;   

  98.   

  99.   

  100.     -webkit-animation: bgShine 5s  infinite alternate linear;   

  101.        -moz-animation: bgShine 5s  infinite alternate linear;   

  102.            -o-animation: bgShine 5s  infinite alternate linear;   

  103.               animation: bgShine 5s  infinite alternate linear;   

  104. }   

  105. /**/  

  106.   

  107.   

  108.   

  109. /*Animation*/  

  110.   

  111. /*screenMove01*/  

  112. @-webkit-keyframes screenMove01 {   

  113.     0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}   

  114.     100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}   

  115. }   

  116. @-moz-keyframes screenMove01 {   

  117.     0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}   

  118.     100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}   

  119. }   

  120. @-o-keyframes screenMove01 {   

  121.     0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}   

  122.     100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}   

  123. }   

  124. @keyframes screenMove01 {   

  125.     0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}   

  126.     100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}   

  127. }   

  128. /**/  

  129.   

  130.   

  131.   

  132. /*screenMove02*/  

  133. @-webkit-keyframes screenMove02 {   

  134.     0%   {transform: rotateY(-30deg);}   

  135.     100% {transform: rotateY(30deg);}   

  136. }   

  137. @-moz-keyframes screenMove02 {   

  138.     0%   {transform: rotateY(-30deg);}   

  139.     100% {transform: rotateY(30deg);}   

  140. }   

  141. @-o-keyframes screenMove02 {   

  142.     0%   {transform: rotateY(-30deg);}   

  143.     100% {transform: rotateY(30deg);}   

  144. }   

  145. @keyframes screenMove02 {   

  146.     0%   {transform: rotateY(-30deg);}   

  147.     100% {transform: rotateY(30deg);}   

  148. }   

  149. /**/  

  150.   

  151.   

  152.   

  153. /*box shine*/  

  154. @-webkit-keyframes boxShine {   

  155.     0%   {box-shadow: 0 0 50px #0caba8;}   

  156.     100% {box-shadow: 0 0 200px #0caba8;}   

  157. }   

  158. @-moz-keyframes boxShine {   

  159.     0%   {box-shadow: 0 0 50px #0caba8;}   

  160.     100% {box-shadow: 0 0 200px #0caba8;}   

  161. }   

  162. @-o-keyframes boxShine {   

  163.     0%   {box-shadow: 0 0 50px #0caba8;}   

  164.     100% {box-shadow: 0 0 200px #0caba8;}   

  165. }   

  166. @keyframes boxShine {   

  167.     0%   {box-shadow: 0 0 50px #0caba8;}   

  168.     100% {box-shadow: 0 0 200px #0caba8;}   

  169. }   

  170. /**/  

  171.   

  172.   

  173.   

  174. /*bg shine*/  

  175. @-webkit-keyframes bgShine {   

  176.     0%   {-webkit-background-size: 300% 300%;}   

  177.     100% {-webkit-background-size: 100% 100%;}   

  178. }   

  179. @-moz-keyframes bgShine {   

  180.     0%   {-moz-background-size: 300% 300%;}   

  181.     100% {-moz-background-size: 100% 100%;}   

  182. }   

  183. @-o-keyframes bgShine {   

  184.     0%   {-o-background-size: 300% 300%;}   

  185.     100% {-o-background-size: 100% 100%;}   

  186. }   

  187. @keyframes bgShine {   

  188.     0%   {background-size: 300% 300%;}   

  189.     100% {background-size: 100% 100%;}   

  190. } 


感謝各位的閱讀，以上就是“怎么用純css3實現(xiàn)的發(fā)光屏幕旋轉特效”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對怎么用純css3實現(xiàn)的發(fā)光屏幕旋轉特效這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。

AI
助
手