纯CSS发光动效

admin管理员组

文章数量:1130349

纯CSS发光动效

纯CSS发光动效-CSS制作logo发光效果

这里是html部分，复制进去就能用很简单

<div class="logo-nav"><a href="#"><img src=".webp?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbTBfNjA5NjUxMTc=,size_14,color_FFFFFF,t_70,g_se,x_16" alt=""><i></i></a></div>

这里是css部分，复制进去就能用

body {background: #fff;font-family: "Arial";background-size: cover;}img{width: 160px;}a {display: inline-block;text-transform: uppercase;text-decoration: none;letter-spacing: 5px;color: #FAFAFA;padding:  5px 5px 0px 5px;position: absolute;left: 150px; /* 调整高度与宽度 */top: 150px;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);background: rgb(0 68 154);-webkit-transition: background 0.15s ease-in-out;-moz-transition: background 0.15s ease-in-out;-ms-transition: background 0.15s ease-in-out;-o-transition: background 0.15s ease-in-out;transition: background 0.15s ease-in-out;}a:hover {background: rgba(252,208,0, 0.6);}i {position: absolute;opacity: 0;top: 0;left: 0;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(1%, rgba(255, 255, 255, 0.03)), color-stop(30%, rgba(255, 255, 255, 0.85)), color-stop(50%, rgba(255, 255, 255, 0.85)), color-stop(70%, rgba(255, 255, 255, 0.85)), color-stop(71%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0)));background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );width: 15%;height: 100%;transform: skew(-10deg, 0deg);-webkit-transform: skew(-10deg, 0deg);-moz-transform: skew(-10deg, 0deg);-ms-transform: skew(-10deg, 0deg);-o-transform: skew(-10deg, 0deg);animation: move 2s;animation-iteration-count: infinite;animation-delay: 1s;-webkit-animation: move 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-delay: 1s;-moz-transform: skew(-10deg, 0deg);-moz-animation: move 2s;-moz-animation-iteration-count: infinite;-moz-animation-delay: 1s;-ms-transform: skew(-10deg, 0deg);-ms-animation: move 2s;-ms-animation-iteration-count: infinite;-ms-animation-delay: 1s;-o-transform: skew(-10deg, 0deg);-o-animation: move 2s;-o-animation-iteration-count: infinite;-o-animation-delay: 1s;}@keyframes move {0% {left: 0;opacity: 0;}5% {opacity: 0.0;}48% {opacity: 0.2;}80% {opacity: 0.0;}100% {left: 82%;}}@-webkit-keyframes move {0% {left: 0;opacity: 0;}5% {opacity: 0.0;}48% {opacity: 0.2;}80% {opacity: 0.0;}100% {left: 82%;}}@-moz-keyframes move {0% {left: 0;opacity: 0;}5% {opacity: 0.0;}48% {opacity: 0.2;}80% {opacity: 0.0;}100% {left: 88%;}}@-ms-keyframes move {0% {left: 0;opacity: 0;}5% {opacity: 0.0;}48% {opacity: 0.2;}80% {opacity: 0.0;}100% {left: 82%;}}@-o-keyframes move {0% {left: 0;opacity: 0;}5% {opacity: 0.0;}48% {opacity: 0.2;}80% {opacity: 0.0;}100% {left: 82%;}}

演示效果地址：手机贴膜教程-贴膜视频-手机膜推荐-贴膜网 logo类似的演示地址，两者代码不一致，但是效果类似。

（图侵删..）

纯CSS发光动效

纯CSS发光动效-CSS制作logo发光效果

这里是html部分，复制进去就能用很简单

<div class="logo-nav"><a href="#"><img src=".webp?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbTBfNjA5NjUxMTc=,size_14,color_FFFFFF,t_70,g_se,x_16" alt=""><i></i></a></div>

这里是css部分，复制进去就能用

body {background: #fff;font-family: "Arial";background-size: cover;}img{width: 160px;}a {display: inline-block;text-transform: uppercase;text-decoration: none;letter-spacing: 5px;color: #FAFAFA;padding:  5px 5px 0px 5px;position: absolute;left: 150px; /* 调整高度与宽度 */top: 150px;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);background: rgb(0 68 154);-webkit-transition: background 0.15s ease-in-out;-moz-transition: background 0.15s ease-in-out;-ms-transition: background 0.15s ease-in-out;-o-transition: background 0.15s ease-in-out;transition: background 0.15s ease-in-out;}a:hover {background: rgba(252,208,0, 0.6);}i {position: absolute;opacity: 0;top: 0;left: 0;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(1%, rgba(255, 255, 255, 0.03)), color-stop(30%, rgba(255, 255, 255, 0.85)), color-stop(50%, rgba(255, 255, 255, 0.85)), color-stop(70%, rgba(255, 255, 255, 0.85)), color-stop(71%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0)));background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );width: 15%;height: 100%;transform: skew(-10deg, 0deg);-webkit-transform: skew(-10deg, 0deg);-moz-transform: skew(-10deg, 0deg);-ms-transform: skew(-10deg, 0deg);-o-transform: skew(-10deg, 0deg);animation: move 2s;animation-iteration-count: infinite;animation-delay: 1s;-webkit-animation: move 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-delay: 1s;-moz-transform: skew(-10deg, 0deg);-moz-animation: move 2s;-moz-animation-iteration-count: infinite;-moz-animation-delay: 1s;-ms-transform: skew(-10deg, 0deg);-ms-animation: move 2s;-ms-animation-iteration-count: infinite;-ms-animation-delay: 1s;-o-transform: skew(-10deg, 0deg);-o-animation: move 2s;-o-animation-iteration-count: infinite;-o-animation-delay: 1s;}@keyframes move {0% {left: 0;opacity: 0;}5% {opacity: 0.0;}48% {opacity: 0.2;}80% {opacity: 0.0;}100% {left: 82%;}}@-webkit-keyframes move {0% {left: 0;opacity: 0;}5% {opacity: 0.0;}48% {opacity: 0.2;}80% {opacity: 0.0;}100% {left: 82%;}}@-moz-keyframes move {0% {left: 0;opacity: 0;}5% {opacity: 0.0;}48% {opacity: 0.2;}80% {opacity: 0.0;}100% {left: 88%;}}@-ms-keyframes move {0% {left: 0;opacity: 0;}5% {opacity: 0.0;}48% {opacity: 0.2;}80% {opacity: 0.0;}100% {left: 82%;}}@-o-keyframes move {0% {left: 0;opacity: 0;}5% {opacity: 0.0;}48% {opacity: 0.2;}80% {opacity: 0.0;}100% {left: 82%;}}

演示效果地址：手机贴膜教程-贴膜视频-手机膜推荐-贴膜网 logo类似的演示地址，两者代码不一致，但是效果类似。

（图侵删..）

本文标签： 纯CSS发光动效