[HTML5&CSS3]发光屏幕旋转特效
2014-12-04 09:31
176 查看
今天给大家带来一款纯css3实现的发光屏幕旋转特效。该屏幕由纯css3实现带发光旋转特效,效果图如下:
在线预览 源码下载
实现的代码。
html代码:
在线预览 源码下载
实现的代码。
html代码:
<div class="screen"> </div>css3代码:
*{ margin: 0; padding: 0; } *, *: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: 0; padding: 0; 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: 100000; -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: 0; left: 0; 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: 0; top: 100%; transform: rotateY(0deg);} 100% {opacity: 1; top: 50%; transform: rotateY(-30deg);} } @-moz-keyframes screenMove01 { 0% {opacity: 0; top: 100%; transform: rotateY(0deg);} 100% {opacity: 1; top: 50%; transform: rotateY(-30deg);} } @-o-keyframes screenMove01 { 0% {opacity: 0; top: 100%; transform: rotateY(0deg);} 100% {opacity: 1; top: 50%; transform: rotateY(-30deg);} } @keyframes screenMove01 { 0% {opacity: 0; top: 100%; transform: rotateY(0deg);} 100% {opacity: 1; 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%;} }
相关文章推荐
- HTML5&CSS3学习
- HTML5&CSS3笔记:流式布局
- HTML5&CSS3经典动态表格
- HTML5&Javascript&JQuery&CSS3之间的关系
- css3 box-shadow阴影(外阴影与外发光)讲解
- 基于CSS3自定义发光radiobox单选框
- CSS3学习——文字描边+外发光
- HTML5&CSS3经典动态表单-2
- [HTML5&CSS3]应用程序缓存
- 盘点2013:最优秀的HTML5&CSS3设计【多图】
- HTML5&CSS3笔记:CSS3过渡、变形和动画
- 纯CSS3发光分享按钮的实现教程
- Image Gallery --- Html5&Css3
- Hello~ HTML5&CSS3 (一): 你好 Canvas
- [HTML5&CSS3]Sunface的HTML5模版私藏库
- HTML5&CSS3练习笔记(一)
- 一款纯css3实现的发光屏幕旋转特效
- CSS3制作炫酷的自定义发光文字
- 盘点2013:最优秀的HTML5&CSS3设计【多图】(摘录)