CSS3过渡属性

最新推荐文章于 2020-03-08 17:57:45 发布
最新推荐文章于 2020-03-08 17:57:45 发布
阅读量423 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq15045846160/article/details/88637203
版权

一、 过渡三要素：
1.必须要有属性发生变化。
2.告诉系统哪个属性需要执行过渡效果。
3.告诉系统过渡效果持续时间。
注意：当多个属性需要同时执行时过渡效果时用逗号隔开即可。

<!DOCTYPE html>
<html>
    <head>
        <title>过渡</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: aqua;
                /* 哪个属性执行过渡效果 */
                transition-property: width, background-color;
                /* 过渡效果持续时间 */
                transition-duration: 5s, 5s;
                /* 告诉系统延迟多少秒执行 */
                transition-delay: 2s;

                /* transition-property: background-color;
                transition-duration: 5s; 造成样式覆盖*/
            }
            /* 鼠标悬停div的宽度变动到300px */
            div:hover{
                width: 300px;
                background-color: blue;
            }
            
            ul{
                width: 800px;
                height: 500px;
                margin: 0 auto;
                background-color: pink;
                border: 1px solid pink;
            }

            ul li{
                list-style: none;
                width: 100px;
                height: 50px;
                margin-top: 50px;
                background-color: blue;
                transition-property: margin-left;
                transition-duration: 10s;
            }

            ul:hover li{
                margin-left: 700px;
            }

            ul li:nth-child(1){
                /* 控制动画过渡移动速度 */
                /*规定以相同速度开始至结束的过渡效果*/
                transition-timing-function: linear;
            }
            ul li:nth-child(2){
            /*规定慢速开始，然后变快，然后慢速结束的过渡效果 */
                transition-timing-function: ease;
            }
            ul li:nth-child(3){
             /* 规定以慢速开始的过渡效果*/
                transition-timing-function: ease-in;
            }
            ul li:nth-child(4){
             /*规定以慢速结束的过渡效果 */
                transition-timing-function: ease-out;
            }
            ul li:nth-child(5){
             /* 规定以慢速开始和结束的过渡效果*/
                transition-timing-function: ease-in-out;
            }
        </style>
    </head>
    <body>
        <div></div>
        <ul>
            <li>linear</li>
            <li>ease</li>
            <li>ease-in</li>
            <li>ease-out</li>
            <li>rase-in-out</li>
        </ul>
    </body>
</html>

在这里插入图片描述

只字不留
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML今天的学习
weixin_65905274的博客
04-19 706
HTML今天所学习到的东西 过度： transition-property属性： 该标签的属性用于指定应用过度效果的css属性的名称，其过度效果通常在用户将鼠标指针移动到元素上时发生。语法格式： transition-property:none| all | property; transition-property属性值 none 没有属性会获得过度效果 ...
过渡——CSS3动态效果 过渡属性
小绿的博客
12-27 4843
过渡——CSS3动态效果 过渡属性 一、什么是过渡： 通过 css3 可以在不使用 flash 动画或 javascript 的情况下，为元素从一种样式变换为另一种样式时添加过渡效果。 css3 过渡就是元素从一种样式逐渐改变为另一种的效果，需要确定两点： 需要添加效果的 css 属性 效果的时长 二、过渡属性： 过渡有四个属性：transition-property 、transition-duration 、transition-timing-function 、transiti.
Css3过渡属性
yue_456的博客
03-08 1604
Css3过渡属性 Css3中增加里许多的属性，transition（过渡）是css3新增的其中一条属性，它使我们无需使用flash动画或JavaScript就可以实现简单的动画效果，transition（过渡）它不可自己单独实现必须在特定的指示下才能有效果，比如：鼠标划过，点击或者在某种触发条件下。 Transition（过渡）属性： 1.transition-property：给需要的对象设置过...
CSS3使用transition属性实现过渡效果
11-21
属性详解 transition属性目的是让css的一些属性（如background）的以平滑过渡的效果出现。它是一个合并属性，是由以下四个属性组合而成： transition-property：设置应用过渡的CSS属性，如background。 transition-duration：设置过渡效果花费的时间。默认是 0。 transition-timing-function：设置过渡效果的时间曲线。默认是 "ease"。 transition-delay：规定过渡效果何时开始。默认是 0。 示例： button{ transition: backgr
CSS3中transition过渡属性的简单应用实例
刘鹏博的博客
12-07 3811
我们在很多网站上看到一些当鼠标悬浮时，商品图片有一种放大的效果、盒子有上升、下降效果或者文字会偏移等等。这些其实都是增加用户体验的方式，那么，今天就以transition过渡属性来写一个比较通用且简单易懂的过渡效果。 先看效果图：         其实，我们给图片、文字或者盒子设置鼠标悬浮hover属性，就会有一些悬浮效果。但是，那样不用过渡属性的话，用户体验很是不好，响应过于生硬，剧
CSS3中的元素过渡属性transition示例详解
09-27
大家都知道过渡动画是动画的基础，在学习动画属性之前，我们需要先了解过渡属性transition，下面这篇文章通过示例代码给大家详细介绍了CSS3中的元素过渡属性transition，有需要的朋友们可以参考借鉴，下面来跟小编...
推荐一些比较有用的css3新属性
09-25
5. `transition`属性：CSS3的`transition`属性允许我们在元素的样式改变时添加平滑的过渡效果，无需JavaScript或Flash。例如，当鼠标悬停在元素上时，`div:hover`选择器下的宽度、高度和旋转角度会发生变化。`...
详解Css3新特性应用之过渡与动画
09-27
本篇文章主要介绍了Css3新特性应用之过渡与动画，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3过渡源码
04-22
通过CSS3属性值的变化实现动画效果，通过触发这些动画产生交互。
CSS3元素过渡属性transition
尐轩web前端网络日志
11-23 4197
过渡动画是动画的基础 在学习动画属性之前 我们需要先了解过渡属性transition过渡transition先来看一个小例子<div class="demo"></div>.demo { width: 100px; height: 100px; background-color: royalblue; } .demo:hover { width: 200px; }
超慢速移动动画使用CSS3实现流畅效果
dxh_0829的专栏
06-13 2035
三角碎片以非常缓慢的速度旋转移动，如果使用JS实现会出现一像素一像素移动的卡顿 使用CSS3会获得非常理想的效果 transform: translate3d(80px, 150px, 0px) rotate(1220deg); transition: transform 30s linear 0s; 上面一个属性表示图像变换 translate3d(80px, 150px, 0px) 表
css3过渡元素
ljc7878的博客
08-20 375
1、什么是过渡 　　元素从一个【状态】到另外一个【状态】的【平滑变换】【过程】 2、过渡属性 　　transition 3、过渡4要素(子属性) 　　（1）、过渡属性 　　元素的哪个【状态】发生变化时要使用过渡的效果 　　当指定的属性发生改变时，就会触发过渡效果 　　语法： 　　transition-property:none | all | property 　　transi
CSS3过渡多个属性连写
weixin_42187676的博客
09-23 2373
CSS 3 过渡（transition）操作
Bohn的博客
08-26 1510
1.什么是过渡     使得css属性值，在一段时间内平缓变化的效果 2.过渡语法     1.指定过渡属性       属性：transition-property       取值：          1.all 能使用过渡的属性，一律用过渡体现      2.具体属性名        ex:        transition-property:background        当背景的属...
css3动画速度曲线
ministech的博客
02-02 9819
语法一 animation-timing-function: value; value: linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 cubic-bezier(n,n,n,n) 在 cub
CSS3属性transition（过渡）详解
github_36758028的博客
11-21 6724
transform呈现的是一种变形结果，而transition呈现的是一种过渡，通俗点说就是一种动画转换过程，如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。 transition 属性是一个简写属性，用于设置四个过渡属性： transition-property            指定要过渡的css属性transition-durat
CSS3中的动画--过渡属性 transition-property
lorry的博客
06-11 6009
早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素...
【转载】CSS3 常用四个动画（旋转、放大、旋转放大、移动）
热门推荐
FungLeo's Blog
11-15 3万+
CSS3 常用四个动画（旋转、放大、旋转放大、移动）在页面设计中，给一些图标或者图片加上一些动画效果，会给人非常舒服的感觉。这里收集了四个常用动画效果，以便不时之需。转载原文效果一：360°旋转 修改rotate(旋转度数)* { transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out;
css3过渡属性和属性值
最新发布
03-22
CSS3过渡属性和属性值用于实现网页元素的动态效果，常见的过渡属性包括transition-property、transition-duration、transition-timing-function和transition-delay，常见的属性值包括linear、ease-in、ease-out、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值