15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 CSS

CSS3变形过渡

王永康| 发布于 2021-07-13 21:54:54| 512阅读| 0点赞| 0评论
举报

主要是实现鼠标移到某盒子,盒子动态效果

语法
transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]  默认值:看每个独立属性

取值
[ transition-property ]: 检索或设置对象中的参与过渡的属性 [ transition-duration ]: 检索或设置对象过渡的持续时间  [ transition-timing-function ]: 检索或设置对象中过渡的动画类型 [ transition-delay ]: 检索或设置对象延迟过渡的时间

没有设置任何属性的样子

<div class="box">
    <div class="content">
    	<a href="###" class="pic">
        	<img src="cat.jpg" />
        </a>      
    </div>
</div>


加上过渡效果后

body{background-color:#E9E9E9; color:#333333; font-family:"Lucida handwriting",Arial,Helvetica,sans-serif; font-size:16px;}
	a,a:hover{color:#333333; text-decoration:none;}
	.box{width:500px; margin:100px auto 0; font-size:0.75em;}
	.title{font-size:1.5em;}
	.pic img{
		width:256px;
		border: 0px;
	}
	.pic{
		display:block;
		width:256px;
		margin:60px 0 0;
		padding:10px 10px 15px;
		text-align:center;
		background:white;
		border:1px solid #bfbfbf;
		-webkit-transform:rotate(10deg);
		-webkit-box-shadow:2px 2px 3px rgba(135, 139, 144, 0.4); 
		-webkit-transition:all 1.5s ease-in;
	}
	.pic:hover{
		border-color:#9a9a9a;
		border-radius: 15px;
		-webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
		-webkit-transform:rotate(0deg) scale(1.3);
	}

加上样式后,鼠标没有放在盒子上的样子

当鼠标放在盒子上是

图片变正了,其综合还有过度效果未展示

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

王永康
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部