尝试一下 »
纪晓岚乄
870***614@qq.com
小叶Little_Ye
lit***ye233@foxmail.com
国内一些站点支持“黑幕”样式——表面上是全黑色的矩形条,将鼠标移动上去或选中矩形条就能看到其中的文字。
以前一直在想这种效果怎么处理,本来考虑使用JavaScript,但是写起来很复杂;如若再考虑鼠标移动上去后的颜色过渡效果,更是困难重重。现在我们可以考虑使用CSS的过渡效果来处理。
我们常见到的“黑幕”表面是这样的:
鼠标移动后的效果是这样的:
那么我们设计的思路如下:
1) 背景颜色始终是黑色的;
2) 字体颜色也是黑色的,只有在鼠标悬浮或被选中时逐渐变为白色。
由此我们可以设计如下的代码:
11月你好
373***151@qq.com
前两天看到一个效果,左右两个半屏,鼠标移上后就会全屏,感觉很新颖,尝试用 css 写一下,比 js 简单哎。
<div class="left"></div> <div class="right"></div> <style> .left{ width:50%; height:50px; background:#C00; top:0; left:0; transition:0.6s;/*动画*/ -moz-transition:0.6s; /* Firefox 4 */ -webkit-transition:0.6s; /* Safari and Chrome */ -o-transition:0.6s; /* Opera */ .right{ width:50%; height:50px; background:#03C; top:0; right:0; transition:0.6s;/*动画*/ -moz-transition:0.6s; /* Firefox 4 */ -webkit-transition:0.6s; /* Safari and Chrome */ -o-transition:0.6s; /* Opera */ .left:hover{ width:100%; z-index:99; .right:hover{ width:100%; z-index:99; </style>