css3
-
CSS3中关于圆角和阴影以及边框图片和盒子内减的详解
圆角: border-radius阴影: box-shadow边框图片: border-image盒子内减: box-sizing:border-box; 圆角:border-radius:像素/百分比 一个值设置的是盒子的四个角的水平和垂直半径 每个角都可以单独进行设置,取值顺序是左上 右上 右下…
-
CSS3通过字体来实现icon图标
大家都知道现在各个浏览器都支持css3的自定义字体(@font-face),包括ie6都支持,只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon,我们就可以尝试使用font来实现,本文将详细讲解这种用法 为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标…
-
css3中关于transform属性实现div不定宽高垂直水平居中的详细介绍
transform的作用 transform 属性向元素应用 2d 或 3d 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。(w3cschool) transform的兼容性 transform的兼容性还是比较乐观的。IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持…
-
CSS3中使用word-wrap将英文单词强制换行的示例代码分享
语法 word-wrap: normal|break-word;所有主流浏览器都支持 word-wrap 属性。 https://home.cnblogs.com/set/account/ 不写word-wrap:break-word;的效果 加上word-wrap:break-word;的效果 以…
-
使用CSS3来实现Loading动画特效的代码案例分享
使用css3来实现loading动画特效的代码案例分享 代码如下: css3 loading等待加载代码 – 何问起 @keyframes move { from { transform: translate(0,50%); } to { transform: translate(0,850%); …
-
使用css3实现圆形从中心向四周扩散的动画效果的代码分享
先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to {top:130px;}} 可以通过 @keyframes 规则,创建动画。 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。在动画过程中,您能够多次改变这套 CSS 样式。…
-
如何使用CSS3制作进度条的简单示例代码
这篇文章主要介绍了使用css3制作一个简单的进度条(demo)的相关资料,需要的朋友可以参考下 这里只是一个小demo,一个用CSS3写的进度条。 如图所示: 具体代码如下: new document .process-bar{ width:100px; display:inline-block; …
-
关于CSS3的animate如何实现“…”loading动画效果(一)
实现如图所示的点点点loading效果: 一:CSS3 animation实现代码 html代码: 提交订单中… css代码: .ani_dot { font-family: simsun; }:root .ani_dot { /* 这里使用Hack是因为IE6~IE8浏览器下, vertica…
-
关于CSS3的animate如何实现“…”loading动画效果(二)
box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了。 实现原理 html代码,首先需要写如下html代码以及class类名: 订单提交中 css代码 .dotting { display: inline-block…
-
CSS3+jQuery实现环形进度条的详解
整体思路是:通过裁切(clip)产生两个半圆展示出静态的进度条,而后通过旋转(rotate)角度的变化产生动态效果。 先来回顾两个基础知识点 (1)css的一个不常见的属性: clip: rect(top, right, bottom, left); 这个属性规定了一个裁切的矩形,其中top和bot…