Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer: 2016-06-24 11:46:46
original
1448 Les gens l'ont consulté

Copier après la connexion
Copier après la connexion
Copier après la connexion

 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         }
Copier après la connexion

Copier après la connexion
Copier après la connexion
Copier après la connexion

 
Copier après la connexion

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

 

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal