欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css3中变形函数(同样是对元素来说的)和元素通过改变自身属性达到动画效果_html/css_WEB-ITnose

程序员文章站 2022-05-12 17:17:18
...
   

 1  /*对元素进行改变(移动、变形、伸缩、扭曲)*/ 2  .wrapper{ 3    margin:100px 100px auto auto; 4    width:300px; 5    height:200px; 6    border:2px dotted blue; 7 } 8 .wrapper div{ 9     width:300px;10     height:200px;11     background:red;12     color:blue;/*设置文本颜色  如果有的话*/13     text-align:center;/* 设置文本位置  如果子元素有的话 */14     line-height:200px;/* 设置行间距 */15     border-radius:30px;/* 设置角半径 */16     17     /*属性*/18     transform-origin:top right;/*设置元素的中心点 top center right left bottom  合理的情况下任意两两组合 例如 top right  表示右上角*/19     20     /*函数*/21     transform:rotate(20deg);/* 旋转20°,整数表示顺时针,负数表示逆时针 */22     transform:skew(15deg,20deg);/*x轴扭曲15°,y轴扭曲20°*/23     transform:scale(1.5,0.5);/*根据中心点x方向放大1.5倍 y轴缩小0.5倍*/24     transform:translate(-100px,50px);/*沿x轴负方向移动100px,沿y轴正方向移动   25     50px*/26    }27  span{28        display:block;/* 转换为块状元素 */29         }
   

 

   
   通过鼠标的点击、获得焦点,被点击或对元素的任何改变中触发,并平滑的以动画的效果改变css的属性值对元素用到的四个属性为:
  1. transition-property:width;//表示对那个属性进行变化
  2. transition-duration:5s;//表示动画持续的时间
  3. transition-timing-function:ease;
  4. transition-delay:0.5s;//表示动画延时时间
例子: 1    .wrapper{ 2    margin:auto; 3    width:300px; 4    height:200px; 5    border:2px dotted blue; 6  7    transition-property:all;/*表示hover事件中的所有属性,改成width的话就只对width有            8                                            效,而height会瞬间变为50px不具有过度效果*/ 9    transition-duration:5s;/*表示动画的持续时间*/10    transition-timing-function:ease-in;/*表示动画的播放方式由快到慢*/11    transition-delay:0.15s;/*表示动画的延时时间*/12 }13 .wrapper:hover14 {15   width:500px;16   height:50px;17 }