css3效果:波浪效果

css3效果:波浪效果
实现效果 如图所示: 首先得准备三张图,一张是浅黄色的背景图loading_bg.png,一张是深红色的图loading.png,最后一张为bolang.png。 css代码 body{background:#ffe894;} .loading_bg{width:113px; height:111px;background:url(loading_bg.png) no-repeat left top;margin:30px auto;} .loading{width:113px; height:111px;position:relative; -webkit-mask-image:url(loading.png);} .show{ ...

css3 -webkit-animation-fill-mode属性值为both

css3 -webkit-animation-fill-mode属性值为both
大家都知道 -webkit-animation-fill-mode 属性是检索或设置对象动画时间之外的状态,但是一直以来我对它的属性值都存在一个疑问,both和forwards的使用到底有什么区别呢?经过不停的测试、搜索,个人认为差别在于: both是设置对象状态为动画结束或开始的状态,主要是取决于-webkit-animation-direction这个属性,为什么这么说呢?请看以下: HTMl: <div class="center"></div> CSS: .ce...

css3动画播放后如何停止在最后的状态

css3动画播放后如何停止在最后的状态
css3动画播放后如何停止在最后的状态 1.animation-fill-mode: forwards;. 2.用JS在一定的时间内给元素加入animation-play-state: paused;这个规则 3.解决100%的宽度不等于原始宽度,完成动画后一瞬间回复到原始宽度的方法,将目标宽度写成一个class 动态添加 /*动画写成 @keyframes name { 0%{left:0px;} 100%{left:200px;} } 动画定义为只播放1遍,然后动画样式后面定义好left:200px就可以了,因为样式是从...

CSS3的calc()使用

CSS3的calc()使用
平时在制作页面的时候,总会碰到有的元素是100%的宽度。众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破。比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破。我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模式)。这样一来就会相当...

CSS3阴影 box-shadow的使用和技巧总结

CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选。如不设值,默认投影方式是外阴影;...

CSS3 圆角(border-radius)

CSS3 圆角(border-radius)
CSS3 圆角(border-radius) 前缀 -moz(例如 -moz-border-radius)用于Firefox -webkit(例如:-webkit-border-radius)用于Safari和Chrome。 例1 <div id="round"></div> #round { padding:10px; width:300px; height:50px; border: 5px solid #dedede; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ ...
Copyright © web前端技术开发个人博客 保留所有权利.   Theme  Ality

用户登录