Transition属性的使用实例

最新推荐文章于 2024-01-12 20:50:59 发布
最新推荐文章于 2024-01-12 20:50:59 发布
阅读量873 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Great_Wow/article/details/105134986
版权

目的:理解transition属性,2D变形的使用,熟练运用transition属性,transform属性实现过渡及变形效果

内容:当鼠标移上第一张图像时,产生直角边框过渡为圆角边框的效果

        当鼠标移上第二张图像时,产生逐渐放大的过渡效果

        当鼠标移上第三张图像时,产生图片旋转的过渡效果

        当鼠标移上第四张图像时,产生图片透明度逐渐变暗效果

        当鼠标移上四张图像的任意一图像时,都伴随着盒子阴影的过渡效果

图片第一行:样式

图片第二行:代码效果

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>过渡与变形的综合应用</title>
	<style>
		/* 定义 大盒子 ,修改盒子的 内外边距 ,并将背景颜色设为 黑色 */
		.main{
			width: 1110px;
			height: 250px;
			margin: 0 auto;
			background-color:black; 
		}
		/*定义四个盒子,修改其相关属性,并设置为 左浮动 */
		.box{
			width: 240px;
			height: 200px;
			margin-left: 25px;
			padding: 0;
			float: left;
		}
		/*第一个盒子,修改其相关属性,添加背景图*/
		.spring{
			border:5px solid white;
			padding: 0px; 
			width: 160px;
			height: 160px;
			position: relative;
			margin: 15px 10px 0px 20px;
			float: left;
			background-image: url(picture/spring.jpg);
			background-size: cover;
			/*将直角边框修改为圆角边框*/
			border-radius: 10px;
			/*变化的过渡时间*/
			transition: 2s;
		}
		/*鼠标移动上方时,第一个盒子的圆角边框在2s内变为圆形边框*/
		.spring:hover{
			border-radius: 50%;
			/*边框阴影效果*/
			box-shadow:white 0 0 30px;
		}
		/*第二个盒子,修改其相关属性,添加背景图*/
		.summer{
			border:5px solid white;
			padding: 0px; 
			width: 160px;
			height: 160px;
			position: relative;
			margin: 15px 10px 0px 20px;
			float: left;
			overflow: hidden;
			/*background-image: url(picture/summer.jpg);*/
			background-size: cover;
			/*将直角边框修改为圆角边框*/
			border-radius: 10px;
			/*变化的过渡时间*/
			transition: 3s;
		}
		/*边框阴影效果*/
		.summer:hover{
			box-shadow: white 0 0 30px;
		}
		/*设置图片过渡时间*/
		.sum{
			transition: all 3s;
		}
		/*图片放大原来1.4倍 */
		.sum:hover{
			transform: scale(1.4);
		}
		
		/*第三个盒子,修改其相关属性,添加背景图*/
	    .autumn{
			border:5px solid white;
			padding: 0px; 
			width: 160px;
			height: 160px;
			position: relative;
			margin: 15px 10px 0px 20px;
			float: left;
			background-image: url(picture/autumn.jpg);
			background-size: cover;
			/*将直角边框修改为圆角边框*/
			border-radius: 10px;
			/*变化的过渡时间*/
			transition: 3s;
	    }
	    /*鼠标移动上方时,第三个盒子逆时针旋转45°*/
	    .autumn:hover{
	    	transform: rotate(-45deg);
	    	/*边框阴影效果*/
	    	box-shadow:white 0 0 30px;
	    }
	    /*第四个盒子,修改其相关属性,添加背景图*/
	    .winter{
			border:5px solid white;
			padding: 0px; 
			width: 160px;
			height: 160px;
			position: relative;
			margin: 15px 10px 0px 20px;
			float: left;
			overflow: hidden;
			background: url(picture/winter.jpg) cover;
			/*将直角边框修改为圆角边框*/
			border-radius: 10px;
			/*变化的过渡时间*/
			transition: 3s;
	    }
	    /*边框影阴效果*/
	    .winter:hover{
	    	box-shadow:white 0 0 30px;
	    }
	  /* 图片过渡时间 */
	    .win{
	    	transition:all 3s;
	    }
	    /*鼠标移动上方时,第四个盒子的透明度变为原来的0.6*/
	    .win:hover{
	    	filter: alpha(opacity=60);
	    	--moz-opacity: 0.6;
	    	opacity: 0.6
	    }
	    /*设置一个小盒子加入字体,并设置为左浮动*/
		.letter{
			color: white;
			margin-top: 15px ;
			margin-left:70px;
			margin-bottom: 0px;
			margin-right: 0px;
			padding: 5px; 
			width: 70px;
			height: 15px;
			float: left;
		}
		/*该字体比其他字体长,单独设置*/
		.displacement{
			color: white;
			margin-top: 15px ;
			margin-left:45px;
			margin-bottom: 0px;
			margin-right: 0px;
			padding: 5px; 
			width: 115px;
			height: 15px;
			float: left;
		}
	</style>
