首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

css3实例教程 一款纯css3实现的发光屏幕旋转特效

Posted in HTML / CSS onDecember 07, 2014

今天给大家带来一款纯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 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. } 
    191. 　

css3实例教程 一款纯css3实现的发光屏幕旋转特效

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 #HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 #HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 #HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 #HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 #HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 #HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 #HTML / CSS
Counter(1) 抖音(1) MIME(1) binlog(2) most_common(1) pip(1) LOGO(1) Xpath(1) 爬虫(2) 写入策略(1)
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
意大利奢侈品购物网站：Giglio
2018/01/05 全球购物
美国顶级水上运动专业店：Marine Products
2018/04/15 全球购物
电气专业应届生求职信
2013/11/01 职场文书
护理专业自荐信
2013/12/03 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
2015年路政工作总结
2015/05/22 职场文书
springcloud整合seata
2022/05/20 Java/Android