今天给大家带来一款纯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. ECharts学习总结(五):echarts的Option概览

    注:下面内容摘自echarts官网,原文地址:http://echarts.baidu.com/doc/doc.html#%E9%80%89%E9%A1%B9 option 图表选项,包含图表实例任何 ...

  2. C# 动态装载 DLL

    C# 动态装载 DLL LoadDllTool.cs 如下: using System; using System.Collections.Generic; using System.Text; us ...

  3. 【Linux】Dockerfile，ubuntu默认shell不是bash？RUN source命令报错！

    Dash is not bash 在一些 docker 官方 Image 中,执行一些 .sh 文件的时候遇到了一些奇怪现象,比如: 1 2 3 # Run something like: [[ $A ...

  4. （剑指Offer）面试题42：翻转单词顺序

    题目: 输入一个英文句子,翻转句子中单词的顺序,但单词内字符的顺序不变.为简单起见,标点符号和普通字母一样处理. 例如输入字符串“I am a student.”,则输出"student. ...

  5. Qt 之 QtConcurrent

    本文以 Qt 中的 QtConcurrent::run() 函数为例,介绍如何将函数运行在单独的某一个线程中. 1  QtConcurrent::run() QtConcurrent 是一个命名空间, ...

  6. C++ 之 基础回顾(一)

    1  exe 程序

  7. 利用反射实现JavaBean的自动赋值

    最近开发公司的一个项目,因项目不是很大的项目,所以仅仅采用了spring MVC框架,但是数据库很多表中的字段至少15个,这样当每次将数据库表中的数据取出来放入javabean中时,写setXXX方法 ...

  8. T-SQL 之 公用表表达式（CTE）

    在编写T-SQL代码时,往往需要临时存储某些结果集.在CTE之前常用的两种临时存储结果集为:临时表和表变量.除此之外,还可以使用公用表表达式的方法. 公用表表达式(Common Table Expre ...

  9. QtGui.QFileDialog

    The QtGui.QFileDialog is a dialog that allows users to select files or directories. The files can be ...

  10. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...