提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

CSS 05 transition特效

2023-03-07 09:11:04 时间

transition-property 过渡属性，默认值为all

transition-duration 过渡持续时间，默认时间为0s

transition-timing-function 过渡函数，默认ease函数，还有ease-out（先快后慢）、ease-in（先慢后快）、linear（匀速）等等函数

transition-delay 过渡延迟时间，默认0s

.ceng{

width:100px;
height:100px;
background-color:pink;
cursor:pointer;
transition-duration:2s;
transition-property:height;      //指定方向，默认all，即所有方向都变化
transition-delay:.1s;
transition-timing-function:ease;
transition:all 2s .1s ease;    //transition 的复合写法

} .ceng:hover{

width:300px;
height:150px;
background-color:red;

/ border-radius:50%;/ //圆形也可以变化，正方形变成圆形

} 仿天猫专题过渡效果实例

手机馆 

        <div class='m_content'>
            R9s Plus最新上线
        </div>
        <div class="m_img">
            <img src="./r9s,jpg" alt="手机">
        </div>
    </li>
</ul>

*{

padding:0px;
margin:0px;
front-family:'Microshoft YaHei';

} .main{

margin:10px auto;
width:230px;
border:1px solid #ccc;
text-align:center;

} .main li{

list-style:none;
cursor:pointer;   //鼠标三角形状变成手形

} .m_title{

front-size:20px;
font-weight:bold;
margin:5px;

} m.content{

color:#666;
margin-bottom:15px;

} .m_img{

position:relative;
padding:30px;

} .m_img::before{ //伪元素

content:"";
position:absolute;
width:160px;
height:160px;
background-color:#eee;
border-radius:50%;
z-index:-1;
left:35px;
top:10px;

} .m_img img{

transform:scale(1);
transition:all .5s;

} .main li:hover .m_img img{

transform:scale(1);

} 仿天猫首页类别展示的效果

好车特卖一口价 

<div class="m_content">
    新车 新年 开回家
</div>
<div class="m_img">
    <img src="./car.jpg" alt="新车特卖">
</div>

.main{

width:260px;
height:270px;
border:1px; solid #ccc;
margin:50px auto;
front-family:'Microshoft YaHei';
cursor:pointer;

} .m_title{

text-align:left;
font-size:20px;
padding:20px 10px 10px 10px;

} .m_content{

color:#11ccaa;
padding:0 10px 10px 10px;

} .m_img{

text-align:right;
position:relative;   //相对定位

} .m_img img{

    position:absolute;   //绝对定位
    width:180px;
    top:0px;
    right:0px;
    teansition:right 0.3s;

} .mail:hover img{

right:10px;

}

相关文章