使用css3实现旋转、扭曲、过渡等动画特效

CSS3 新民 2279℃ 已收录 3评论

使用rotate()函数实现元素旋转

    css 代码如下:

    .container{
			width: 500px;
			height: 500px;
			border: 1px solid red;
		}
		
		.container div{
			width: 500px;
			height: 500px;
			background: yellow;
			color:	#000;
			line-height: 500px;
			text-align: center;
			
			/* 使用rotate() 方法实现旋转    当值为正数时元素顺时针方向旋转
			   当值为负数时元素逆时针旋转
			*/
			transform: rotate(30deg);
			-webkit-transform: rotate(300deg);
			-ms-transform: rotate(30deg);
			-o-tansform: rotate(30deg);
			-moz-transform: rotate(30deg);
		}


              html 代码如下:
          <div class="container">
                  <div>我不想旋转</div>
          </div>

使用skew(x,y)函数实现元素倾斜或者扭曲

    css代码如下:
   
   .skew{
			width: 500px;
			height: 500px;
			background: #f5e346;
			
			/* 使用skew(x,y)方法实现扭曲或者倾斜 
			    当值为正数时元素向右扭曲
			  当值为负数时元素向左扭曲
			 */
			transform: skew(45deg);
			-webkit-transform: skew(45deg);
			-ms-transform: skew(45deg);
			-moz-transform: skew(45deg);
			-o-transfor: skew(45deg);
		}
		
		.skew span{
			text-align: center;
			line-height: 500px;
			
			display: block;
			transform: skew(-45deg);
			-webkit-transform: skew(-45deg);
			-ms-transform: skew(-45deg);
			-moz-transform: skew(-45deg);
			-o-transform: skew(-45deg);
		}

            html代码如下:

               <div class="skew">
    	            <span>我不想扭曲 </span>
                </div>

使用scale(x,y) 实现元素缩放

        css 代码如下:
        .skew span:hover{
			text-align: center;
			line-height: 500px;
			
			display: block;
			opacity: 0.5;
			
			/*  使用scale(x,y) 实现缩放效果   */
			transform: scale(0.8);
			-webkit-transform: scale(0.8);
			-moz-transform: scale(0.8);
			-o-transform: scale(0.8);
			-ms-transform: scale(0.8);
		}

使用translate(x,y)实现位移

     css 代码如下:
     .translate{
			width: 300px;
			height: 400px;
			border-radius: 5px;
			background: orange;
			position: absolute;
			top:1020px;
			
			/* 使用 translate(x,y) 实现位移 
				实现水平垂直居中
			*/
			transform: translate(50%,50%);
			-webkit-transform: translate(50%,50%);
			-moz-transform: translate(50%,50%);
			-o-transform: translate(50%,50%);
			-ms-transform: translate(50%,50%);
		}


         html代码如下:

          <!--  位移  -->
    <div class="translate">
    	<p>使用translate(x,y)实现位移< </p>
    </div>

使用过渡属性transition-property实现动画特效:

        css 代码如下:
        
		.transition-property{
			width: 200px;
			height: 200px;
			background: red;
			margin: 50px auto;
			
			/*  transition-property:指定过渡或动态模拟的CSS属性   */
			transition-property: width;
			/* transition: all 5s; */
			
			/*  过渡改变的width   */
			transition: width;
			
			/*   指定完成过渡所需的时间  ,如果前面不加点,过渡速度会变得比较慢  */
			-webkit-transition-duration: .5s;
			transition-duration: .5s;
			
			/*  指定过渡函数    */
			-webkit-transition-timing-function: ease-in;
			transition-timing-function: ease-in;
			
			/*    指定开始出现的延迟时间  */
			-webkit-transition-delay: .18s;
			transition-delay: .18s;
		}
		
		
		.transition-property:hover{
			width: 400px;
			border-radius: 5px; 
		}


             html代码如下:
               
     <div class="transition-property">过度复合属性 </div>
5344f1320001481905640812

本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://www.snowruin.com/?p=1586
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情 代码 贴图 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)条精彩评论。
  1. 您好,我站yuedudg.cn申请你站友情链接,360收录 7000 同意的话到我站留言,秒回连
    1232017-08-13 23:58 回复| Google Chrome 55.0.2883.87| Windows 8.1
    • 新民
      友链已加,请贵站也将我的添加上
      新民2017-09-22 18:16 回复| Google Chrome 45.0.2454.101| unknow
  2. 我喜欢啊,请继续 支持你
    陈雨萌2015-12-23 18:33 回复| unknow| unknow