</head>
<body>

	<div class="main"><!-- 最外层盒子 -->
		<div class="box"><!-- 第二层盒子 -->
		    <div class="letter">SHAPE</div>
		    <div class="spring">
		    </div>
	    </div>

	    <div class="box">
		    <div class="displacement">DISPLSCEMENT</div>
		    <div class="summer">
		        <img class="sum" src="picture/summer.jpg"/>   
		    </div>
		</div>

		<div class="box">
		    <div class="letter">POSITION</div>
		    <div class="autumn"> 	
		    </div>
		</div>

		<div class="box">
		    <div class="letter">COLOR</div>
		    <div class="winter">
		    	<img class="win" src="picture/winter.jpg"/>
		    </div>
		</div>
		
	</div>
</body>
</html>

 

拂柳小清风
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css transition实例
01-04
css transition实例 有点类似jquery的动画效果 没有使用过 比较奇特
CSS3 transition 实战Demo
CRPER
09-08 2618
基础理论 transition 有五个属性： property : 属性 ， 可以指定哪个CSS属性进行过渡，也能使用all全部属性生效 duration ： 持续时间 timing-function： 过渡函数，有linear（匀速），ease-in（渐现）,ease-out（渐隐） ,ease-in-out（渐显渐隐）等。。。 delay ： 是延迟 ，就是开始执行前等待的时间 综合写法：t
CSS3中transition过渡属性的简单应用实例
刘鹏博的博客
12-07 3833
我们在很多网站上看到一些当鼠标悬浮时，商品图片有一种放大的效果、盒子有上升、下降效果或者文字会偏移等等。这些其实都是增加用户体验的方式，那么，今天就以transition过渡属性来写一个比较通用且简单易懂的过渡效果。 先看效果图：         其实，我们给图片、文字或者盒子设置鼠标悬浮hover属性，就会有一些悬浮效果。但是，那样不用过渡属性的话，用户体验很是不好，响应过于生硬，剧
04.CSS3 transition属性及5个小案例分享
al654123的博客
02-29 1269
一、介绍 过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果，经常和 :hover 一起 搭配使用。 二、语法 transition: 要过渡的属性 花费时间 运动曲线 何时开始; transition: property duration timing-func...
css3中的transition的应用案例一
等待のL先森的博客
12-10 457
css3中的transition的应用案例一 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>traansform的图片移动的案例</title>
CSS3使用transition属性实现过渡效果
11-21
CSS3的transition属性是用于创建平滑的动画过渡效果的关键工具。这个属性允许CSS属性值在两种状态之间平滑地改变，而不是立即跳跃到新值。以下是对transition属性的详细解释： 1. **transition-property**：这个...
css3的transition属性详解
11-21
在这个例子中，三个属性`background-color`, `color`和`height`都设置了过渡效果，它们各自独立地进行平滑变化。 ### 兼容性和注意事项 `transition`属性是CSS3的一部分，因此在较新的浏览器中支持良好，但在一些...
HTML5&CSS3网页制作：transition属性.pptx
05-31
- 当使用transition属性设置多个过渡效果时，参数顺序是固定的，不能随意调整。即先指定属性，再设置时长，接着是速度曲线，最后是延迟时间。 4. **示例** 以下例子展示了当鼠标悬停在div上时，宽度从200px渐变至...
css3中transition属性详解
09-25
在实际使用中，`transition`属性通常会与`transform`属性结合，`transform`负责元素的变形，而`transition`则负责变形的过渡效果。通过组合这两个属性，可以创建出各种复杂的动态效果。 以下是一个简单的示例，展示...
MTransition使用示例、Q&A
scnuxisan225的专栏
07-15 438
在下面的代码示例中，我们都假设需要用MTransition完成一个从ActivityA到ActivityB的过场动画，并称ActivityA为FromPage，称ActivityB为ToPage； 基础用法（请参考Demo1）...
CSS3过渡transition效果实例介绍
09-24
主要为大家详细介绍了CSS3过渡transition效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
81Vue - CSS 过渡
阿甘兄
07-29 316
常用的过渡都是使用 CSS 过渡。 下面是一个简单例子： HTML代码： <div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show"&...
css怎么实现过渡效果,CSS3 transition实现过渡效果示例
weixin_26720271的博客
08-03 1958
transition是css3的一个属性了我们可以利用它来做过渡效果了，今天我们就一起来看一篇关于CSS3 transition实现过渡效果示例，希望文章能够帮助到各位朋友。浏览器支持：Internet Explorer 10 及以上版本、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。Internet Explorer ...
CSS3简单运用过渡元素（transition）
AIMing_byte的博客
01-12 1215
概念：在CSS3中，我们可以使用transition属性将元素的某一个属性从“”在指定的时间内平滑地过渡到“”，从而实现动画效果。CSS3变形（transform)呈现的仅仅是一个结果，而CSS过渡（transition）呈现的是一个过程。这个所谓的过程，通俗来说就是一种动画变化过程，如渐渐显示，渐渐隐藏，动画快慢等实例：指定单个属性
CSS-transition
旅行的风筝
06-01 493
过渡属性transition,通过一些简单的事件就可以出发。当事件发生时元素的外观或者位置等发生变化时，就会触发过渡效果，以动画的形式过程性的改变。 可以通过以下几个步骤实现但不仅限于： 在默认的样式中声明初始状态 声明元素的过渡状态 在默认样式中添加过渡函数 过渡属性是符合属性：transition-property：指定过渡状态的CSS属性 transition-duration：过渡所需
transition属性的一些用法
ducaijia_123的博客
06-24 5085
transition有四个值 语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。 transition-timing-function...
css2D、3D详解
weixin_69474694的博客
07-15 553
css2D、3D详解
过渡与变形的综合应用
夏天De风ly
03-24 269
transition属性、2D变形的使用，transform属性实现过渡及变形效果。 当鼠标移上第一张图像时，产生直角边框过渡为圆角边框的效果。 当鼠标移上第二张图像时，产生图片逐渐放大的过渡效果。 当鼠标移上第三张图像时，产生图片旋转的过渡效果 当鼠标移上第四张图像时，产生图片透明逐渐变暗的过渡效果，并且伴随盒子阴影效果过渡。 <!DOCTYPE<!DOCTYPE html&gt...
农情采集系统手机app.zip农情采集系统手机app.zip
最新发布
08-25
农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系统手机app.zip农情采集系
CSS3 transition属性详解与应用
在CSS3中，transition属性的使用是实现动态效果的关键。例如，如果你想让一个按钮在鼠标悬停时颜色逐渐改变，你可以这样设置： ```css button { transition: background-color 2s ease-in-out; } button:hover { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值