css3

CSS3 text-shadow属性

text-shadow复合属性 css3新增文本属性，给文本做修饰的，属性的值可跟多组，用逗号隔开。语法：text-shadow: h-shadow v-shadow blur color。   h-shadow:水平方向偏移；   v-shadow:垂直方向偏移；   blur:模糊距离(单位除%不能用)；   color:颜色值。多组值语法可以通过多组值写多个字 text-shadow兼容性 Demo展示

2016-12-16 00:23:02 1912 2 29

阅读详情

css3 animation动画属性

animation复合属性 animation-name: 规定动画名称； animation-duration: 动画执行完成所需时间，单位s； animation-timing-function: 动画运动曲线，默认为ease； animation-delay: 规定是否延迟执行，默认为0； animation-iteration-count: 动画执行次数； animation-direction: 动画是否逆向播放，默认normal； animation-play-state: 动画执行状态；paused(暂停) | running(运行) animation-fill-mode: 动

2016-11-20 23:38:14 2322 2 21

阅读详情

css3 过渡transition属性

transition是css3新增属性，可不用JavaScript、jQuery、flash等实现一些动画，以下为个人笔记： transition:简写属性，一共4个值；   transition-property:css属性名，width、height...；   transition-duration:过渡需要花费的时间，默认为0；   transition-timing-function:运动曲线；共6个值：linear（匀速）、ease（慢速开始，然后加快，慢速结束）、ease-in（慢速开始）、ease-out（慢速结束）、

2016-11-03 21:58:30 1698 0 18

阅读详情

3D全屏滚动案例

3D全屏滚动思路：先搭好3D盒子，4个div与浏览器等宽等高，点击让大的div顺着X轴旋转。最佳查看浏览器（chrome）源码如下： html部分 <div id="box"> <div class="img front"></div> <div class="img bottom"></div> <div class="img back"></div> <div class="img top">&

2016-09-09 00:36:39 1898 0 19

阅读详情

5.5秒给你画个八卦图

css3与js结合实现动画，两边的圆形利用before/after两个伪元素制作，省去两个标签 DEMO展示

2016-06-02 02:33:22 2014 7 19

阅读详情

css选择器

选择器示例示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素 2 element p 选择所有<p>元素 1 element,element div,p 选择所有<div>元素和<p>元素 1 element element div p 选择<div>元素内的所有<p>元素 1 element>element div>p 选择所有父级是 <div> 元素的 <p&

2016-05-03 23:49:42 1122 1 8

阅读详情