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

WBOY
Lepaskan: 2016-06-24 11:46:46
asal
1452 orang telah melayarinya

Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

 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         }
Salin selepas log masuk

Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

 
Salin selepas log masuk

Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
   通过鼠标的点击、获得焦点,被点击或对元素的任何改变中触发,并平滑的以动画的效果改变css的属性值对元素用到的四个属性为:
Salin selepas log masuk
  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 }
Salin selepas log masuk

 

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan