css3 transition怎么用

Posted 2023-04-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3 transition怎么用相关的知识，希望对你有一定的参考价值。

参考技术A

css3 的transition：允许css属性值在一定的时间区内平滑的过渡。

transition-property：变换延续的时间

transition-duration：在延续时间段

transition-timing-function：变换速度变化

transition-delay：变化延迟时间

a：all 0.5s ease-in 1s；这里的四个值分别对应上面的四个属性。

* margin:0;padding:0;
ulwidth:300px;
ul:after clear:both;display:block;content:".";height:0;visibility:hidden;font-size:0;line-height:0;
ul lilist-style:none;font-size:12px;color:#069;border:1px solid #CBCBCB;background-color:#E5E5E5;border-radius:3px;box-shadow:1px 1px 0 #96969D;width:280px;height:30px;margin-bottom:20px;
li aposition:relative;width:230px;height:30px;padding-left:25px;display:block;
li a imgposition:absolute;top:6px;left:5px;border:0 none;display:block;
li a span, li a strongposition:absolute;top:0;left:25px;opacity:1;
-webkit-transition:all 800ms linear;
-moz-transition:all 800ms linear;
-o-transition:all 800ms linear;line-height:30px;width:240px;
li a strongtop:30px;opacity:0;
li a:hovercolor:#FF6500;_background-color:#E5E5E5;font-weight:bolder;
li a:hover strongtop:0;opacity:1;
li a:hover spantop:-30px;opacity:0;

<div>

<ul>

<li><a href="http://www.baidu.com"><span>百度</span><strong>看看效果如何</strong></a></li>

<li><a href="http://zhidao.baidu.com"><span>百度知道</span><strong>看看效果如何</strong></a></li>

<li><a href="http://wenku.baidu.com/"><span>百度文库</span><strong>看看效果如何</strong></a></li>

</ul>

</div>

　　原理就是利用定位的相对a标签的距离的不同，结合transition的平滑过渡，和显示隐藏，实现动态的文字替换的过程。

参考技术B translate是CSS3里面的属性可以定义html元素转动
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。本回答被提问者和网友采纳

css高手请进！用div+css制作圆角矩形的原理

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=gb2312" />
<title>div+CSS圆角矩形</title>
<style type="text/CSS">
bodypadding: 20px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif
div#nifty margin: 0 10%;background: #9BD1FA
p padding:10px

div.rtop, div.rbottomdisplay:block;background: #FFF
div.rtop div, div.rbottom divdisplay:block;height: 1px;overflow: hidden; background: #9BD1FA
div.r1margin: 0 5px
div.r2margin: 0 3px
div.r3margin: 0 2px
div.rtop div.r4, div.rbottom div.r4margin: 0 1px;height: 2px
</style>
</head>
<body>
<div id="nifty">
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
<p>这是您要放的内容！</p>
<div class="rtop"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>
</body>
</hmtl>
这是制作圆角矩形的代码，小弟看不懂，谁能帮我详细的解释一下啊!

其实很简单，圆角它靠1px的高度来拼起来的
比如：
大层div宽度为100px;

圆角开始：上

第一行div，高度为1px; 宽度为94px; 左右两边挤开3px，
第二行div，高度为1px; 宽度为96px; 左右两边挤开2px，
第二行div，高度为1px; 宽度为98px; 左右两边挤开1px，

第四行DIV：内容

圆角开始：下

第一行div，高度为1px; 宽度为98px; 左右两边挤开1px，
第二行div，高度为1px; 宽度为96px; 左右两边挤开2px，
第二行div，高度为1px; 宽度为94px; 左右两边挤开3px，

两边的边距自定，这样就形成一个狐形了。参考技术A <title>div+CSS圆角矩形</title> 
<style type="text/CSS">
bodypadding: 20px; DIV里的页面内容与四周边距的距离（上下左都10px边距）
background-color: #FFF;背景颜色
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif 字体大小字体类型
div#nifty margin: 0 10%; 这个在这里应该是DIV的上边距和DIV两边的距离
background: #9BD1FA 背景颜色
p padding:10px 所有P标签的间距全为10

div.rtop, div.rbottomdisplay:block;background: #FFF
div.rtop div, div.rbottom divdisplay:block;
height: 1px;高度
overflow: hidden;
background: #9BD1FA 背景颜色

div.r1margin: 0 5px 这个不用说了把
div.r2margin: 0 3px
div.r3margin: 0 2px
div.rtop div.r4, div.rbottom div.r4margin: 0 1px;height: 2px
</style>
</head>
<body>
<div id="nifty">
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
<p>这是您要放的内容！</p>
<div class="rtop"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>
</body>
</hmtl> 参考技术B 就像楼上说的，拼起来的，就像我们用长度不一，高为1px的直线一条一条的叠起来达到预期效果，圆角它是占用了一定的高度空间的，如果你画的圆角比较大的话，它需要的在垂直方向的线条就越多，就像堆木条一样。如果你在dreamweaver的设计视图下，你把鼠标移动到圆角那里，稍微上下移动，你就可以感觉到圆角原来也是一些直线而已，只不过它们长短的不一，看起来就像圆角而已。可以说这是CSS的一些小技巧。参考技术C 其实很简单，圆角它靠1px的高度来拼起来的
比如：
大层div宽度为100px;
圆角开始：上
第一行div，高度为1px;
宽度为94px;
左右两边挤开3px，
第二行div，高度为1px;
宽度为96px;
左右两边挤开2px，
第二行div，高度为1px;
宽度为98px;
左右两边挤开1px，
第四行DIV：
内容
圆角开始：下
第一行div，高度为1px;
宽度为98px;
左右两边挤开1px，
第二行div，高度为1px;
宽度为96px;
左右两边挤开2px，
第二行div，高度为1px;
宽度为94px;
左右两边挤开3px，
两边的边距自定，这样就形成一个狐形了。

以上是关于css3 transition怎么用的主要内容，如果未能解决你的问题，请参考以下文章

CSS3实践之路:CSS3的过渡效果(transition)与动画(animation)

用CSS3做网页中的小三角，以及transition的用法

css3学习之--transition属性（过渡）

CSS3 过渡效果transition的基本使用

CSS3：属性transition和animation的用法

CSS3 animaion 和 transition 比较