css3能做什么响应式开发的基础,然后能实现一些酷炫的效果咯。以下案例纯css3实现,一点都没用js (入门简单,但是水很深)叮当猫纯用css3做出 http://codepen.io/airen/pen/icFba ...
css3能做什么
响应式开发的基础,然后能实现一些酷炫的效果咯。
以下案例纯css3实现,一点都没用js (入门简单,但是水很深)
叮当猫纯用css3做出 http://codepen.io/airen/pen/icFba
如果大家感兴趣,大家可以去慕课网上找大漠老师的课学习。
边框
1.圆角效果 border-radius:border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ border-radius: 100%;就是一个圆了。
border-radios:100px/10px (水平100,垂直10)
2.阴影 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];(阴影模糊半径:只能是正值;阴影扩展半径:可以是正负值)(自带边框)
外阴影x和y(正值)出现在右下;内阴影x和y(正值)出现在左上;
3.为边框应用图片 border-image:
颜色相关
1.颜色之RGBA
语法:color:rgba(R,G,B,A) (A为透明度参数,取值在0~1之间,不可为负值)
2.渐变色彩
文字与字体
1.text-overflow (clip:剪切;ellipsis:省略标记)
省略号效果:text-overflow:ellipsis; overflow:hidden;white-space:nowrap
2.嵌入字体@font-face
3.文本阴影text-shadow
text-shadow: X-Offset Y-Offset blur color; x正向右,y正向下;Blur:是指阴影的模糊程度 (text-shadow: 2px 2px 0 red;)
与背景相关的样式
1.background-origin : border-box | padding-box | content-box;背景图片分别是从边框,内边距(默认值),内容区域开始显示。背景需要设置no-repeat属性。
2.background-clip:默认值为border-box,其他同上
3.background-size:
background-size: auto | <长度值> | <百分比> | cover | contain
①.长度或百分比就设一个值时,图片等比缩放。
②.cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
③.contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
4.multiple backgrounds
background:url(http://eg.png) no-repeat left top/200px 55%
CSS3选择器
1.属性选择器:
2.结构性伪类选择器:root (根元素为html)、:not 、:empty、:target、:first-child 、:last-child 、:nth-child(n) (括号里可以是2n+1、-n+5、even、odd等)、:nth-last-child(n) (同上)
x:first-of-type 、x:nth-of-type(n) (括号里同上)、x:last-of-type、x:nth-last-of-type(n)、only-child (子元素只有唯一)、only-of-type (子元素类型唯一)
:enabled、:disabled
:checked(选择框加点变化示例)、::selection(改变用鼠标选择网页文本的样式)
:read-only(与html中readonly='readonly'配合使用)、:read-write (与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。)
::before && ::after(作出如下效果图)
拓展:CSS3实现曲边阴影&&翘边阴影
曲边阴影 翘边阴影
曲边阴影方法:把直角阴影写在盒子上,在盒子内部插入两个曲线阴影,通过定位让曲线阴影和直角阴影重合,改变z-index,boarder-radios来达到效果。
翘边阴影方法:直角阴影加上两个阴影
以下为实现代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS实现曲线阴影和翘边阴影</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="css/style.css"> 7 </head> 8 <body> 9 <div class="wrap effect">10 <h1>Shadow Effect</h1>11 </div>12 <ul class="box">13 <li><img src='/images/loading.gif' data-original="images/photo1.jpg"></li>14 <li><img src='/images/loading.gif' data-original="images/photo2.jpg"></li>15 <li><img src='/images/loading.gif' data-original="images/photo3.jpg"></li>16 </ul>17 </body>18 </html>
transition:all .5s ease-in-out .2s;
transition-property:指定过渡或动态模拟的CSS属性
:常见过渡属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:过渡函数
transition-delay:过渡延迟时间
连写:-webkit-animation:move 10s ease-in 0.5s infinite
关键帧:@Keyframes
1 @Keyframes changecolor{ 2 0%{ 3 background: red; 4 } 5 20%{ 6 background:blue; 7 } 8 40%{ 9 background:orange;10 }11 60%{12 background:green;13 }14 80%{15 background:yellow;16 }17 100%{18 background: red;19 }20 }21 div {22 width: 300px;23 height: 200px;24 background: red;25 color:#fff;26 margin: 20px auto;27 }28 div:hover {29 animation: changecolor 5s ease-out .2s;30 }
原标题:CSS3知识点整理一些demo
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。