一款纯css3实现的发光屏幕旋转特效_html/css

首页

web前端

html教程

一款纯css3实现的发光屏幕旋转特效_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:53 AM

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

在线预览源码下载

实现的代码。

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles