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

在线预览   源码下载

实现的代码。

html代码：

 <div class="screen">

    </div>

css3代码：

*{

    margin:;

    padding:;

}

*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

          box-sizing: border-box;

}

html,body{

    height: 100%;

}

html{

    background-color: #1d1d1d;

}

body{

    position: relative;

    margin:;

    padding:;

  transform-style: preserve-3d;

  -webkit-perspective: 500px;

          perspective: 500px;

}

/*Screen*/

.screen{

    position: absolute;

    top: 50%;

    left: 50%;

    width: 320px;

    height: 210px;

    margin-top: -105px;

    margin-left: -160px;

    border-radius: 8px;

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

    overflow: hidden;

    z-index:;

    -webkit-animation: screenMove01 2s,

                       boxShine     2.5s 2s infinite alternate ,

                       screenMove02 5s infinite alternate linear;

       -moz-animation: screenMove01 2s,

                       boxShine     2.5s 2s infinite alternate ,

                       screenMove02 5s infinite alternate linear;

         -o-animation: screenMove01 2s,

                       boxShine     2.5s 2s infinite alternate ,

                       screenMove02 5s infinite alternate linear;

            animation: screenMove01 2s,

                       boxShine     2.5s 2s infinite alternate ,

                       screenMove02 5s infinite alternate linear;

}

.screen::before{

    display: block;

    content:"";

    position: absolute;

    top:;

    left:;

    width: 320px;

    height: 210px;

    border-width: 5px;

    border-style: solid;

  border-image: -webkit-linear-gradient(to bottom, 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;

  border-image:    -moz-linear-gradient(to bottom, 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;

  border-image:      -o-linear-gradient(to bottom, 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;

  border-image:         linear-gradient(to bottom, 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;

}

.screen::after{

    display: block;

    content:"";

    position: absolute;

    top: 3px;

    left: 3px;

    width: 314px;

    height: 204px;

    border: 3px solid #1d1d1d;

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

    border-radius: 5px;

    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%);

  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%);

  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%);

  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%);

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

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

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

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

            background-size: 300% 300%;

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

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

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

              animation: bgShine 5s  infinite alternate linear;

}

/**/

/*Animation*/

/*screenMove01*/

@-webkit-keyframes screenMove01 {

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

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

}

@-moz-keyframes screenMove01 {

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

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

}

@-o-keyframes screenMove01 {

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

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

}

@keyframes screenMove01 {

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

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

}

/**/

/*screenMove02*/

@-webkit-keyframes screenMove02 {

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

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

}

@-moz-keyframes screenMove02 {

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

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

}

@-o-keyframes screenMove02 {

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

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

}

@keyframes screenMove02 {

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

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

}

/**/

/*box shine*/

@-webkit-keyframes boxShine {

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

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

}

@-moz-keyframes boxShine {

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

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

}

@-o-keyframes boxShine {

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

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

}

@keyframes boxShine {

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

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

}

/**/

/*bg shine*/

@-webkit-keyframes bgShine {

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

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

}

@-moz-keyframes bgShine {

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

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

}

@-o-keyframes bgShine {

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

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

}

@keyframes bgShine {

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

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

}

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/11771

一款纯css3实现的发光屏幕旋转特效的更多相关文章

  1. 一款纯css3实现的鼠标经过按钮特效

    今天再给大家带来一款纯css3实现的鼠标经过按钮特效.这款按钮非常简单,但效果很好,非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div align=&qu ...

  2. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

  3. 一款纯css3实现的条纹加载条

    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...

  4. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  5. 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的！

    关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦  7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用

  6. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  7. 一款纯css3实现的漂亮的404页面

    之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: ...

  8. 一款纯css3实现的动画按钮

    今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览    ...

  9. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

随机推荐

  1. 【转】word排版宏的使用

    原文: https://blog.csdn.net/bruce_shan/article/details/73302756 -------------------------------------- ...

  2. （转）实现AI中LOD优化技术

    LOD(Level Of Detail)是3D渲染中用到的概念,按照wikipedia上的翻译,可以译为“细节层次”,它是一种根据与观察点的距离,来减低物体或者模型的复杂度来提升渲染效率的优化技术,因 ...

  3. javascript代码在线测试

    目前还不可用,有知道的怎么搞的,请告知我下,谢谢! alert("欢迎使用javascript在线测试工具");

  4. 算法笔记_034:大整数乘法（Java）

    目录 1 问题描述 2 解决方案 2.1 蛮力法   1 问题描述 计算两个大整数相乘的结果. 2 解决方案 2.1 蛮力法 package com.liuzhen.chapter5; import ...

  5. 有关WINDOWS XP登录密码的几种方法

    网上关于破解WINDOWS XP登录密码的几种方法很多,但许多根本不行.我现在总结自己试过几种,这几种方法其实均比较菜的,但可行的.WINDOWS XP登录是由SAM 文件管理的,总体来说“山姆大叔” ...

  6. 【BIRT】报表数据导出为PDF显示不全

    正常导出方法 导出结果 从上图可以看出,缺失了一部分 解决问题 那么我们采用以下方法导出即可: 导出结果: 完美解决问题.

  7. 深层神经网络框架的python实现

    概述 本文demo非常适合入门AI与深度学习的同学,从最基础的知识讲起,只要有一点点的高等数学.统计学.矩阵的相关知识,相信大家完全可以看明白.程序的编写不借助任何第三方的深度学习库,从最底层写起. ...

  8. eclipse如何优化构建的速度

    eclipse如何优化构建的速度(Building) - AlanLee(Java) - 博客园 http://www.cnblogs.com/AlanLee/p/5383166.html

  9. c#:无法将类型为“System.DBNull”的对象强制转换为类型“System.String”

    解决办法: 使用转换函数即可: Convert.ToString(要转换的值);

  10. Linux-软件包管理-yum在线安装rz、sz工具

    yum search lrzsz yum方式查询 rpm -q lrzsz rpm方式查询 yum -y install lrzsz 安装 rpm -q lrzsz rpm方式查询 sz下载 rz上传