CSS3相关知识练习

作者: 该帐号已被查封_才怪 | 来源:发表于2016-11-22 23:33 被阅读97次

CSS3相关知识练习
梳理CSS3 Transform相关知识
第十一周第四天笔记之css3知识解读
使用Jsoup+AsyncTask爬取网页资源
css3渐变:线性和径向
CSS3 基础及动画相关实践
CSS3 背景
前端学习网站大全1
CSS3动画/animation/ @keyframes/wil
CSS3:边框与圆角

一、问答

CSS3有哪些常见的新特性？

** 1、CSS 选择器 **
例如：E:nth-child(even)，E :nth-child(odd)，E:not()，E:first-child，E:nth-last-child(n) ，E:nth-of-type(n)，E:nth-last-of-type(n)，E:last-child，E:first-of-type ，E:checked 等等
** 2、盒模型 **
例如：box-sizing: border-box
** 3、背景和边框 **

a、背景
background-clip 规定背景的绘制区域;
background-origin 规定背景图片的定位区域;
background-size 规定背景图片的尺寸;
b、边框
border-image 设置所有边框图像的速记属性。
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
box-shadow 附加一个或多个下拉框的阴影

** 4、文字特效 **
text-shadow属性适用于文本阴影;
word-wrap:break-word 自动换行属性允许您强制文本换行
word-break: keep-all;//break-all 单词拆分换行属性
@font-face 规则

** 5、2D/3D转换 **

Paste_Image.png

3D转换属性

3D 转换方法

** 6、动画 **

Paste_Image.png

** 7、多列布局 **

Paste_Image.png

** 8、用户界面 **

Paste_Image.png

** 9、渐变**
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

以上具体详情见此处：http://www.runoob.com/css3/css3-tutorial.html

补充：
1、关于3d转换的资料可详见： http://www.w3cplus.com/css3/css3-3d-transform.html
2、关于2d中的transform:matrix() 可详见如下:
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

3、对于低版本IE（IE6-IE9）兼容CSS3方法可见：css3pie官网或PIE使IE支持CSS3圆角盒阴影与渐变渲染

二、代码

（一）、写出如下 CSS3效果的简单事例

