CSS基础(三) 动画属性 过渡属性

最新推荐文章于 2024-04-25 16:16:15 发布
最新推荐文章于 2024-04-25 16:16:15 发布
阅读量144 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44827845/article/details/114846278
版权

CSS基础(三) 动画属性 过渡属性

目录

1.动画属性

<@keyframs> 用来创建动画,通过逐步改变从一个CSS样式设定到另一个,from…to和0%-100%相同。

<style>
	/* 写法一 */ 
	@keyframes myfirst{             
		from{
			background-color: #0000FF;
		}
		to{
			background-color: #008000;
		}
	} 
		
	/* 写法二 */
	 @keyframes mysecond{
		 0%{
			background-color: #0000FF;
		 }
		 20%{
			background-color: #008000;
		 }
		 40%{
			background-color: #FF0000;
		 }
		 60%{
			background-color: #FF1493;
		 }
		 80%{
			background-color: #FFA500;
		 }
		 100%{
			background-color: #FFC0CB;
		 }
	 } 
	#d,#d1{
		   width: 300px;
		   height: 300px;
		   border: 1px solid #FF0000;}
	#d{animation: myfirst 5s;}   
    #d1{animation: mysecond 10s;} 
</style>
<body>
	<div id="d"></div><br>
	<div id="d1"></div>
</body>

2.过渡属性

(1)平移

<style>
#d{ position: absolute;
	left: 0;
	width: 50px;
	height: 20px;
	background-color: #0000FF;
	transition: transform 5s; }
#d:hover{left: 500px;}
</style>
<body>
    <div id="d"></div>
</body>

(2)旋转

<style>
   #img1{
		width: 150px;
		height: 150px;
		border-radius: 50% 50%;
		transition: transform 5s;
	}
   #img1:hover{transform: rotate(-60deg);}
</style>
<body>
   <img src="img/pic.1.jpg" id="img1">
</body>

(3)缩放

<style>
   #img2{width: 150px;
		height: 150px;
		border-radius: 50% 50%;
		transition: transform 5s;}
   #img2:hover{transform: scale(0.5,0.5); }
</style>
<body>
   <img src="img/pic.2.jpg" id="img2">
</body>

(4)倾斜

<style>
   #img3{
   		width: 150px;
		height: 150px;
		border-radius: 50% 50%;
		transition: transform 3s;}
   #img3:hover{transform: skew(30deg,30deg);}
</style>
<body>
   <img src="img/pic.2.jpg" id="img2">
</body>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

