网上有各种用CSS3画图标，画漫画的代码，实在是有点吊！如果能为自己的网站也绘制一套CSS3图标，那么就省去了用小图片的力气。虽然说各大浏览器对CSS3的支持性还不尽相同，但是大势所趋，写写更健康。首先，我们要做到使用简单，简单到给元素加个类就能使用图标，然后我们还要支持可定制，比如颜色，大小。看下面的代码：<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>...
分享一款基于jQuery+CSS3实现人物跳动特效。这是一款类似gif图片效果的CSS3动画特效代码。效果图如下：在线预览 源码下载实现的代码。html代码：<div class="charector-wrap " id="js_wrap"><div class="charector"></div></div><a class="run-xfast" href="#none">最快</a><a class="run-fast" href="#none">快</a><a class="run-normal" href="#none">正常</a><a class="run-slow" href="#none">慢</a><button class="btn-paus...
以前使用瀑布流都要用js，现在有了css3，可以轻松实现了。掌握点：1、column-count 把div中的文本分为多少列2、column-width 规定列宽3、column-gap 规定列间隙4、break-inside: avoid; 避免元素内部断行并产生新列注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。 实例： 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>CSS3瀑布流</title> 6<style> 7/*大层*/ 8 .con...
想要适配手机端和pc端，有几种简单的方法，本人使用的是百分比分配的方法。*{padding: 0;margin: 0; } body,html{width: 100%;height: 100%;overflow: hidden; } #bottom_box{width: 100%;height: 50px;background-color: #eee;display: flex; //这是flex布局，父元素设置为flex，子元素设置几等份就是分成几等份position: fixed;bottom: 0px; } .tab{flex:1; //子元素都平均是1：1：1：1的意思text-align: center;padding-to...
css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下：复制代码代码如下:<body><div id="outer"> <div id="group"> <div class="page" id="page1">.</div> <div class="page" id="page2">..</div> <div class="page" id="page3">...</div> <div class="page" id="page4">....</...
要用到的Css3选择器element:nth-child(number){}选择器匹配属于其父元素的第 number 个子元素参数 Numberodd 奇数even 偶数W3School介绍:http://www.w3school.com.cn/cssref/selector_nth-child.asp完整demo:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>测试</title></head...
昨晚用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……第1种效果：代码如下：<div class="loading"><span></span><span></span><span></span><span></span><span></span></div>.loading{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;-webkit-animation: load 1s ea...
之前为大家分享了css3实现的加载动画。今天为大家带来一款只需几行代码就可以实现超炫的动画加载特效。我们一起看下效果图： 在线预览 源码下载 实现代码：极简的html代码：<div><i></i></div>css3代码：body {background: black;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;height: 100vh; }@-webkit-keyframes rotation {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}...
原文:css3实现色子自动翻转效果css3使我们能够跳出2d空间，实现3维空间的动画效果，这里给出一个自动翻转的3d色子动画效果制作过程。第一步，首先进行HTML的布局，对于3D效果，布局有一定的规律，代码如下：<body> <div id="outer"><div id="group"><div class="page" id="page1">.</div><div class="page" id="page2">..</div><div class="page" id="page3">...</div><div class="page" id="page4">....</div><div class="page" i...
在这篇文章中我们将创建纯css3的等待效果动画，不用javaScript，不用jquery，不用图片。效果如下：html标记在这篇文章中用到的html只需要添加一个<div>该div加入一个class=“loading”，如下所示：复制代码代码如下:<div class="loading"></div>CSS 下面通过一个例子实现上图中第三个css效果：第一部分css它设置了该div的样式，利用css3我们可以创建很多形状，如线、矩形、圆饼等，我们也可以为其生成纹理和条纹等复杂的效果。下面...
标签云是博客的标配功能，能够清晰的呈现博客的各个关键词和主题。在这个效果中，您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果。 作为实验项目，使用了 CSS3 渐变，阴影和最重要的的 CSS 变换特性。 效果演示 源码下载 您可能感兴趣的相关文章Web 开发中很实用的10个效果【源码下载】精心挑选的优秀jQuery Ajax分页插件和教程12个让人惊叹的的创意的 404 错误页面设计让网站动起来！12款优秀的 jQuery 动画插件十...
css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习animation属性一览因为animation属性比较多，然后在w3c上看有点蛋疼，干脆也做了一份导图，以后想查看，就一目了然了 使用animation实现逐帧动画熟悉了animation的属性之后，得找个简单的小项目实现下，逐帧动画好有意思，先跑一个满足下自己思路很简单，就是给元素...
一、CSS3实现兼容性渐变背景效果，兼容FF、chrome、IE渐变效果，现在主流的浏览器FF、Chrome、Opera、IE8+都可以通过带有私有前缀的CSS3属性来轻松滴实现渐变效果，IE7及以下也可以通过滤镜来实现渐变效果（滤镜来实现会消耗大量资源）？为什么滤镜实现渐变效果会消耗大量资源 呵呵，菜鸟，什么都不懂，就只会百度了。见笑了。原因是：由于IE内部在解析滤镜，也是通过大量的CPU计算，从而达到滤镜效果，最后再渲染。二、各浏览...
哈，首先感谢下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...
复制代码代码如下:<!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...