1、圆角，圆形
2、div 阴影
3、2D 转换：放大、缩小、偏移、旋转
4、3D 转换：移动、旋转
5、背景色渐变
6、过渡效果
7、动画

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .circularA{
            width: 100px;
            height:100px;
            border: 1px solid #000;
            border-radius: 10px;
            background-color: #6633FF;
            text-align: center;
            line-height: 100px;
            margin: 10px;
        }
        .circularB{
            width: 100px;
            height:100px;
            border: 1px solid #000;
            border-radius: 50%;
            background-color: #FF6699;
            text-align: center;
            line-height: 100px;
            margin: 10px;
        }
        .shadow{
            background-color: white;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            text-align: center;
            margin: 10px;
            width: 50%;
            height: 50%;
            color: #666;
            transform: rotate(-7deg);
        }
        .shadow>img{
            width: 90%;
            height: 90%;
            margin-top: 20px;
        }

        .change2d{
            /*margin: 100px;*/
            color: #666;
            text-align: center;
            width: 300px;
            margin: 150px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transform: rotate(9deg);

          }
        .change2d>img{
            margin-top: 20px;
            width: 90%;
            height: auto;
            color: #666;
            cursor: pointer;

        }
        .change2d:hover{
            transform: matrix(1.5,0,0,1.5,50,50);
            transition: all 1s;
        }
        .change3d{
            /*margin: 100px;*/
            color: #666;
            text-align: center;
            width: 300px;
            margin: 150px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

        }
        .change3d>img{
            margin-top: 20px;
            width: 90%;
            height: auto;
            color: #666;
            cursor: pointer;

        }
        .ct-3d{
            /*transform-style:preserve-3d;*/
            perspective: 160;
            -webkit-perspective:160; /* Safari and Chrome */
            perspective-origin:150% center;
            -webkit-perspective-origin:150% center;/* Safari and Chrome */
        }
        .change3d:hover{
            transform:rotateX(5deg) translate3d(250px,50px,10px);
            transition: all 1s;
        }
        .bgGradient{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: repeating-radial-gradient(red ,green,blue 10%);
        }
        .transitionEg{
            width: 300px;
            height: 500px;
            margin: 50px 10px 10px 150px;
            transform-style:preserve-3d;
        }
        .transitionEg img{
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 400px;

        }
        .transitionEg img:nth-child(1){
            z-index: 1;
            opacity: .6;

        }
        .transitionEg img:nth-child(2){
            z-index: 2;
            -webkit-transform: scaleZ(3) rotateX(45deg);
            transform: scaleZ(3) rotateX(45deg);

        }
        .transitionEg h3{
            position: absolute;
            top: 80%;
            left: 20%;

        }
        .transitionCt{
            position: relative;
            -webkit-perspective: 4200;
            perspective: 4200;
            cursor: pointer;

        }
        .transitionCt:hover{
            -webkit-perspective: 2200;
            perspective: 2200;
            transition: all 2s;
        }
        .btn{
            margin: 20px 10px 200px 10px;
            display: inline-block;
            padding: 15px 25px;
            font-size: 24px;
            font-weight: bolder;
            cursor: not-allowed;
            text-align: center;
            color: #fff;
            border-radius: 15px;
            background-color: #4caf39;
            box-shadow: 0 20px #999;
        }
        @keyframes myfirstAnimation {
            from { }
            to{
                background-color: #0c8e35;
                box-shadow: 0 2px #666;
                transform: translateY(12px);
            }
        }
        .btn{
            -webkit-animation: myfirstAnimation 2s linear 1.5s infinite;
            animation: myfirstAnimation 2s linear 1.5s infinite;
            /*-webkit-animation-name:myfirst;*/
            /*-webkit-animation-duration:5s; 完成时间 */
            /*-webkit-animation-timing-function:linear;规定动画的速度曲线。默认是 "ease"。*/
            /*-webkit-animation-delay:2s; 延迟时间*/
            /*-webkit-animation-iteration-count:infinite; 循环次数 */
            /*-webkit-animation-direction:alternate; 是否反过来运行*/
            /*-webkit-animation-play-state:running;规定动画是否正在运行或暂停*/
        }
        .animateEg{
            height: 100px;
            width: 400px;
        }

    </style>
</head>
<body>
<div class="circularA">圆角</div>
<div class="circularB">圆形</div>
<div class="shadow">![](./lunbo2.jpg)<h3>美丽的风景</h3></div>
<div class="change2d">![](./lunbo1.jpg)<h3>鼠标放上去我会放大</h3></div>
<div class="ct-3d">
    <div class="change3d">![](./1.jpg)<h3>鼠标放上去我会移动和旋转</h3></div>
</div>
<div class="bgGradient"></div>
<div class="transitionCt">
<div class="transitionEg">
    ![](./lunbo3.jpg)
    ![](./lunbo3.jpg)
    <h3>鼠标放上来我会慢慢动</h3>
</div>
</div>

<div class="animateEg">
    <button class="btn">按钮正在被连续按下</button>
</div>


</body>
</html>

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/1/task44-1.html

