CSS3 样式2,以及动画属性
2018-03-08 15:55
471 查看
border-radius,边框半径border-radius:20px 20px; 左上角右下角,右上角左下角;border-radius:10px 20px 30px; 左上角,右上角左下角,右下角;border-radius:10px 20px 30px 40px; 上右下左;border-bottom-right-radius:10px;border-bottom-right-radius:10px 20px; 当设定了两个值的时候,边框表现为椭圆;border-radius:30px 30px 30px 30px/40px 40px 40px 40px; 分别代表了x轴和y轴,一般很少用这种方式;border-image,边框背景border-image-source:url("border.png");border-image-slice:27 27 27 27;(其值不带单位)border-image-repeat:stretch; 拉伸; repeat; 直接平铺; round; 缩放平铺;(推荐使用) tips:source表示边框背景的路径; slice表示边框背景如何切,27代表了位置; repeat表示背景的平铺方式;优点:可以代替以前只能给边框设置颜色、大小、点画线的局限性;缺点:切割图片需要一定的调试,且依赖于所使用图片;background,背景背景尺寸background-size:500px 500px; 500px auto; 100% auto; cover; (铺满,自动调整) contain; (完全显示图片,自动调整) tips:当html,body内有一元素宽高都为100%的盒子,为了撑开盒子的宽高,html,body都应该设置一个宽高100%;线性渐变background-image:linear-gradient(to right,#000 25%,#fff 50%); tips:25%和50%都分别指渐变的起点,可以写px值; 在实际中,渐变一般会用图片直接做,用一个宽度为2px的长条,进行repeat平铺;圆形渐变background-image:radial-gradient(20px at center,red,yellow);background-image:radial-gradient(40px 20px at center,red,yellow);tips:有两个px参数时,该渐变是一个椭圆;背景的定位原点、裁切原点background-origin:padding-box; border-box; content-box;background-clip:padding-box; (很少用) border-box; content-box;背景定位background-postion:left top;多重背景background-position:left bottom, right top, right bottom;background-image:url("images1.jpg"), url("images2.jpg"), url("images3.jpg");二者还可以连写:background:url("images/bg1.png") top left no-repeat, url("images/bg2.png") top right no-repeat, url("images/bg3.png") bottom right no-repeat;transition,过渡常用transiton:all 0.5s; 所有变化在0.5s中进行;四个属性transition-property:width; 代表了需要改变的属性;transition-duration:0.3s; 改变所需要的时间;transition-delay:2s; 延时;transition-timing-function:ease; 改变的轨迹函数; linear; ease-in; ease-in-out; tips:过渡最好加在原始状态;在调试器的elements中,右键可以查看在:hover等事件下的属性;在open-cubic-bezier-editor中,可以查看其轨迹统计(transition样式的紫色图标);连写形式transition:height 0.3s 1s ease-in; 改变的属性,变化时间,延时,轨迹函数;
相关文章推荐
- CSS3动画的属性主要分为三类:transform、transition以及animation。
- css3 transition属性变化与animation动画的相似性以及不同点
- 属性的继承以及样式优先级
- CSS3中的动画,animation、transition和transform属性的运用
- css3动画属性系列之transform细讲scale缩放
- CSS3动画属性animation的基本用法
- 两点补充——CSS3新属性以及弹性布局
- JavaScript DOM中 改变样式属性,实现动画效果
- JavaScript DOM中 改变样式属性,实现动画效果 2
- CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性(转)
- 解决浏览器background-image属性不支持css3动画
- CSS3 动态生成文字旋转动画样式
- css3动画简介以及动画库animate.css的使用
- css3高级和低级样式属性先后顺序
- ios:UIView动画总结[转]IPhone中UIView中动画及其属性说明[转]详解UIScrollView[转]以及cocos2d框架简介[转]Automator重命名文件介绍[转]
- CSS3中动画属性transform、transition 和 animation
- CSS3中和动画有关的属性transform、transition 和 animation
- CSS3中Transition属性详解以及示例分享
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能