Waves 点击效果的灵感来自于谷歌的材料设计，很容易使用。只需要引入 waves.min.css 和 waves.min.js 到 HTML 文件中可以使用了。采用 touchstart 与 touchend 事件，支持移动设备。赶紧来体验吧！ 效果演示 插件下载
今天，带来的是纯CSS3打造的效果--绽放的花朵。 先来看效果吧：http://webfront.verynet.cc/pc/flower.html 这是纯CSS3样式打造的效果，关键是采用了animation属性和transform属性。详细请看下面代码。 HTML结构： 1 2 3 4 5 6 7 8 9 CSS样式： 1 2 .div1{ 3 position:absolute; 4 top:300px;left:500px; 5 background:pink;opacity:0.6...
今天，带来的是纯CSS3的效果--图片3D翻转。 请看效果：http://localhost:63342/webfront/PC/rotate.html 这个效果主要还是运用了CSS3的transform变形属性，与上个效果不同的是，这次并不是动画，所以没有采用animation属性，而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换，并产生一个过渡效果。详情请看代码。 HTML结构： 1 2 3 4 5 ...
今天，带来的是纯CSS3的效果--图片3D翻转。 请看效果：http://webfront.verynet.cc/pc/rotate.html 这个效果主要还是运用了CSS3的transform变形属性，与上个效果不同的是，这次并不是动画，所以没有采用animation属性，而是采用transition过渡属性。这个属性会将元素在两种效果之间进行切换，并产生一个过渡效果。详情请看代码。 HTML结构： 1 2 3 4 5 ...
上面是一个列表表格，下面是一个翻页导航，点击相应的数字翻页到相应的页面，点击左箭头向前翻页，点击右箭头向后翻页，输入数字n，点击GO按钮，翻到第n页。 如何实现这种效果呢？（ 图片在下面，因为发帖时上传不了图片，下面楼层有） 回复讨论(解决方案) ,这不是程序该干的事么，你只要把样式写出来就行了。 ,这不是程序该干的事么，你只要把样式写出来就行了。 你有解决这个问题的思路吗...
今天接触到腾讯的一个小游戏，里面有道题 答案是对父元素设置dipslay:flex; 第二个div设置flex:1 想问下，这个的作用是啥？ 回复讨论(解决方案) 没有人用过？ 很少人这样用吧 很少人这样用吧 我查了下，这是CSS3的内容，你们平时没用过这些新技术么？ 这就是css3中的弹性布局 http://css-tricks.com/snippets/css/a-guide-to-flexbox/ ?布局方式，解?完都能出?了 ??站?解的不?，先看看...
动画效果一： html代码： CSS代码： .spinner { margin : 100px auto ; width : 50px ; height : 60px ; text-align : center ; font-size : 10px ; } .spinner > div { backgr...
我现在是用的li标签和设定li的display:inline;来实现的，可现在如果li的长度过长的话，会在内部到第二行时换行，请问如何实现？注：1.我这是后台读取数据动态生成的，即li的个数不固定，并且每个li的长度不固定 2.要求每行整体居中，并且li不内部换行 3.不知道是网络不给力还是csdn程序问题，图片就是上传不上去 回复讨论(解决方案) 没太清楚。。贴代码出来看看呢? 1、li内部不换行的话存在一个问题，如果你的数...
标签云是博客的标配功能，能够清晰的呈现博客的各个关键词和主题。在这个效果中，您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果。 作为实验项目，使用了 CSS3 渐变，阴影和最重要的的 CSS 变换特性。 效果演示 源码下载
接下来介绍几种PNG图片在IE6中不透明的解决办法 1、用自己的PNG，让IE6一边去吧 首先制作PNG图片的时候，另存为一个GIF图片，因为IE6是支持GIF图片透明,然后在css定义 .pngtest{ background:url(mark.png); _background:url(mark.gif);} 优点：方便、快捷，使用超简单 缺点：对于PNG图片只是某些局域透明，该方法比较奏效，但图片要是半透明的话，这种方法就实现不了 该方法延伸的另外一种解决办法：用PS或者其...
做移动前端也有一些日子了，一直有个问题没有解决，就是与pc端那样的一个:hover的效果，:hover是鼠标指针浮动在其上的元素的一个选择器，但因为在移动端是没有鼠标的，代替的是触摸屏，用户也不是有“鼠标指针浮动在其上的元素”的情况，有也很少。 所以取代的应该:active这个选择器，但是通过实践，发现情况不是很理想，在QQ浏览器上有时触发，有没不触发，在我mx3带自浏览器上根本没效果。 最近在看美团h5的页面时发现他们做对...
今天要给大家介绍一款纯css3实现的机器人看书动画效果。整个画面完全由css3实现的绘制，没有使用任何图片元素。机器人的眼睛使用了动画元素。我们一起看下效果图： 在线预览 源码下载 实现的代码。 html代码： < HTML > { CSS } ...
在下面的效果图中，“”、“”、“IPod音乐”、“浏览电脑”、“HDMI1”、“HMDI2”、“设置”是小图片，“”是大图片，所有小图片都要显示在大图片上方。 如何用css实现效果图中的效果呢？ 如果把所有的小图片都设置成position:relative，无法控制小图片的left和top的值 请高手告知，分不够可以加分 (注：效果图在第二楼) 回复讨论(解决方案) 做一个大的div 背景图片为大图（） 在div里放...
有些导航栏背景颜色会设计成渐变的效果，显得更有层次感和质感； CSS3有专门实现这一个效果的属性， -webkit-gradient(linear,0% 0%, 0% 100%, from(#4998FF), to(#4998FF), color-stop(0.5,#4998FF),color-stop(0.5,#1261FF)) webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色...