css3的学习

来源：互联网发布：c语言考试软件编辑：程序博客网时间：2024/06/05 09:23

css3的深入学习和研究

已经学完css3好几天了，今天抽出一点时间来总结一下，总体感觉css3就是在css的基础上增加了一下属性和特性。

1.我学习的笔记都在这里了，希望需要的可以借鉴哦！

2.通过css3的基础知识，我练习了一个转动的正方体代码如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        #view{            perspective:500px;            width: 200px;            height: 200px;            margin: 200px auto;            perspective-origin:250px -50px;        }        .item{            width: 200px;            height: 200px;            border: 1px solid black;            background-color: yellow;            font-size: 150px;            text-align: center;            opacity: 0.5;            position: absolute;        }        @keyframes  scroll{            100%{                transform:rotate3d(1,1,1,360deg);            }        }        #cube{            position: relative;            width: 200px;            height: 200px;            animation:scroll 2s linear 7s infinite;            transform-style:preserve-3d;        }        @-WEBKIT-KEYFRAMES item1{            100%{                transform:rotateY(-90deg);            }        }        #item1{            z-index: 6;            transform-origin:left;            animation:item1 1s linear 1s both;        }        @-WEBKIT-KEYFRAMES item2{            100%{                transform:rotateY(90deg);            }        }        #item2{            z-index: 5;            transform-origin:right;            animation:item2 1s linear 2s both;        }        @-WEBKIT-KEYFRAMES item3{            100%{                transform:rotateX(90deg);            }        }        #item3{            z-index: 4;            transform-origin:top;            animation:item3 1s linear 3s both;        }        @-WEBKIT-KEYFRAMES item4{            100%{                transform:rotateX(-90deg);            }        }        #item4{            z-index: 3;            transform-origin:bottom;            animation:item4 1s linear 4s both;        }        @-WEBKIT-KEYFRAMES item5{            100%{                transform:translateZ(200px);            }        }        #item5{            z-index: 2;            animation:item5 1s linear 5s both;        }        @-WEBKIT-KEYFRAMES item6{            100%{                transform:rotateY(180deg);            }        }        #item6{            z-index: 1;            animation:item6 1s linear 6s both;        }    </style></head><body><div id="view">    <div id="cube">        <div class="item" id="item1">1</div>        <div class="item" id="item2">2</div>        <div class="item" id="item3">3</div>        <div class="item" id="item4">4</div>        <div class="item" id="item5">5</div>        <div class="item" id="item6">6</div>    </div></div></body></html>

上述代码实现的效果图如下：

代码中基本都包含了css3的所有知识，适合我们这些初学者来练练手，并且会掌握css3

我推荐一个网址，有什么不懂得可以去查阅：http://www.css88.com/book/css/properties/positioning/index.htm

总结的不够齐全，希望大家多多提出意见哦!

阅读全文

0 0