精华内容
下载资源
问答
  • transition属性

    千次阅读 2015-01-30 12:01:51
    关于transition属性,是CSS3中三个动画相关的属性之一,transition属性允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变...
    这里主要运用了三个属性,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>
    展开全文
  • transition 属性

    2020-10-29 08:28:13
    // property 规定设置过渡效果的 CSS 属性的名称。 // duration 规定完成过渡效果需要多少秒或毫秒。 // timing-function 规定速度效果的速度曲线。 // delay 定义过渡效果何时开始。 transition: property duration...
    // property 规定设置过渡效果的 CSS 属性的名称。
    // duration 规定完成过渡效果需要多少秒或毫秒。
    // timing-function 规定速度效果的速度曲线。
    // delay 定义过渡效果何时开始。
    transition: property duration timing-function delay;
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .btm:hover ~ .menuList{
                height: 125px;
            }
    		.menuList:hover{
    			height: 125px;
    		}
    		.menuList{
    			overflow:hidden;
    			height: 0;
    			width: 250px;
    			/* transition: all 500ms; */
    			transition: height 500ms ease-out;
    		}
        </style>
    </head>
    <body>
    	<a href="#" class="btm">鼠标经过的效果</a>
    	<div class="menuList">
    		<ul>
    			<li><a href="#">首页</a></li>
    			<li><a href="#">产品介绍</a></li>
    			<li><a href="#">新闻资讯</a></li>
    			<li><a href="#">人才招聘</a></li>
    			<li><a href="#">服务与支持</a></li>
    			<li><a href="#">关于我们</a></li>
    		</ul>
    	</div>
    </body>
    </html>

     

    展开全文
  • transition属性和transform属性 transition 在CSS3里使用transition可以实现补间动画(过度效果),并且当前元素只要有“属性”发生变化时就会存在两种情况。就可以实现平滑的度过, 语法格式:transition:要过度的...

    transition属性和transform属性

    transition

    在CSS3里使用transition可以实现补间动画(过度效果),并且当前元素只要有“属性”发生变化时就会存在两种情况。就可以实现平滑的度过,

    语法格式:transition:要过度的属性 花费时间 运动曲线 何时开始;

    如果有多组属性变化,用逗号隔开

    属性 描述
    transition 简写属性,用于在一个属性中设置四个过渡属性。
    transition-property 过渡 属性的名称。
    transition-duration 过渡效果花费的时间 ,默认是 0。
    transition-delay 规定过渡效果何时开始。默认是 0。
    transition-timing-function 过渡效果的时间曲线。默认是 “ease”。

    transform

    transform可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式

    属性 描述
    translate(x,y,z) 水平方向和垂直方向同时移动 可以3D变形
    scale(x, y) 缩放
    rotate(deg) 旋转 可以3D变形
    transform-origin 可以调整元素转换变形的原点
    skew(deg, deg) 倾斜

    例题:此代码实现的是鼠标hover时 两扇门打开 看到里面的图片

    <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            .box {
                width: 400px;
                height: 300px;
                margin: 100px auto;
                background-image: url('images/syf.jpg');
                perspective: 1000px;
            }
            
            .left,
            .right {
                width: 200px;
                height: 300px;
                float: left;
                background-image: url('images/bg.png');
                // 开门的方向     和时间
                transition: all .8s;
                position: relative;
            }
            //伪类添加两个小门扣
            .left::before {
                content: '';
                width: 20px;
                height: 20px;
                border: 3px solid rgb(199, 158, 158);
                border-radius: 50%;
                position: absolute;
                top: 50%;
                right: 5px;
            }
            //伪类添加两个小门扣
            .right::before {
                content: '';
                width: 20px;
                height: 20px;
                border: 3px solid rgb(199, 158, 158);
                border-radius: 50%;
                /* 两张图片定位到一起 */
                position: absolute;
                top: 50%;
                left: 5px;
            }
            //旋转点
            .left {
                transform-origin: left 0px;
            }
            
            .right {
                transform-origin: right 0px;
            }
            //hover上去的旋转角度
            .box:hover .left {
                transform: rotateY(-160deg);
            }
            
            .box:hover .right {
                transform: rotateY(160deg);
            }
        </style>
    </head>
    
    <body>
        <div class="box">
    
            <div class="left"></div>
            <div class="right"></div>
        </div>
    

    运行结果:
    在这里插入图片描述

    展开全文
  • transition 过渡属性 transition 属性是一个简写属性,用于设置四个过渡属性: 1.transition-property 指定CSS属性的name,(如:width、color),transition过渡效果 2.transition-duration transition效果需要指定...

    transition 过渡属性

    transition 属性是一个简写属性,用于设置四个过渡属性:
    注意:CSS3的transition支持visibility属性,但是并不支持display,由于transition可以延迟执行,因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

    1.transition-property
    指定CSS属性的name,(如:width、color、transform 、border-radius),transition过渡效果
    2.transition-duration
    transition效果需要指定多少秒或毫秒才能完成
    3.transition-timing-function
    指定切换效果的速度
    在这里插入图片描述
    4.transition-delay
    延迟秒或毫秒数切换效果才开始

    怎么设置多个过渡属性name

    多个属性逗号隔开
    transition: transform 2s ease, border-radius 3s ease-out;

    animation属性

    animation属性是一个简写属性,细分有8个属性,前四个属性和过渡属性一样

    在这里插入图片描述

    使用例子

    div
    {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation-name:mymove;
    animation-duration:5s;

    /* Safari and Chrome */
    -webkit-animation-name:mymove;
    -webkit-animation-duration:5s;
    

    }

    @keyframes mymove
    {
    from {left:0px;}
    to {left:200px;}
    }

    展开全文
  • 1. transition过渡属性transition 属性是一个简写属性,用于设置四个过渡属性:语法transition: property duration timing-function delay; 值描述transition-property规定设置过渡效果的 CSS 属性的名称。 ...
  • 一、对transition属性的认识 1、transition 属性是一个简写属性,可用于设置四个过渡属性:   transition-property 过渡效果的 CSS 属性的名称(height、width、opacity等)。 transition-duration 完成过渡效果...
  • 主要介绍了css3的transition属性详解,需要的朋友可以参考下
  • CSS3 transition属性

    千次阅读 2019-09-03 23:21:11
    Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性transition是一个简写属性,用于设置四个过度属性 transition-property transition-duration transition-timing-function transition-delay ...
  • transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现。它是一个合并属性,是由以下四个属性组合而成: transition-property:设置应用过渡的CSS属性,如background。 transition-duration...
  • CSS3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性transition属性是一个速记属性有四个属性:transition-property, transition-duration, transition-timing-function, and...
  • 定义和用法transition 属性是一个简写属性,用于设置四个过渡属性transition-propertytransition-durationtransition-timing-functiontransition-delay注释:请始终设置 transition-duration 属性,否则时长为 0,...
  • CSS3 transition 属性介绍

    2019-04-19 23:40:56
    CSS3 transition 属性 transition 属性是一个简写属性——设置元素当前过渡效果,用于设置四个过渡属性transition-property transition-duration transition-timing-function transition-delay 默认值: ...
  • CSS3 transition 属性

    2020-03-27 15:34:23
    CSS3 transition 属性 CSS 参考手册 实例 把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px: div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-...
  • css中的transition属性

    2021-03-23 09:08:31
    css中的transition属性 定义 过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的...
  • CSS3基础知识教程transition属性过渡动画效果等 CSS3基础知识教程transition属性过渡动画效果等
  • div css3 transform和transition属性鼠标滑过动画效果 div css3 transform和transition属性鼠标滑过动画效果
  • CSS3 Transition属性

    2018-04-28 11:41:47
    transition属性主要是用来对某个CSS属性的变化过程进行控制,官方的介绍是”CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.“。理解为”在某个时间段内,平滑...
  • transition属性的用法

    2018-02-21 16:37:10
    动态使用transition属性 转载于:https://blog.51cto.com/11871779/2072042
  • 【transition-duration】 是一个css3属性,规定完成过度效果需要花费的时间(一秒或毫秒计)。...该属性其实是transition属性的一个子属性,下面总结一下css3中的transition属性:【transition】 ...
  • 纯CSS3 transition属性鼠标经过酷炫按钮动画特效
  • CSS3 transition属性制作水平手风琴鼠标点击手风琴展...CSS3 transition属性制作水平手风琴鼠标点击手风琴展...CSS3 transition属性制作水平手风琴鼠标点击手风琴展...
  • css3 transition属性鼠标悬停图标按钮动画提示框效果
  • CSS3 transition属性单页模板鼠标悬停导航菜单文字动画

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,779
精华内容 1,911
关键字:

transition属性