css3
文章平均质量分 79
tianshizhimeng155
想从事WEB相关的职业,最好是web前端工程师!努力,追梦!
展开
-
CSS3之盒模型阴影
CSS3之盒模型阴影1. 用法• box-shadow:[inset]x y blur [spread] color• 参数– inset:投影方式» inset:内投影 .box{width:100px;height:100px;margin:100px;background:Red;box-shadow:inset 10p原创 2016-05-01 20:50:27 · 1141 阅读 · 0 评论 -
CSS3实现整屏切换效果
总是能看见很多广告或者网站都是使用整屏滚动的效果,一直看着都心痒痒,想自己也实现一个。最近刚学习到css3的动画效果,所以尝试使用css3做了一个整屏切换。页面结构实现思路与大众方法类似,如图 每个section就是一页内容,它的大小充满了屏幕(红色区域),一个container由多个section构成,我们通过改变container的位置,来达到页面切转载 2016-07-31 10:39:55 · 7637 阅读 · 1 评论 -
CSS3之渐变(线性渐变,径向渐变)
渐变一、 线性渐变1 线性渐变格式linear-gradient([ || ,]? , …)只能用在背景上 2 IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',G原创 2016-04-12 16:05:17 · 6676 阅读 · 1 评论 -
CSS3之选择器1(属性选择器,结构伪类)
一.属性选择器1 E[attr]只使用属性名,但没有确定任何属性值 例如:p{height:30px;border:1pxsolid #000;}p[miaov]{background:red;} leo 杜鹏 子鼠 小美 2 E[attr="value"]指定原创 2016-04-10 21:20:12 · 1645 阅读 · 0 评论 -
CSS3之选择器2(伪类)
1 E:target表示当前的URL片段的元素类型,这个元素必须是Ediv{width:300px;height:200px;background:#000;font:50px/200px "微软雅黑"; color:#fff; text-align:center; display:none;}div:target{ display:block;}d原创 2016-04-10 21:41:32 · 443 阅读 · 0 评论 -
css3之文本,字体,颜色
文本,字体,颜色1. 新增颜色模式rgbar Red 红 0-255g Green 绿 0-255b Blue 蓝 0-255a Alpha 透明 0原创 2016-04-10 22:18:06 · 3333 阅读 · 0 评论 -
CSS3之圆角
1 不给“/”则水平和垂直一样 1个:都一样border-radius: 一样 .box{width:200px;height:200px;border:1px solid #000; border-radius:20px;} 2个:对角border-radius: 左上&右下 右上&左下 .box{width:20原创 2016-04-11 11:45:26 · 286 阅读 · 0 评论 -
CSS3之边框图片
边框图片border-image1 border-image-sourceg 引入图片2 border-image-slice 切割图片 属性值没有单位,默认单位为像素。支持百分比,百分比值总是相对于边框图像而言。3 border-image-slice包含4个参数,遵循css方位规则,按照上,右,下,左的顺时针方向赋值剪裁。 4原创 2016-04-11 15:33:06 · 469 阅读 · 0 评论 -
CSS3之设计背景图片(多背景,背景尺寸,背景原点,背景裁剪,遮罩)
一、设计背景多背景逗号分开background:url(a.jpg) 0 0, url(b.jpg) 0 100%; .box{width:300px;height:300px;background:url(bt_blue.png) no-repeat, url(border.png) repeat-yright 0;} 二、背景尺寸原创 2016-04-11 22:20:59 · 4700 阅读 · 0 评论 -
CSS3之弹性盒模型
弹性盒模型 1. 注意在使用弹性盒模型的时候父元素必须要加display:box或display:inline-box.box{height:100px;border:10pxsolid #000;padding:10px; display:-webkit-box;}.boxdiv{width:100px;height:100px;background原创 2016-04-12 18:49:49 · 437 阅读 · 0 评论 -
2D实现钟表效果
#wrap{ width:200px;height:200px;border:2px solid #000;margin:100px auto;border-radius:50%;position:relative; } #wrap ul{ margin:0;padding:0;height:200px;positio原创 2016-05-05 20:48:40 · 409 阅读 · 0 评论 -
3D图片轮播
1.要使轮播到最上面后有抖动的效果帧的比例更小,在终点不断该表@-webkit-keyframes show{0%{-webkit-transform:rotateX(180deg);opacity:0;}50%{-webkit-transform:rotateX(-25deg);opacity:1;}60%{-webkit-tr原创 2016-05-05 15:14:25 · 515 阅读 · 0 评论 -
CSS3实现折纸效果
无标题文档@-webkit-keyframes open{ 0% { -webkit-transform:rotateX(-120deg); } 25% { -webkit-transform:rotateX(30deg); } 50% { -webkit-transform:rotateX(-15deg); } 75% { -webkit-transfo原创 2016-05-04 14:55:56 · 2239 阅读 · 0 评论 -
CSS3实现无缝滚动
无标题文档@-webkit-keyframes move{ 0%{ left:0; } 100% { left:-500px; } }#wrap{ width:500px;height:100px;border:1px solid #000; position:relative;margin:100px auto; overflow:hidden;}#list{ po原创 2016-05-03 21:32:50 · 14114 阅读 · 1 评论 -
CSS3之 3D变换、3D动画
CSS3之 3D变换、3D动画3D变换transform-style(preserve-3d) 建立3D空间Perspective 景深(类似于站在多远地方看)Transform 新增函数 1) rotateX() .box{width:100px;height:100px;padding:100px;border:5pxsolid #000;margin:3原创 2016-05-03 19:06:57 · 1467 阅读 · 0 评论 -
CSS3 之2D变换(旋转,缩放,位移,矩阵函数)
CSS3 之2D变换 l transform• rotate() 旋转函数 取值度数– deg 度数– Transform-origin旋转的基点• skew()倾斜函数 取值度数 – skewX()– skewY()• scale()缩放函数 取值 正数、负数和小数– scaleX()–原创 2016-05-02 16:44:39 · 10760 阅读 · 0 评论 -
CSS3之布局(分栏布局、响应式布局)
CSS3之布局(分栏布局、响应式布局)1. Css3分栏布局column-width 栏目宽度column-count 栏目列数column-gap 栏目距离column-rule 栏目间隔线 .wrap{width:900px;border:1pxsolid #000; font:14px/28px "宋体";color:#000; tex原创 2016-05-01 21:24:56 · 15887 阅读 · 0 评论 -
CSS3之过渡及过渡事件
CSS3之过渡及过渡事件1. Transition过渡 l transition-property 要运动的样式 (all || [attr] ||none)l transition-duration 运动时间l transition-delay 延迟时间l transition-timing-function 运动形式 • ease:(原创 2016-05-02 14:56:29 · 4599 阅读 · 0 评论 -
3D轮播图
越努力越幸运-凡事老师*{margin:0px;padding:0px;}/*banner style*/.banner{width:989px;height:410px;margin:100px auto 0px;/*元素外边距*/position:relative;/*定位 相对定位 参照物*/}/*button style*/.banner .原创 2016-08-01 22:26:43 · 1639 阅读 · 0 评论