精华内容
下载资源
问答
  • 发光边框

    2016-08-24 10:45:00
    .active{ margin: 0.37...//边框粗细及颜色 border: 2px solid #00ffff;//圆角矩形 border-radius: 5px;//位置及晕染大小 box-shadow: 0 0 15px #00ffff; //兼容性 -webkit-box-shadow: 0 0 15px #00ffff; -moz-...

    .active{
    margin: 0.37rem 0;
    //边框粗细及颜色
    border: 2px solid #00ffff;
    //圆角矩形
    border-radius: 5px;
    //位置及晕染大小
    box-shadow: 0 0 15px #00ffff;
    //兼容性
        -webkit-box-shadow: 0 0 15px #00ffff; 
    -moz-box-shadow: 0 0 15px #00ffff;
    -o-box-shadow: 0 0 15px #00ffff;
    //方框内颜色控制
    background-color: rgba(114,47,205,0.5);
    }

    转载于:https://www.cnblogs.com/y-lin/p/5801960.html

    展开全文
  • 带外发光边框的三级下拉菜单
  • 这篇文章我们来讲一下在网站建设中,CSS3实现发光边框特效。本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文。运行效果:htmlCSSbody {margin: 0;width: 100vw;height: 100vh;background: ...

    这篇文章我们来讲一下在网站建设中,CSS3实现发光边框特效。本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文。

    运行效果:

    html

    CSS

    body {

    margin: 0;

    width: 100vw;

    height: 100vh;

    background: #010326;

    }

    .root {

    --glow_width: 2px;

    --animation_length: 2s;

    --delay_factor: 2;

    position: absolute;

    left: 50%;

    top: 50%;

    width: 300px;

    height: 300px;

    transform: translate(-50%, -50%) rotate(45deg);

    /* Uncomment the line below to see how this system is set up */

    /* border: 1px dashed red; */

    overflow: hidden;

    }

    .side {

    position: absolute;

    top: 0;

    left: 0;

    }

    .side.left,

    .side.right {

    width: var(--glow_width);

    height: 0;

    background: linear-gradient(to bottom, transparent, #c03225, transparent);

    animation: heightAnim var(--animation_length) linear infinite,

    hider calc(var(--delay_factor) * var(--animation_length))

    var(--animation_length) infinite;

    }

    .side.top,

    .side.bottom {

    width: 100%;

    height: var(--glow_width);

    background: linear-gradient(to left, transparent, #c03225, transparent);

    animation: widthAnim var(--animation_length) 0s linear infinite,

    hider calc(var(--delay_factor) * var(--animation_length))

    var(--animation_length) infinite;

    }

    .side.right {

    left: auto;

    right: 0;

    height: 0;

    animation-delay: calc(var(--animation_length) / 2);

    animation-direction: normal, reverse;

    }

    .side.bottom {

    top: auto;

    bottom: 0;

    width: 0;

    animation-delay: calc(var(--animation_length) / 2);

    animation-direction: normal, reverse;

    }

    @keyframes heightAnim {

    0% {

    height: 0px;

    }

    50% {

    height: 300px;

    transform: initial;

    }

    100% {

    transform: translate(0, 300px);

    }

    }

    @keyframes widthAnim {

    0% {

    width: 0px;

    }

    50% {

    width: 300px;

    transform: initial;

    }

    100% {

    transform: translate(300px, 0px);

    }

    }

    @keyframes hider {

    0%,

    50% {

    opacity: 0;

    }

    51%,

    100% {

    opacity: 1;

    }

    }

    js

    let template = `

    let segments = 9

    for(let i = -segments; i < segments; i++){

    document.body.innerHTML += template.replace("{{ value }}", 90/segments * i + "deg")

    }

    // document.body.innerHTML += template.replace("{{ value }}", 90/segments * 0 + "deg")

    以上就是CSS3 实现发光边框特效的详细内容,更多关于CSS3 发光边框特效的资料请关注本站其它相关文章!

    相关阅读

    展开全文
  • CSS3 发光边框

    2017-04-02 14:44:29
    &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&...CSS3 发光边框&lt;/title&gt; &lt;link rel="stylesheet" href="base.cs
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <title>CSS3 发光边框</title>
    <link rel="stylesheet" href="base.css" />
    <style type="text/css">
    body{
    	background: #f0f0f0
    }
    .light{
    	background: #fff;
    	width: 180px;
    	height: 180px;
    	margin: 100px auto;
    	position: relative;
    	text-align: center;
    	color: #333;
    	transform:translate3d(0,0,0);
    
    }
    .light-inner{
    	padding: 60px 30px 0;
    	pointer-events: none;
    	position: absolute;
    	left: 0;
    	top: 0;
    	bottom: 0;
    	right: 0;
    	text-align: center;
    	transition: background 0.35s;
    	backface-visibility: hidden;
    }
    .light-inner:before, .light-inner:after{
    	display: block;
    	content: "";
    	position: absolute;
    	left: 30px;
    	top: 30px;
    	right: 30px;
    	bottom: 30px;
    	border: 1px solid #fff;
    	opacity: 0;
    	transition: opacity 0.35s, transform 0.35s;
    }
    .light-inner:before{
    	border-left: 0;
    	border-right: 0;
    	transform:scaleX(0);
    }
    .light-inner:after{
    	border-top: 0;
    	border-bottom: 0;
    	transform: scaleY(0);
    }
    .light:hover .light-inner{
    	background: #458fd2
    }
    .light:hover .light-inner:before, .light:hover .light-inner:after{
    	opacity: 1;
    	transform: scale3d(1,1,1);
    }
    
    .light-inner p{
    	transition: opacity .35s, transform 0.35s;
    	transform: translate3d(0,20px,0);
    	color: #fff;
    	opacity: 0;
    	line-height: 30px;
    }
    .light:hover .light-inner p{
    	transform: translate3d(0,0,0);
    	opacity: 1;
    }
    </style>
    </head>
    <body>
    	<div class="light">
    		<img src="aaa.jpg">
    		<div class="light-inner">
    			<p>onestopweb</p>
    			<p>一站式共享网络</p>
    		</div>
    	</div>
    </body>
    </html>

     

    效果图:

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知识。如右图,想要获得这样的文本框其实一点也不难的。 需要注意...
    7,166 次阅读  ‹ NSH Blog 网页设计
    CSS发光边框文本框效果
    
    或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知识。如右图,想要获得这样的文本框其实一点也不难的。
    
    需要注意的是,这并不是单纯的box-shadow属性而已,它的发光是像四周均匀发光,它还包含一个缓慢发光过渡效果。
    
    下面就给大家介绍如何创造出这样别致的文本框。
    
    指引 / 跳至 [收缩]
    1 了解CSS3的Shadow、Transition属性
    2 制作发光边框文本框效果
    3 为全局所有input组件添加边框发光效果
    了解CSS3的Shadow、Transition属性
    在继续学习之前,你必须要有一些Css3的基础知识。做出这一切需要你了解CSS3的Shadow和RGBa、Transition属性,否则就无法理解了。
    
    另外,这种CSS制作的发光效果并不适合于所有浏览器,你可以到这里去了解一下浏览器的支持情况。
    
    制作发光边框文本框效果
    
    首先,拿一个input元素举例:
    
    <input type="text" class="sdw" />
    
    现在我们要让这个input组件在被成为焦点(点击)时向四周发光,并且为粉色,我只需添加一段CSS代码:
    
    .sdw:focus{
    
     transition:border linear .2s,box-shadow linear .5s;
     -moz-transition:border linear .2s,-moz-box-shadow linear .5s;
     -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
     outline:none;border-color:rgba(241,39,242,.75);
     box-shadow:0 0 8px rgba(241,39,232,.5);
     -moz-box-shadow:0 0 8px rgba(241,39,232,.5);
     -webkit-box-shadow:0 0 8px rgba(241,39,232,3);
    }
    
    就可以了。其中靛蓝色部分的文字是利用了Transition属性产生一个过渡效果,而其中的RGB色彩可以根据个人口味进行改变。预览效果如下:
    
    
    点击看看,是不是出现了闪光的效果呢?
    
    为全局所有input组件添加边框发光效果
    如果希望一个网页中所有的文字输入框出现这种效果,只需CSS全局设定即可。
    
    在你的CSS文件中添加这么一句:
    
    input[type=text]:focus,input[type=password]:focus,textarea:focus{
    
     transition:border linear .2s,box-shadow linear .5s;
     -moz-transition:border linear .2s,-moz-box-shadow linear .5s;
     -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
     outline:none;border-color:rgba(241,39,242,.75);
     box-shadow:0 0 8px rgba(241,39,232,.5);
     -moz-box-shadow:0 0 8px rgba(241,39,232,.5);
     -webkit-box-shadow:0 0 8px rgba(241,39,232,3);
    现在你也可以拥有类似Twitter的那样发光文本框效果。
    
    谢谢收看。
    
    参考资料:
    
    几个高级CSS属性技巧美化网站显示、CSS Transition (变换动画)、CSS实现模拟漫画气泡对话效果

     

    转载于:https://www.cnblogs.com/ganler1988/p/3259417.html

    展开全文
  • 运行效果: html <!-- This element is not visible. The DOM is generated by JavaScript --> <div class=side></div> <div class=side></div> <div class=side></div> <div class=side></div> ...body
  • 学习前端,我们除了要学会如何制作静态的网页,我们还要学会一些特殊的效果,运用我们所学的知识,制作出属于我们的有个性的东西,接下来,就让我们一起来学习一下荧光边框边框的制作方法吧。 代 码 讲 解 01 定义...
  • 该效果可以用在自己布局网站时,对小盒子的边框进行特效设计,本特效设计参考了一位B站up主的教程,链接附在文末,对做酷炫布局有一定的帮助。 1. 发光效果图: 2. 源码解析: buling.html: <!DOCTYPE html>...
  • input 发光边框 outline:none; border:#8182EE 1px solid!important; box-shadow: 0 0 8px #8182EE; 阴影按钮 .submit-btn{ display: block;  border: 0;  color: #fff;  font-...
  • [img=http://img.my.csdn.net/uploads/201301/14/1358150852_7578.jpg][/img][img=http://img.my.csdn.net/uploads/201301/14/1358150858_7291.jpg][/img] 这个是结果 下面是画法 自己包含头文件 ...
  • CSS边框发光

    2015-11-01 15:44:45
    input[type=text]:focus,input[type=password]:focus,textarea:focus,textarea:hover,input:hover{ transition:border linear .2s,box-shadow linear .5s; -moz-transition:border linear .2s,-moz-box-shadow linea
  • 边框发光,wpf技术支持。可以给图片添加边框,还能使边框发光。都是WPF的技术
  • css去除input、textarea发光边框

    千次阅读 2019-06-09 20:18:16
    outline: none;//去除外边框 border:none;//去除边框
  • [img=https://img-bbs.csdn.net/upload/201307/26/1374831160_736737.jpg][/img] 图中的 边框 发光效果是怎么做的 QT可以实现吗? 我看Apple TV 小米盒子 等的界面 都有这种效果。
  • css边框发光样式

    2018-06-11 13:34:00
    box-shadow: rgb(11, 234, 235) 0px 0px 10px inset; 转载于:https://www.cnblogs.com/f-l-y/p/9166632.html
  • 119.css按钮边框渐变发光特效

    千次阅读 2020-12-17 08:54:06
    效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持... 【前端物资】119按钮边框渐变发光特效 视频地址一:https://www.bilibili.com/video/BV1rh
  • 主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
  • 用CSS3实现发光边框效果

    万次阅读 2013-03-06 11:28:23
    有些网站中的input输入框选中时,可以看到边框发亮的渐变效果,由于需要,这里要做一个块的边框发亮效果,如图所示。 CSS代码如下: @-webkit-keyframes shineRed { from { -webkit-box-shadow: 0 0 5px #bbb; ...
  • 一个很漂亮会发光的搜索边框,使用的是css3的动画,没有js,代码简洁,兼容手机,平板,pc设备
  • 主要为大家详细介绍了Android自定义View之边框文字、闪烁发光文字,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • html5+css3简单边框发光效果

    千次阅读 2019-04-13 11:52:36
    如何制作一个边框发光效果 首先我们制作一个盒子,并使用before和after创建两个蒙板,利用图层调整到页面下方,将盒子背景和body背景调暗,此时我们获得了一个白色边框 将第二块蒙板利用滤镜模糊化,...
  • css中div边框发光

    2020-11-07 23:26:53
    .divClass{ box-shadow: 0 0 15px #4E4E4E; padding:10px }
  • 使用IE浏览器是看不到此效果的。 直接为全局input添加了这个CSS3效果 input[type=text]:focus,input[type=password]:focus,textarea:focus,textarea:hover,input:hover{transition:border linear .2s,box-shadow...
  • 对现有控件进行扩展1、绘制如下所示的两层背景的TextView创建BorderTextView继承TextView在构造函数中初始化一些基本数据//外边框mPaint1 = new Paint();mPaint1.setColor(getResources().getColor(android.R.color....
  • .set { border: #c2e9fb 1px solid; box-shadow: rgb(11, 234, 235)... // 发光效果 transition: all 0.3s ease-in-out; //过滤动画 0.2秒 padding-top: 10px; border-radius: 8px; padding-bottom: 10px; } 效
  • <!doctype html><html><head> <meta charset="utf-8"> <title>纯css3闪烁动画</title> <style> /* 动画闪烁颜色 */ @-webkit-keyframes greenPulse { ...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 184
精华内容 73
关键字:

发光边框