CSS3玻璃流光特效
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
<div class="image">
<img src="http://ww4.sinaimg.cn/mw600/005vbOHfgw1ercvg85sr0j30jg0t6tdq.jpg"
alt="Hello World" />
<em></em>
</div>
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js">
</script>
/*CSS源代码*/
body{
background:#CFCFCF;
}
.image {
position: relative;
overflow:hidden;
width: 300px;
height: 450px;
}
img {
width:300px;
height: 450px;
}
em {
position: absolute;
display:block;
width: 200px;
height: 450px;
background:#fff;
top: 0;
left: -400px;
translate: -webkit-transform: skewY(25deg);
-moz-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
transform: skewX(-25deg);
background:linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-o-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
.image:hover em {
left:400px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
}
.
相关推荐
本主题我们将深入探讨如何利用CSS3实现酷炫的流光页面动画特效。 首先，CSS3中的关键帧动画（@keyframes）是实现流光动画的基础。通过定义动画的不同阶段，我们可以控制元素在动画过程中的变化，从而创造出流动的...
"jQuery手风琴带玻璃流光质感特效"就是一种利用jQuery库和CSS3技术来创建的一种互动效果，它模拟了手风琴的开合动作，同时结合了玻璃质感和流动光泽的设计元素，使得网页元素在交互时呈现出更为生动和高级的视觉体验...
这种效果通常涉及到CSS3的新特性，如动画（Animations）和过渡（Transitions）。我们可以创建一个具有渐变背景色的按钮，然后通过设置动画来实现颜色流动的效果。首先，定义一个按钮的基本样式，例如边框、圆角和内...
3. **CSS3** - 用于定义样式和布局，包括创建玻璃流光质感的过渡和动画。 4. **JavaScript** - 可能用于补充jQuery的功能，如自定义逻辑或更复杂的动画控制。 在这个项目中，开发人员可能通过以下步骤实现了这一...
总之，“jQuery手风琴带玻璃流光质感特效”结合了jQuery的动态控制与CSS3的视觉效果，为网页添加了一种高级且吸引人的交互元素。无论是对于提升用户体验还是美化页面设计，这样的特效都是十分有价值的。
这个“纯CSS3鼠标滑过按钮流光效果代码”是一个创新的交互设计，它利用了CSS3的新特性来实现动态效果，特别是在表单按钮上。这种效果能够提升用户体验，使用户在与网站或应用程序互动时感受到更多的视觉趣味性。 ...
jQuery实现带玻璃流光质感的手风琴特效是一款基于jQuery+CSS3实现的带玻璃流光质感的手风琴特效，分享给大家，具体如下 效果图： 具体代码如下： html代码： <h1 class=strip__title data-name=Lorem>...
为了实现更复杂的流光效果，比如像玻璃反光那样的效果，我们可以使用CSS3的渐变（gradient）功能。线性渐变（linear-gradient）可以创建从一个颜色到另一个颜色的平滑过渡，而径向渐变（radial-gradient）则可以产生...
HTML+CSS3打造的流光按钮 是不是有点小好看 HTML+CSS小实例之全屏导航栏菜单 HTML+CSS小实例之菜单悬停效果 HTML+CSS小实例之炫彩爱心加载特效 HTML+CSS小实例之粘性小球loading效果 HTML+CSS小实例之鼠标悬停发光...
安卓手机充电加载版网页加载特效/彩虹条状爱心加载页面效果/彩色试管加载...流光圆环加载特效页面/模糊效果/全屏覆盖导航栏/三色旋转加载效果/伸缩导航栏/鼠标悬停波痕/鼠标悬停时边框滑动效果/鼠标悬停时导航栏简约缓...