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

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

<div class="logo-nav"><a href="#"><img src="https://img-blog.csdnimg.cn/2f4abdc900ac470c97dc044af7f3e8ed.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制作logo发光效果相关推荐

CSS-动效纯css粒子动效 | 转圈圈 | 上下弹动
文章目录粒子动效转圈圈上下弹动粒子动效拾人牙慧,主要是利用css的box-shadow属性,设置便宜点位,然后加上animation属性失效的效果. PS:实际使用中发现如果屏幕尺寸很宽的话 ...
html与css结合动效案例,写CSS动效的常用套路(附demo的效果实现与源码）
作者:alphardex https://juejin.im/post/5e070cd9f265da33f8653f0 前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗. 1.交 ...
关于css hover动效边缘触发频繁闪动的解决方案
问题描述最近做一个官网,里面的动效比较多,也遇到了很多问题.便一点点的收录下来.今天遇到的问题如下图当鼠标触发到边缘时,就会频繁切换hover 和非hover状态,就出现了如图的一上一下的局面 ...
网页精美动效/动画制作按钮鼠标悬浮动效的注意点 02《炫彩网页 iVX 无代码动效/动画制作》
一.按钮动效的使用在上一节中,我们创建了一个动效,但是并没有使用,在此我们给按钮设置一个悬浮事件,当鼠标悬浮在按钮之上后就调用该动效,点击按钮添加事件: 点击按钮添加事件后将会出现一个事件编辑框,在 ...
html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...
html的css雪花动效,《前端每日实战》第171号作品：用纯 CSS 绘制一朵美丽的雪花...
昨夜北京下了大雪,让我们用 CSS 绘制一朵雪花,迎接这洁白美好的世界吧! 一.效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 二.源代码下载每日 ...
游戏UI特效教程章鱼学院UI动效基础课（68课）
本文包含两大单元:展示类动效原型单元,可交互动效原型单元. 在展示类动效单元中,我们会着重利用AE这款软件,由浅入深的,对三个案例进行学习并制作.通过学习这个单元的知识,大家可以掌握UI动效中,AE基 ...
前端读者 | 前端用户体验-UI动效设计
本文来自互联网 @羯瑞整理 UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的. 动效呈现出状态切换的过程,展现了元素之间的逻辑关系, ...
UI设计师必备技能是什么常见动效类型有哪些
UI设计师必备技能是什么?常见动效类型有哪些?目前,动效设计已成为UI设计师必备的技能之一,优秀的动效设计能够帮助设计师和用户解决了许多界面功能上的问题,让这用户更容易理解产品,也让设计师更好的表达. ...

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

纯CSS发光动效-CSS制作logo发光效果相关推荐

最新文章

热门文章