猫与故巷0214
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3新增属性——过渡和动画（2D属性，3D动画）
m0_53619602的博客
06-07 2999
目录CSS3一、过渡1. 属性2. 花费时间3. 运动曲线4. 何时开始二、2D属性 2. translate（移动）2. rotate（旋转）3. scale（缩放）4. transform-origin（转换中心点）综合写法三、动画 1. 动画的使用1）.定义动画（keyframes）2） 元素使用动画 2. 动画序列3. 动画属性4. 动画属性简写四、3D动画 1. 三维坐标系 2. 3D移动 translate3d3. 透视 perspective 4. 3D旋转5. 3D呈现 （tran
CSS动画中的样式中的过渡属性
input_form_value的博客
04-10 731
1.什么是过渡属性？ 过渡属性是一个不需要web前端使用js语言去编写程序，直接使用css样式就可以实现简单的动画效果。在该属性的加持下，可以让一些动画效果看起来更加顺滑。 transition CSS属性其实是 transition-property（过渡或动态模拟的CSS属性） ， transition-duration（完成过渡所需要的时间） ，transition-timing-function （指定过渡函数） 和 transition-delay（过渡开始出现的延迟时间） 的一个简写属性。
CSS 之 过渡动画（transition）
最新发布
weixin_45092437的博客
04-25 3148
transition属性用来设置元素的过渡动画，是过渡属性的简写形式，属性值可以包含四部分transition-property、transition-duration、ransition-timing-function和transition-delay，分别表示过渡动画的CSS属性、过渡动画所需的时间、过渡动画执行的速度曲线和过渡动画执行前需要等待的时间。过渡相关事件：transitionrun、transitionstart、transitionend、transitioncancel。
【CSS3】动画--过渡属性 transition-property
O(∩_∩)O
02-24 1934
动画--过渡属性 transition-property 早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 在CSS
CSS3基础知识教程transition属性过渡动画效果等
11-05
**CSS3基础知识教程：Transition属性与过渡动画效果详解** 在网页设计中，CSS3的引入为开发者提供了更多增强用户体验的工具。Transition（过渡）属性是其中的一个重要特性，它允许元素从一种样式平滑地过渡到另一种...
CSS3中Transition动画属性用法详解
12-13
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。... •transition-duration：指定属性过渡的持续时间 •transition-timing-function：指定渐变的速度：
CSS3使用transition属性实现过渡效果
09-24
总之，CSS3的`transition`属性极大地增强了网页的视觉表现力，通过平滑的过渡动画，为用户提供了更加流畅的交互体验。理解并熟练掌握这一特性，对于创建现代、动态的Web界面至关重要。在实际项目中，结合其他CSS3...
CSS3动画属性边框属性等
11-22
本篇将详细阐述CSS3中的关键知识点，包括动画属性、边框属性、背景属性以及其他的样式属性。 **CSS3动画属性**允许开发者创建复杂的动态效果。`@keyframes` 规定了一个动画的帧，定义了从一种样式到另一种样式的...
css过渡和动画属性
Sky_msk的博客
09-24 261
css过渡 transition：执行变换的属性 变换延续时间 变换速率 延迟时间; property(执行变换的属性): all 或指定某一个color,wdith 可以同时指定多个属性，分别设置不同过渡时间 transition：width 2s, height 1s linear (可以设置多个，不写的属性未默认值) transition-property: width, height; transition-duration: 500ms , 1s duration(变换
css过渡属性和动画属性
m0_73800955的博客
12-21 157
css的过渡属性和动画属性
CSS Transition属性讲解（过渡动画）
weixin_42343966的博客
12-01 2375
1.它有四个属性： transition-property：要设置的CSS属性name transition-duration：transition效果需要多少秒或毫秒才能完成 transition-timing-function：指定transition效果的转速曲线 transition-delay：定义transition效果要延迟多少秒执行
css过渡动画
weixin_45605549的博客
10-30 3742
综合性过渡效果 transition: 属性 时间; 举例：transition: width 2s; 设置具有过渡效果的属性 可设置单个，多个（逗号隔开），全部属性（all） transition-property: all; 过渡的时间长度 transition-duration: 2s; 整个过渡动画变化的速度 ease:(默认值),从慢到快到慢下来 linear：设置线性速度 ...
【CSS】过渡动画
小数点儿_
01-31 5584
- 常需要应用过渡动画的伪类选择器 - `:hover` 当用户悬浮到一个元素之上的时候匹配。 - `:active` 在用户激活（例如点击）元素的时候匹配，点击时应用，松开就结束 - 原选择器：过渡前的状态、过渡的过程（该状态变至其他状态的过渡过程） - 伪类选择器：过渡后的状态（可以只写有变更的样式） - `` 是一个内置组件 - 进入或离开可以由以下的条件之一触发 - 由 `v-if` 所触发的切换 - 由 `v-show` 所触发的切换 - 由特殊元素 `
CSS动画属性 ：transition过渡 、 transform变形、animation动画
wcxrib的博客
01-28 2126
在 CSS 中，过渡属性：transition， t元素从一种样式逐渐改变为另一种的效果，支持可识别中间值的属性 (如大小、颜色、位置、透明度等)，而如 display 属性则不支持。transform：平移，旋转，倾角等。
css动画过渡：属性transition的介绍
YY的博客
10-01 3836
属性transition：
CSS动画实现-过渡属性transtion
qq_43233759的博客
03-08 829
CSS动画实现-过渡属性transtion CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标划过、单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值过渡属性需要触发事件，如：hover（鼠标划过事件）。 其中，transtion可以细分为四部分功能。 1. transition-duration：检索或设置对象过渡的持续时间 ...
CSS过渡属性与动画效果
小王的博客
05-08 413
CSS过渡属性与动画效果 目录CSS过渡属性与动画效果一、页面内嵌入图像，视频，音频二、过渡三、变形四、动画 一、页面内嵌入图像，视频，音频 (1)图像 A、把图像作为背景：background-image B、使用图像标签：<img src="图像名" alt="" width="" height="" /> (2)视频 A、视频格式：.mp4 .ogg .webm B、视频标签：<video src="视频文件名" controls="controls"/> src：
CSS3 过渡动画属性
08-25
CSS3 transition 动画属性是一种用于实现网页元素平滑过渡效果的技术。它可以让网页元素在不同状态之间产生渐变效果，比如改变颜色、大小、位置等属性时，可以通过设置过渡时间、过渡方式等属性来实现动画效果。常用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值