transition属性

最新推荐文章于 2023-11-24 16:11:58 发布
最新推荐文章于 2023-11-24 16:11:58 发布
阅读量1.2k 收藏
点赞数
分类专栏： CSS 文章标签： css3 前端开发 样式属性 动画 鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cicada_slough/article/details/43305439
版权
这里主要运用了三个属性，border-radius，text-shadow，transition。 关于transition属性，是CSS3中三个动画相关的属性之一，transition属性允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”，它的属性有(1).执行变换的属性：transition-property,(2).变换延续的时间：transition-duration,(3).在延续时间段，变换的速率变化transition-timing-function,(4).变换延迟时间transition-delay。
　　下附源码，可直接使用。
<!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" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        .cont{width: 450px;height: 450px;margin: 0 auto;margin-top: 45px;font-family: "微软雅黑";font-size: 14px;}
        .cont ul{width: 450px;margin: 0px;padding: 0px;list-style: none;}
        .cont ul li{width: 450px;height: 50px;background: #fff;text-align: center;line-height: 50px;}
        .cont ul li a{width: 450px;height: 50px;color: #333;display: block;font-size: 25px;}
        .cont ul li a:hover{
            background: #99dd33;
            color: #fff;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
        }    
        a {
                /*只有当鼠标移出后才处理*/
            -webkit-transition:background 0.2s linear 0s;
            -moz-transition:background 0.2s linear 0s;
            -ms-transition:background 0.2s linear 0s;
            -o-transition:background 0.2s linear 0s;
            transition:background 0.2s linear 0s;
            text-decoration: none;
        }
        a:hover { 
            background:#99dd33; color:#f60;
            -webkit-text-shadow:2px 2px 10px #f00;
            -moz-text-shadow:2px 2px 10px #f00;
            -ms-text-shadow:2px 2px 10px #f00;
            -o-text-shadow:2px 2px 10px #f00;
            text-shadow:2px 2px 10px #f00;
            /* 只有当鼠标移入时才处理
                   注：若a:hover中不写transition,则会继承a中的transition */
            /*
            1. 单个属性
                -webkit-transition:background 0.5s ease-out 0s;
            2. 多个属性：
               -webkit-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;
            */
               -webkit-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
            -moz-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
            -ms-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
            -o-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
            transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
        } 
    </style>
</head>
<body>
    <div class="cont">
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS3</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">YUI</a></li>
            <li><a href="#" class="li">Python</a></li>
        </ul>
    </div>
</body>
</html>
JINisSUN
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3中的动画--过渡函数 transition-timing-function
huangbaokang的博客
08-27 3093
transition-timing-function 属性规定过渡效果的速度曲线。 JavaScript语法： object.style.transitionTimingFunction="linear" transition-timing-function语法： transition-timing-function: linear|ease|ease-in|ease-out|ease...
transition
weixin_57748957的博客
06-01 347
一、语法 transition: property duration timing-function delay transition属性是个复合属性，她包括以下几个子属性： transition-property ：规定设置过渡效果的css属性名称 transition-duration ：规定完成过渡效果需要多少秒或毫秒 transition-timing-function ：指定过渡函数，规定速度效果的速度曲线 transition-delay ：指定开始出现的延迟时间 默认值分别为：all 0 e
transition 属性
weixin_57748984的博客
06-01 3284
transition 属性是一个简写属性，用于设置四个过渡属性。 CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。 CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。 属性： transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要
HTML5&CSS3网页制作：transition属性.pptx
05-31
本文将深入讲解transition属性的定义、用法以及一些关键注意事项。 1. **定义与用法** transition属性是一个复合属性，它结合了`transition-property`、`transition-duration`、`transition-timing-function`和`...
利用CSS3的transition属性实现滑动效果
01-21
定义和用法transition 属性是一个简写属性，用于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay注释：请始终设置 transition-duration 属性，否则时长为 0，...
css3的transition属性详解
09-25
CSS3的Transition属性详解 Transition，即过渡效果，是CSS3中的一个重要特性，它使得元素的样式属性可以在特定时间内平滑地从一个值过渡到另一个值，从而创建出平滑的动画效果。这个属性通常与`:hover`伪类结合使用...
CSS3使用transition属性实现过渡效果
11-21
CSS3的transition属性是用于创建平滑的动画过渡效果的关键工具。这个属性允许CSS属性值在两种状态之间平滑地改变，而不是立即跳跃到新值。以下是对transition属性的详细解释： 1. **transition-property**：这个...
CSS3中Transition属性详解以及示例分享
10-25
CSS3中的Transition属性是网页设计中一种强大的工具，它允许元素在状态变化时平滑地过渡，而不是突然跳变。Transition由四个核心属性组成：transition-property、transition-duration、transition-delay和transition...
text-transition:一个简单的 React 组件，用于在字符串之间进行动画处理，带有每个字符的动画
06-12
文本转换 一个简单的 React 组件，用于在字符串之间进行动画处理，带有每个字符的动画。 想象一下角色动画的powerpoint。 应用程序接口： 细绳 要显示的字符串。 前 CSS 变换应用于每个字符进入时。 后 CSS 变换应用于它离开的每个字符。 期间 CSS 过渡的持续时间（以秒为单位） 宽松 CSS 缓动字符串 延迟 每个字符的 CSS 转换延迟。 对于线性交错动画，这将乘以每个角色的索引。
Text_transition_unity_c-：水平从左到右的文本过渡
02-09
Text_transition_unity_c-：水平从左到右的文本过渡
CSS3 transition属性
kangzinian的博客
09-03 1256
Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。 transition是一个简写属性，用于设置四个过度属性 transition-property transition-duration transition-timing-function transition-delay 值 描述 transition-property 规定设...
过渡属性 transition
最新发布
2301_76669854的博客
11-24 401
（四个属性，除了前面的为过渡总时间duration，后面的使过度延时时间delay之外 没有顺序前后之分）（2）transition-duration 一个属性过渡到另一个属性所需的时间。transform转换、transition过渡、Animation动画。（transition过渡是手动的、Animation动画是自动的）（可指定一个值或多个值，多个值用逗号隔开）运用过渡效果，多个属性用逗号隔开。点击后：经历0.5s后逐渐变黄。默认，由快到慢到更慢。
transition属性详细讲解
m0_58131961的博客
10-12 4285
transition属性的格式： transition：transition-property，transition-duration，transition-timing-function，transition-delay； 它的四个过渡属性是这样的意思： transition-property：规定设置过渡效果的属性名称。 transition-duration：规定完成这个过渡效果需要多少秒或者毫秒。 transition-timing-function：规定这个过渡效果的速度曲线。 t
css3过渡动画——transition属性
m0_73782968的博客
02-26 1294
语法transition: css样式 动画的执行时间 速度类型 动画的延迟时间;多个css属性用逗号隔开​注意：谁发生了属性的改变 就加在谁身上属性css样式：参与过渡的css属性名称|all表示所有属性动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms速度类型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值