css3 过渡/旋转/动画

最新推荐文章于 2024-06-20 04:45:00 发布

心郎

最新推荐文章于 2024-06-20 04:45:00 发布

阅读量5k

点赞数

分类专栏：前段_css

本文链接：https://blog.csdn.net/u011301203/article/details/69370922

版权

本文通过实例代码介绍了CSS3中的过渡、旋转和动画效果，包括如何设置过渡时长、时间曲线、延迟时间，以及如何创建动画关键帧，实现元素背景颜色变化、位置移动等效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width:200px;
				height: 200px;
				line-height:200px;
				color: chartreuse;
				text-align: center;
			}
			
			
			.div1{
				background-color: royalblue;
				/*position: absolute;*/
				word-wrap:break-word; /*允许对长单词进行拆分，并换行到下一行*/
				font-size: 40px;
				/*设置过渡 
				 * 1 效果添加到哪个 CSS 属性上 
				 * 2 规定效果的时长
				 * */
				-webkit-transition:width 2s, height 2s, -webkit-transform 2s;
			}
			.div1:hover {
				width:400px;
				height: 400px;
				-webkit-transform:rotate(180deg);
			}
			
			
			
			.div2{
				background-color: red;
				transition-property:width; /*过渡属性名*/
				transition-duration:1s; /*过渡花费时间 默认0*/
				transition-timing-function:linear; 
				/*过渡效果时间曲线 默认ease
				 * linear：匀速
				 * ease:慢 - 快 - 慢
				 * ease-in:慢开始
				 * ease-out:慢结束
				 * ease-in-out:慢开始和结束
				 * */

最低0.47元/天解锁文章

心郎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 过渡/旋转/动画

div{ width:200px; height: 200px; line-height:200px; color: chartreuse; text-align: center; } .div1{ background-color: royalblue; /*position: absolute;*/ w
复制链接

扫一扫

专栏目录