您现在的位置是：网站首页> 编程资料编程资料

css3实例教程 一款纯css3实现的发光屏幕旋转特效css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2023-10-24 363人已围观

简介 今天给大家带来一款纯css3实现的发光屏幕旋转特效。该屏幕由纯css3实现带发光旋转特效，有具体的代码，感兴趣的朋友可以参考下

　　今天给大家带来一款纯css3实现的发光屏幕旋转特效。该屏幕由纯css3实现带发光旋转特效，效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <div class="screen">  
  2.     div>  

　　css3代码：

CSS Code复制内容到剪贴板
  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 

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网