<!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:慢开始和结束
* */
css3 过渡/旋转/动画
最新推荐文章于 2024-08-08 19:32:21 发布
本文通过实例代码介绍了CSS3中的过渡、旋转和动画效果,包括如何设置过渡时长、时间曲线、延迟时间,以及如何创建动画关键帧,实现元素背景颜色变化、位置移动等效果。
摘要由CSDN通过智能技术生成