（二）、实现如下全屏图加过渡色的效果（具体效果随意）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        div{
            background: url("./1.jpg") no-repeat center center ;
            background-size: cover;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        div:before{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            display: block;
            content: "";
            width: 50%;
            background: linear-gradient(to bottom right , rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后）*/
        }
        div:after{
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            display: block;
            content: "";
            width: 50%;
            background: linear-gradient(to bottom left, rgba(187, 61, 187,0),rgba(187, 61,187,1)); /* 标准的语法（必须放在最后）*/

        }

        
    </style>
</head>
<body>
<div>
</div>

</body>
</html>

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/2/task44-2.html

（三）、写出如下 loading 动画效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
        }

        .bg{
            background-color: rgb(52,83,145);
            width: 100%;
            height: 100%;
            position: relative;
        }
        .loding:before,
        .loding,
        .loding:after{
            width: 20px;
            height: 40px;
            background-color: #ffffff;
            position: absolute;
        }
        .loding{
            top: 10%;
            left: 40%;
        }
        .loding:before{
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: -150%;
        }
        .loding:after{
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 100%;
            margin-left: 10px;
        }
        @keyframes myLodingFrames {
            0%,80%,100% {
                height: 40px;
                box-shadow: 0 0 #fff;
            }
            20%{
                height: 50px;
                box-shadow: 0 -20px #fff;
            }

        }
        .loding:before,
        .loding,
        .loding:after{
            -webkit-animation: myLodingFrames 1s linear  infinite   ;
                     animation: myLodingFrames 1s linear  infinite  ;
        }

        .loding{
            -webkit-animation-delay: 0.16s;
            animation-delay: 0.16s;
        }
        .loding:after{
            -webkit-animation-delay: 0.32s;
            animation-delay: 0.32s;
        }


    </style>
</head>
<body>
<div class="bg">
    <div class="loding"></div>
</div>

</body>
</html>

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/3/task44-3A.html

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
        }

        .bg{
            background-color: rgb(52,83,145);
            width: 100%;
            height: 100%;
            position: relative;
        }
        .loding{
            width: 100px;
            height: 100px;
            border-top:20px solid rgba(255,255,255,0.2) ;
            border-right:20px solid rgba(255,255,255,0.2);
            border-bottom:20px solid #fff;
            border-left:20px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            position: absolute;
            top: 10%;
            left: 40%;
        }
        @keyframes myLodingFrames {
            from {transform: rotate(0deg)}
            to {transform: rotate(360deg) }
        }
        .loding{
            -webkit-animation: myLodingFrames 1s linear 1.5s infinite;
            animation: myLodingFrames 1s linear 1.5s infinite;
        }

    </style>
</head>
<body>
<div class="bg">
    <div class="loding"></div>
</div>

</body>
</html>

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/3/task44-3B.html

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *

CSS3相关知识练习
一、问答 CSS3有哪些常见的新特性？ ** 1、CSS 选择器 **例如：E:nth-child(even)，E...
梳理CSS3 Transform相关知识
transform的本意就是变换、使...变形的意思，在CSS3中transform属性其实就是用于设置元素某些属...
第十一周第四天笔记之css3知识解读
1 css3知识解读 css3解读链接：css3知识解读自定义字体利用@font-face{}引入自定义字体；创...
使用Jsoup+AsyncTask爬取网页资源
笔记目标：1.练习使用Jsoup的相关功能2.练习使用AsyncTask异步任务3.复习Android相关知识点 ...
css3渐变:线性和径向
知识点： CSS3 渐变CSS3 线性渐变CSS3 径向渐变 CSS3 渐变渐变（gradients）可以在两个...
CSS3 基础及动画相关实践
一、分享目的普及CSS基础知识介绍CSS3基础及动画相关熟悉通过分析iceland首页动画源码，介绍使用CS...
CSS3 背景
知识点： CSS3 背景图像区域CSS3 背景图像定位CSS3 背景图像大小CSS3 多重背景图像CSS3 背景属...
前端学习网站大全1
css3渐变等相关特效【菜鸟教程】 http://www.runoob.com/css3/css3-gradien...
CSS3动画/animation/ @keyframes/wil
知识点：CSS3动画CSS3 animationCSS3 @keyframesCSS3 will-change 一...
CSS3:边框与圆角
知识点： CSS3圆角CSS3盒阴影CSS3边界图片一、CSS3圆角 border-radius属性一个最多可...