admin管理员组文章数量:1573361
在项目开发中我们采用的CSS3新特性有
1.CSS3的选择器
1)E:last-child 匹配父元素的最后一个子元素E。
2)E:nth-child(n)匹配父元素的第n个子元素E。
3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
2. @Font-face 特性
Font-face 可以用来加载字体样式,而且它还能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。
@font-face {
font-family: BorderWeb;
src:url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src:url(RUNICMT0.eot);
}
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }
淘宝网字体使用
@font-face {
font-family: iconfont;
src: url(//at.alicdn/t/font_1465189805_4518812.eot);
}
3. 圆角
border-radius: 15px;
4. 多列布局 (multi-column layout)
<div class="mul-col">
<div>
<h3>新手上路</h3>
<p>新手专区 消费警示 交易安全 24小时在线帮助 免费开店</p>
</div>
<div>
<h3>付款方式</h3>
<p>快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款</p>
</div>
<div>
<h3>淘宝特色</h3>
<p>手机淘宝 旺信 大众评审 B格指南</p>
</div>
</div>
.mul-col{
column-count: 3;
column-gap: 5px;
column-rule: 1px solid gray;
border-radius: 5px;
border:1px solid gray;
padding: 10px ;
}
兼容性不好,还不够成熟。还不能用在实际项目中。
5.阴影(Shadow)
.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}
OPPO官网的阴影特效 http://www.oppo/cn/products.html
6.CSS3 的渐变效果
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
这里 linear 表示线性渐变,从左到右,由蓝色(#2A8BBE)到红色(#FE280E)的渐变。
7.css弹性盒子模型
<div class="boxcontainer">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.boxcontainer {
width: 1000px;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
}
.item {
background: #357c96;
font-weight: bold;
margin: 2px;
padding: 20px;
color: #fff;
font-family: Arial, sans-serif;
}
8. CSS3制作特效
1) Transition 对象变换时的过渡效果
transition-property 对象参与过渡的属性
transition-duration 过渡的持续时间
transition-timing-function 过渡的类型
transition-delay 延迟过渡的时间
缩写方式:
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
拆分方式:
transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;
示例代码
<style type="text/css">
.main{
position: relative;
margin: 0 auto;
height:45px;
width: 300px;
background-color:lightgray;
transition:background-color .6s ease-in 0s;
}
.main:hover{
background-color: dimgray;
}
</style>
<div class="main"></div>
2) Transforms 2D转换效果
主要包括 translate(水平移动)、rotate(旋转)、scale(伸缩)、skew(倾斜)
3) Animation动画特效
<style type="text/css">
.main{
position: absolute;
left: 10px;
top:200px;
height:45px;
width: 300px;
background-color:cadetblue;
}
.main:hover{
animation: animations 2s ease 0s;
}
@keyframes animations {
0%{
left: 10px;
opacity: 1;
}
50%,70%{
left: 50%;
opacity: .7;
margin-left:-150px;
}
100%{
left: 100%;
opacity: 0;
margin-left:-300px;
}
}
</style>
<div class="main"></div>
总结(常用):
1.新增选择器
p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
2.新增伪元素
::before 和 ::after
3.弹性盒模型
display: flex;
4.多列布局
column-count: 5;
5.媒体查询
@media (max-width: 480px) {.box: {column-count: 1;}}
6.个性化字体
@font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
7.颜色透明度
color: rgba(255, 0, 0, 0.75);
8.圆角
border-radius: 5px;
9.渐变
background:linear-gradient(red, green, blue);
10.阴影
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
11.倒影
box-reflect: below 2px;
12.文字装饰
text-stroke-color: red;
13.文字溢出
text-overflow:ellipsis;
14.背景效果
background-size: 100px 100px;
15.边框效果
border-image:url(bt_blue.png) 0 10;
16.旋转
transform: rotate(20deg);
17.倾斜
transform: skew(150deg, -10deg);
18.位移
transform: translate(20px, 20px);
19.缩放
transform: scale(.5);
20.平滑过渡
transition: all .3s ease-in .1s;
21.动画
@keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
本文标签: 新特性
版权声明:本文标题:CSS3新特性 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727745717a1127772.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论