今天给大家带来一款纯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. C++ 相关面试题汇总

    多态性与虚函数 (陈维兴教材) (1)所谓多态性就是不同对象在收到相同的消息时,产生不同的动作.直观的说,多态性是指用一个名字定义不同的函数,这些函数执行不同但又类似的操作,从而可以使用相同的方式来调 ...

  2. （C++）已知String类的定义，实现其函数体

    CString类的定义如下: class CMyString{ public: CMyString(const char* pData=NULL); CMyString(const CMyString ...

  3. 机器学习学习笔记之一：K最近邻算法（KNN）

    算法 假定数据有M个特征,则这些数据相当于在M维空间内的点 \[X = \begin{pmatrix} x_{11} & x_{12} & ... & x_{1M} \\ x_ ...

  4. keepalived 使用注意事项

    1.启动用service keepalived start/stop 比直接 /sbin/keepalived start/stop要好,貌似解决了master停止了keepalived服务而back ...

  5. js Object.is 相等判断

    Object.is使用“Same-value equality”(同值相等)算法进行相等判断.它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致. Object.is('foo', ...

  6. element-ui 源码学习

    https://athena0304.github.io/element-analysis/ 1.模板字符串实现字符串拼接 typeClass() { return `el-alert--${ thi ...

  7. 编程算法 - 从1到n整数中1出现的次数 代码(C)

    从1到n整数中1出现的次数 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 输入一个整数n, 求从1到n这n个整数的十进制表示中1出现的次数. ...

  8. 【BIRT】报表显示不全

    使用BIRT开发了一张报表,预期效果如下 但是开发完成后预览效果如下: 最后的合计竟然没有了,那么怎么处理呢 鼠标点击Layout窗口空白部分,找到布局,切换为自动布局,如下图所示:

  9. 18-spring学习-利用Annotation配置AOP

    之前是通过配置完成aop操作,如果自己写的话,太麻烦了,可以使用基于annotation的配置完成. 第一步:打开AOP的annotation支持 加上一句话: <context:annotat ...

  10. 监听OSGi服务

    方法一:实现ServiceListener接口: package org.riawork.demo.web; import org.osgi.framework.BundleActivator; im ...