<!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>
效果图：
相关推荐
本文将深入探讨“纯CSS3炫酷元素边框线条动画特效”，这是一种无需JavaScript，仅通过CSS3就能实现的动态边框效果，能够使页面元素的边框自动循环运动，为用户带来独特的交互体验。 首先，CSS3中的关键帧动画（@...
发光的搜索边框是网页设计中的一个亮点，它可以通过CSS3技术实现，无需JavaScript的辅助。这个设计在视觉上增加了互动性和吸引力，特别是在移动设备和平板电脑上，能提升用户体验。下面将详细介绍如何使用CSS3来创建...
运行效果： html <!-- This element is not visible. The DOM is generated by JavaScript --> <div class=side></div> <div class=side></div> <div class=side></div> ...CSS body
在“鼠标悬停css3发光效果特效”的实际应用中，可能还包含了其他CSS3特性，如渐变色（`linear-gradient`或`radial-gradient`）、圆角（`border-radius`）以及边框半径变化等，以提升发光效果的复杂性和美感。...
炫酷HTML5 SVG+CSS3霓虹灯文字边框动画特效 直接复制可用
在CSS3中，边框发光动画特效是一种常用的技术，用于为网页元素增添视觉吸引力和动态效果。本资源"css3边框发光动画特效代码.rar"包含两个关键文件：`style.css`和`index.html`，它们共同实现了这个效果。下面我们将...
【CSS3发光线条旋转加载动画特效】是一种利用CSS3特性实现的动态效果，它通过两条弧形发光彩色线条的旋转，为用户展示一种正在加载或等待的视觉反馈。这种动画在网页设计中常用于页面加载指示器或者数据同步时的交互...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是图标按钮的边框发光特效。这个特效在鼠标悬停时可以使按钮的边框产生动态的线条动画，增强用户的交互感知，提升网站的...
这个效果利用了CSS3的@keyframes属性，通过精心设计的规则来实现黑色圆形的动态光环发光动画。 首先，我们需要理解@keyframes规则的工作原理。在CSS3中，@keyframes是一个用于定义动画的关键帧的声明。它指定一个...
本主题聚焦于“纯css3圆形发光按钮动画特效”，这种特效可以增强用户界面的视觉吸引力，提高用户体验。下面我们将深入探讨如何使用CSS3实现这样的效果。 首先，要创建一个圆形的按钮，我们需要使用`border-radius`...
本实例“纯css3发光分享按钮”主要展示了如何仅通过CSS3实现具有动态发光效果的分享按钮，无需依赖JavaScript或其他编程语言，极大地提高了网页的加载速度和用户体验。 在创建这样的按钮时，首先我们需要理解CSS3的...
【CSS3图标按钮边框发光特效】是一种在网页设计中常用的技术，用于增强用户界面的视觉吸引力和交互体验。此特效利用了CSS3的新特性，包括渐变、过渡和动画，来实现按钮在鼠标悬停时产生边框发光的效果。CSS3是层叠...
在CSS3中，我们可以利用各种属性和技巧来创建丰富的视觉效果，比如动态的发光效果。这个"css3发光的龙珠特效.rar"压缩包中包含的`style.css`和`index.html`文件，很可能是用来展示如何使用CSS3实现一种类似龙珠中...
【jQuery与CSS3结合实现鼠标悬停发光效果】 在网页设计中，动态特效可以增加用户的交互体验，使得网站更加生动有趣。"91、Jquery鼠标悬停css3发光效果特效"是一个典型的案例，它利用jQuery库和CSS3技术，为网页元素...
"纯CSS3线性发光圆圈加载动画特效"是一个利用CSS3的特性来实现的动态加载指示器，它在网页内容加载时显示，以告知用户页面正在处理数据。这种特效可以提升用户体验，因为用户可以看到页面的进度而不是面对一个静态的...
本主题将详细讲解如何使用CSS3实现3D文字拉伸发光动画，以及涉及到的相关技术点。 首先，3D效果是CSS3的一大亮点。通过`transform`属性中的`translate3d()`、`rotate3d()`、`scale3d()`等函数，我们可以轻松地创建...
在本文中，我们将深入探讨如何使用CSS3创建发光Loading加载动画。CSS3是现代网页设计的重要组成部分，它提供了丰富的样式和动画效果，让开发者能够创造出动态、吸引人的用户体验。加载动画是网页交互中的一个关键...