哈，首先感谢下w3cfuns的老师，嗯~ 好了，这次给发夹分享一个CSS3+Javascript VCD包装盒个性幻灯片的一个案例。 效果图： 图片切换是不是很个性，效果也很不错，大家可以将其使用到自己的网站上。 先看下html： 复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta content="text/html;charset=utf-8" http-equiv="c...
这篇文章主要介绍了用html+css+js(jQuery)实现的一个简单的图片切换特效,需要的朋友可以参考下.记得要引入一个jQuery库文件，可以是网上在线的，也可以是本地的，注意路径。如图所示。 该图片切换特效实现很简单，而且兼容性很好。 html页面如下 复制代码代码如下:<div class="wrapper"><div id="focus"><ul><li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载"/></a></l...
写了一个小Demo,用html,css渲染的时钟效果: Html代码:<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>css实现时针</title><link rel="stylesheet" href="css/style01.css" /></head><body><div class="watch"><ul class="num num1"><span>1</span></ul><ul class="num num2"><span>2</span></ul><ul class="num num3"><span>3</span></ul><ul class="num num4"><span>4</span></ul><ul class="num num5"><span>5</sp...
复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="js/prefixfree.min.js"></script> <title>用css3实现鼠标移进去当前亮其他变灰</title> </head> <style type="text/css"> *{margin: 0;padding: 0;font-size:12px;} .wrap...
HTML布局：<div class="outer"><div class="sidebar">固定宽度区(sideBar)</div><div class="content">自适应区(content)</div> </div> <div class="footer">footer</div>常见的方法：1、将左侧div浮动，右侧div设置margin-left/*方法1*/ .outer{overflow: hidden; border: 1px solid red;} .sidebar{float: left;width:200px;height: 150px; background: #BCE8F1;} .content{margin-left:200px;height:100px;background: #F0AD4E;...
复制代码 代码如下:<% rem 文章标题： 利用vbs类实现css按钮 rem 作者：yanek rem 联系：aspboy@263.net Class CssButton Public Name Public BackColor Public BorderColor Public Font Public FontColor Public Width Public Text Public Url Public MouseOverColor Public Function GenerateStyleTag() ‘Create the STYLE tag Dim strStyle strStyle = "<STYLE TY...
晚上再来更新水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水...
.overlay{ display: block; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:9998; -moz-opacity: 0.8; ...
转载自http://blog.csdn.net/mushui0633/article/details/65685655单行：对应的css中加入overflow:hidden;//超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap;//强制不换行 多行： display: -webkit-box;word-break: break-all;text-overflow: ellipsis;font-size: 32rpx;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp:2;转载自http://blog.csdn.net/mushui0633/art...
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css animation</title><style>body {background-color: gray;}@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }.preloader {animation-name: spin;animation-dur...
css3可以改变图片的颜色了。从此再也不用设计出多张图，而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。 方式一：利用css3滤镜filter中的 drop-shadow代码如下：<style> .icon{display: inline-block;width: 180px;height: 180px;background: url(‘img/XXX.png‘) no-repeat center cover;overflow: hidden; } .icon:after{content: ‘‘;display: block;height: 100%;transform: translateX(-10...
今天在京东首页上看到一个效果，鼠标悬浮在图片上时，图片发生移动，鼠标移走时再移回，并且有一个过渡效果。貌似很简单，自己做做试试吧我首先使用的是jquery在鼠标悬浮到图片上给图片增加一个类，这个类的样式使用animation实现动画效果。表面上是实现了，然后实际情况是，滚动页面时有些卡，应该是滚动时鼠标经过N个图片，大量的DOM操作严重消耗性能，所以还是采用了伪类hover，给hover应用样式实现动画。而且简单的移动使用ani...
问题：图片的宽度100%，高度要始终自适应为16:9。 解决方案： 1、通过js程序算出绝对高度再进行设置。这是解决问题最容易想到的方法。 2、但是，我们的原则是能用css实现的功能尽量用css，这有利于后期项目的维护。css同样可以实现这个问题，我们可以利用边距的百分比属性定义来优雅实现。 我们通过百分比设置宽度，根据宽度的比例数值*9/16，计算出高度的百分比数值，设置内边距为高度的数值，最后用绝对定位把图片百...
遇到一些比较复杂的动画可以用插件帮忙，我一般选择animate.css，有时间和机会的话试下 jquery.transit.js： jquery.transit.js：http://code.ciaoca.com/jquery/transit/demo/ animate.csshttp://alloyteam.github.io/JXAnimate/jxanimate_demo.html 这是老大之前发的动画原则，虽然我还没用过，但感觉总会有用上的一天http://www.sunnyzhen.com/course/animation_principles/demo.html?from=timeline&isappinstalled=0原文：http...
早上没事干，感觉字体阴影的效果还是好看的，那么就来一个小demo吧！1、这是html 简单的有一个标签或者盒子都可以复制代码代码如下:<div class="demo11">我爱考试</div>2、css样式，用css3编写样式，感觉还不错。复制代码代码如下:.demo11 { border: 1px dashed #f2b; height: 150px; width: 250px; text-align: center; line-height: 150px; margin: 0 auto; font-size: 50px; color: orange; text-sh...