过渡 transition

来源：互联网发布：oracle 数据字典编辑：程序博客网时间：2024/05/02 01:37

过渡、动画和变换是CSS3中新添加的3个特性，通过JavaScript操作CSS3是直接由浏览器引擎处理的，虽然能节省开销，但是，会耗费大量的处理能力，把用户的电脑搞得越来越慢，最后死机。

过渡：

过渡就是网页上一个元素从一个状态慢慢变到另一个状态。比如：鼠标移动到关键字上，关键字变大，闪烁之类的，，，状态可以任意发挥了，所以，可以创造出很多炫彩的效果，期待吧。废话不多说，入正题咯

先看一个效果，我对文字和图片都做了过渡：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transition</title><style type="text/css">#main{ margin:0; padding: 0;background-color: #A19393;padding:0 auto;}.text{color: white;font-size: x-large ;}.text:hover{font-size: 30px;padding: 4px;background-color: #F5AD3D;}h2{text-align: center;}h2:hover{color;red;background-color: #F5AD3D;padding: 4px;/*border: thin solid black ;*/}img:hover {opacity: 0.5;}</style></head><body><div id="main"><p><h2 >分享健身成果,一起进步</h3><span class="text">图片分享，见证每一个人的蜕变。结识同样热爱运动的朋友，让健身不再是孤独的坚持。</span></p><p class="image"><img src="E:\新建文件夹\images\f3.jpg" alt="骑单车"></p><p><span class="text">每一个脚印，都是对自己的肯定,你不孤单。</span></p></div></body></html>

主要是利用 :hover 选择器，给. text 类和img 加上当鼠标滑过的时候，文字放大，加上背景颜色，照片模糊。

欣赏了效果，但感觉美中不足的是，效果太突兀了有木有，但是通过设置transition的属性可以平缓的过渡了。

加上transition-delay transition-duration 等等之后，效果就不那么突兀，自然平缓的过渡到想要的结果。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>transition</title><style type="text/css">#main{ margin:0; padding: 0;background-color: #A19393;padding:0 auto;}.text{color: white;font-size: x-large ;tranasition-delay: 100ms;transition-duration: 250ms; }.text:hover{font-size: 30px;padding: 4px;background-color: #F5AD3D;transition-delay: 100ms;   transition-property: font-size,padding,background-color;transition-duration: 500ms; transition-timing-function: linear; }h2{text-align: center;tranasition-delay: 100ms;transition-duration: 250ms; }h2:hover{color:red;background-color: #F5AD3D;padding: 4px;/*border: thin solid black ;*/transition-delay: 100ms;transition-duration: 500ms;   transition-property: all;transition-timing-function: ease-in-out;}img{tranasition-delay: 100ms;transition-duration: 250ms; }img:hover {opacity: 0.5;transition-delay: 100ms;transition-duration: 500ms;   transition-property: all;}</style></head><body><div id="main"><p><h2 >分享健身成果,一起进步</h3><span class="text">图片分享，见证每一个人的蜕变。结识同样热爱运动的朋友，让健身不再是孤独的坚持。</span></p><p class="image"><img src="E:\新建文件夹\images\f3.jpg" alt="骑单车"></p><p><span class="text">每一个脚印，都是对自己的肯定,你不孤单。</span></p></div></body></html>

虽然改动不大，但是给用户的感觉绝对比不用好，还有，为了更加自然，鼠标移开之后，元素也得缓慢的变回去，所以得用反向过渡，如：

.text{color: white;font-size: x-large ;tranasition-delay: 100ms;/*反向过渡*/transition-duration: 250ms; }

transiton-property 的意思是给什么属性应用过渡，比如给字体字号使用就写font-zize.背景颜色就使用 backgroundcolor.......，只需要写属性，或者简单一点，all 代表全部属性。

transition-timing-function 的意思是计算初始值和最终只之间的中间值，表示为4个点的三次贝塞尔曲线（贝塞尔曲线后面再写），不懂可以挨着试试，反正就5个。。

0 0