这是一款效果非常酷的CSS3复选框checkbox样式美化效果。该复选框美化效果共有11种。默认的复选框的样式十分不好看，该效果将复选框加一美化，带上了一些动画效果，其中一些制作为滑动按钮的样式。这些效果都可是通过相邻兄弟选择器来选择与checkbox相邻的label来实现。在线演示：http://www.htmleaf.com/Demo/201503211557.html下载地址：http://www.htmleaf.com/css3/css3donghua/201503211556.html原文：http://blog.csdn.net/so...
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><link href=‘https://fonts.googleapis.com/css?family=Varela‘ rel=‘stylesheet‘ type=‘text/css‘><style>/* latin-ext */@font-face {font-family: "Varela";font-style: normal;font-weight: 400;src: local("Varela"), url(https://fonts.gstatic.com/s/varela/v9/DPEtYwqExx0AWHX5DR4ETvw.woff2) format("woff2");unicode-range: U+0100-024F, U+025...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS网页顶部阴影代码</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body:before { content:""; position:fixed; top: -10px; left: 0; width: 100%; height: 10px; z-index:...
想要适配手机端和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...
如何使用CSS给图片添加双边框效果:给图片添加双边框也在实际使用中也有许多应用，可能并不频繁，在这里简单介绍一下如何实现此种效果，借以对CSS一些属性的应用加以熟练。先看一段代码实例:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> img{ border:5px solid #696; padding:5px; background-color:#C...
css3 动画效果 做css3的动画效果，w3c的文档的文档已有事例。动画事例，也是看了半天才搞出来。下面我就是结合个人理解进行介绍。最后个人做的一个动画democss3的动画事例主要需要理解animation：可以算是动画的声明部分。你可以把动画属性的内容全部写到后边，动画的属性主要有：animation-name animation-duration还有一些动画延时，动画播放次数。这些要根据动画效果进行添加。 格式有：animation:animation-name animation-dur...
如何使用CSS给图片添加双边框效果:给图片添加双边框也在实际使用中也有许多应用，可能并不频繁，在这里简单介绍一下如何实现此种效果，借以对CSS一些属性的应用加以熟练。先看一段代码实例:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> img{ border:5px solid #696; padding:5px; background-color:#C...
引用前请标明出处：http://www.cnblogs.com/zkhzz/ 谢谢 通过观察了百度的首页，对于更多产品一栏，觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架<div class="nav"> <ul> <li><a href="#">新闻</a></li> <li><a href="#">hao123</a></li> <li><a href="#">地图</a></li> <li><a href="#">视频</a></li> <li><a href="#">贴吧</a></li> <li><a href="#">登录</a></li> <li><a href="#">设置...
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>My照片墙</title><style type="text/css">*{padding:0;margin: 0;}li,ul{list-style: none;}#parent{margin: 0 auto;width: 830px;height: 600px;margin-top:50px;}#parent li{float: left;height: 250px;margin: 10px;width: 250px;}</style><script type="text/javascript">/****将浮动布局转换为绝对定位布局*/window.onload=function(){var parent = docum...
效果截图： 实现代码： 复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=##15A216,endColorStr=#fafafa); /*IE*/ background:-moz-linear-gradient...
昨晚用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实现色子自动翻转效果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我们可以创建很多形状，如线、矩形、圆饼等，我们也可以为其生成纹理和条纹等复杂的效果。下面...
JavaScript:(function ($) {$.fn.ShowMask = function (options) {var defaults = {top: 150,left: 200}var options = $.extend(defaults, options);$("html").append(‘<div id="ui-mask"></div><div id="ui-mask-div" style="z-index: 99999;position: fixed;top:‘ + options.top + ‘px;left:‘ + options.left + ‘px;"><img src="Images/ui-loading.gif" /><span>操作正在进行中，请耐心等待......</span></div>‘)_this_ =...
方法一：使用外层容器切割给每一个 li 设定右边框和下边框线把ul放置在一个外层div中，设定div的宽高，通过overflow:hidden将一部分li的边框隐藏此方法只需要计算父容器的宽高，能应付任何行与列数，推荐使用。CSS部分：body{background: #f3f3f3;} ul, li{list-style: none; padding: 0; margin: 0;} div{width: 323px;height: 302px;overflow: hidden;/*超出部分隐藏,切割掉下边框和右边框*/ } div ul{/*一个li元素宽度为81px,wi...