css3新特性总结

novo 发布于2019-08-30 15:55 / 1234人阅读

摘要：六过渡和动画过渡效果，通过指定某些属性和变幻参数，以原始定义为开始状态，通过鼠标操作变化，状态定义结束状态，实现过渡效果。

一、圆角边框

border-radius:5px;

二、多背景图

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

三、颜色和透明度(由原来的rgb到现在的rgba)

background: rgba(0,0,0,.5);

四、多列布局和弹性盒模型

display: flex;

五、盒子的变幻（2D、3D）

transform: translate(50px,100px);//移动
transform: rotate();//旋转
transform: scale();//缩放
transform: skew();//倾斜

用于元素的直接或者鼠标感应变化，没有其他变幻参数（如延时，持续时间，变幻曲线），立即改变。

六、过渡和动画

transition: width 1s linear 2s;

过渡效果，transition通过指定某些属性和变幻参数，以原始定义为开始状态，通过鼠标操作变化(hover)，hover状态定义结束状态，实现过渡效果。

animation: myfirst 5s;
@keyframes myfirst {
    0% {background: block;}
    25% {background: red;}
    50% {background: yellow;}
    100% {background: green;}
}

动画效果，加强版的过渡效果，通过animation指定动画名和动画参数，@keyframes定义动画内容，根据参数自动触发。

七、引入web字体（在服务器端存储）

@font-face {
    font-family: myfirstfont;
    src: url(sansation_light.woff);
}
div {
    font-family: myfirstfont;
}

八、媒体查询

body{
    background: yellow;
}
@media screen and (max-width: 480px){
    background: red;
}

九、阴影

h1 {//文字阴影
    text-shadow: 5px 5px 5px red;
}
div {//盒子阴影
    box-shadow: 10px 5px 5px yellow;
}

私有云 idc机房托管新特性总结新特性新特性整理 PHP新特性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117353.html

个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

Ethan815 2019-08-05 11:54 评论0 收藏0
个人总结（css3新特性）

摘要：要实现这一点，必须规定两项内容指定要添加效果的属性指定效果的持续时间。当动画完成后，保持最后一个属性值在最后一个关键帧中定义。在所指定的一段时间内，在动画显示之前，应用开始属性值在第一个关键帧中定义。 1.前言 css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但...

马永翠 2019-08-29 13:12 评论0 收藏0
前端开发周报: CSS 布局方式与JavaScript数据结构和算法

摘要：如果没有学习过计算机科学的程序员，当我们在处理一些问题时，比较熟悉的数据结构就是数组，数组无疑是一个很好的选择。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常见 CSS 布局方式详见：一些常见的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryb...

huhud 2019-08-20 18:59 评论0 收藏0
前端开发周报: CSS 布局方式与JavaScript数据结构和算法

摘要：如果没有学习过计算机科学的程序员，当我们在处理一些问题时，比较熟悉的数据结构就是数组，数组无疑是一个很好的选择。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常见 CSS 布局方式详见：一些常见的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryb...

shiguibiao 2019-08-05 11:54 评论0 收藏0