7CSS动画-2D、3D转换，过滤，动画，多列以及用多列实现瀑布流

来源：互联网发布：电脑防火墙软件编辑：程序博客网时间：2024/04/30 10:04

1.2D、3D转换

通过CSS3转换，可以对元素进行移动、缩放、转动、拉长或拉伸。

注：使用动画在要指明浏览器

（1）2D转换方法

translate() 平移

rotate() 旋转

scale() 缩放

skew() 倾斜度

matrix()

(2)3D转换方法

rotateX()

rotateY()

div{    width:200px;    height:200px;    background-color:blue;}/*.div1{*/  /*  transform: translate(200px,100px);   /* -webkit-transform: translate(200px,100px);/* safari chrome*//*-ms-transform:translate(200px,100px) ;/*IE 360*//*-o-transform: translate(200px,100px);/*opera*//* -moz-transform: translate(200px,100px);/*火狐*//*}*//*.div1{*/    /*transform: rotate(200deg);/* 旋转角度*/    /* -webkit-transform: rotate(200deg);/* safari chrome*/    /*-ms-transform:rotate(200deg) ;/*IE 360*/    /*-o-transform: rotate(200deg);/*opera*/    /* -moz-transform: rotate(200deg);/*火狐*//*}*//*.div1{*/    /*transform:scale(2,1) ;/*缩放的倍数*/    /* -webkit-transform:scale(1,2);/* safari chrome*/    /*-ms-transform:scale(1,2) ;/*IE 360*/    /*-o-transform:scale(1,2);/*opera*/    /* -moz-transform: scale(1,2);/*火狐*//*}*//*.div1{    transform:rotateX(100deg) ;    /* -webkit-transform:rotateX(100deg);/* safari chrome*/    /*-ms-transform:rotateX(100deg) ;/*IE 360*/    /*-o-transform:rotateX(100deg);/*opera*/    /* -moz-transform:rotateX(100deg);/*火狐*//*}*/html代码：<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>动画</title>   <link href="style.css" type="text/css" rel="stylesheet"></head><body> <div>     普通显示 </div> <br><div class="div1">    动画显示</div></body></html>

2.过渡

CSS3中过渡元素从一种样式转换到另一种样式

动画效果的CSS

动画执行的时间

属性描述

transition 设置四个过滤状态

transition-property 过滤的名称

transtion-time-function 过滤效果的时间曲线

transition-delay 过滤效果开始时间

简单事例代码如下：

div{    width:100px;    height: 100px;    background-color: aqua;    transition: width 2s,height 2s,transform 2s;    -webkit-transition: width 2s,height 2s,-webkit-transform 2s ;    transition-delay: 2s;}/* 鼠标移动到div上面选择360度宽和高变成300*/div:hover{    width: 300px;    height: 300px;    transform: rotate(200deg);    -webkit-transform:rotate(200deg) ;}html中<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>动画</title>   <link href="style.css" type="text/css" rel="stylesheet"></head><body><div>过滤</div></body></html>

</pre><p></p><p>3.CSS动画</p><p>CSS3的动画需要遵循@keyframes规则</p><p><span style="white-space:pre"></span>规定动画的时长</p><p><span style="white-space:pre"></span>规定动画的名称</p><p>简单事例如下：</p><p>css代码：</p><p></p><pre code_snippet_id="1641584" snippet_file_name="blog_20160410_4_4058143" name="code" class="css">.div{    height: 200px;    width: 200px;    animation: a 5s infinite alternate ;/* infinite alternate让动画循环进行*/    position: relative;/*这里必须设否则无位变化效果*/    -webkit-animation: a 5s infinite alternate;/* a为名称 5s为动画执行的时间*/}@keyframes a {    0% {        top: 0px;        background: aqua;        left: 200px    }    25% {        top: 30px;        left: 400px;        background: darkgreen;    }    75% {        top: 50px;        left: 100px;        background: darkmagenta;    }    100% {        top: 200px;        left: 500px;        background: chartreuse;    }}@-webkit-keyframes a {            0% {                top: 0px;                background: aqua;                left: 200px            }            25% {                top: 30px;                left: 400px;                background: darkgreen;            }            75% {                top: 50px;                left: 100px;                background: darkmagenta;            }            100% {                top: 200px;                left: 500px;                background: chartreuse;            }        }

</pre><pre code_snippet_id="1641584" snippet_file_name="blog_20160410_6_9106889" name="code" class="html">HTML：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3动画</title>    <link rel="stylesheet" href="mycss.css" type="text/css"></head><body>  <div class="div">  </div></body></html>

4.多列

CSS3中多列：可以创建多列l来对文本或者区域进行布局

column-gap 属性规定列之间的间隔

column-count 属性规定元素应该被分隔的列数：

column-rule 属性设置列之间的宽度、样式和颜色规则。

简单事例代码：

css代码：

.div{    column-count: 3;    -webkit-column-count: 3;    column-gap: 40px;    -webkit-column-count: 40px;    column-rule: 5px outset red;    -webkit-column-rule:10px outset red ;}

HTML代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3多列</title>    <link rel="stylesheet" href="mycss.css" type="text/css"></head><body>  <div class="div">      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful      you are beautiful  </div></body></html>

5多列实现瀑布流效果

事例代码：

HTML代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3瀑布流</title>    <link rel="stylesheet" href="mycss.css" type="text/css"></head><body>  <div class="container">      <div> <img src="psb%20(1).jpg">      <p>hello girl</p></div>      <div> <img src="psb%20(2).jpg"></div>      <div> <img src="psb%20(3).jpg"></div>      <div> <img src="psb%20(4).jpg"></div>      <div> <img src="psb%20(5).jpg"></div>      <div> <img src="psb%20(6).jpg"></div>      <div> <img src="psb%20(7).jpg"></div>      <div> <img src="psb%20(8).jpg"></div>      <div> <img src="psb%20(9).jpg"></div>      <div> <img src="psb%20(10).jpg"></div>      <div> <img src="psb%20(11).jpg"></div>      <div> <img src="psb%20(12).jpg"></div>      <div> <img src="psb%20(13).jpg"></div>      <div> <img src="psb%20(14).jpg"></div>      <div> <img src="psb%20(15).jpg"></div>      <div> <img src="psb%20(16).jpg"></div>      <div> <img src="psb%20(17).jpg"></div>      <div> <img src="psb%20(18).jpg"></div>      <div> <img src="psb%20(19).jpg"></div>  </div></body></html>

CSS代码：

.container{    column-width:300px ;    -webkit-column-width: 300px;    column-gap: 5px;    -webkit-column-gap: 5px;}.container div{    width: 300px;    margin: 5px,0;//5为上下边距 0为左右边距}.container p{    text-align: center;    color:lightseagreen;}

0 0