本文共 3213 字，大约阅读时间需要 10 分钟。

CSS3过渡效果

过渡（谁做过度给谁加）

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

进度条制作

利用transition制作一个简易的进度条，在鼠标经过时有一个上涨的动画。

   
        
            
    
只要有蓝牙音箱，你的小米11 Ultra 就是随身携带的麦克风，连接蓝牙，随你发言唱歌。
        
    $6088
    $6988        
            
    立即抢购    
   

.homework {    position: relative;    width: 300px;    height: 400px;    margin: 0 auto;}span img {    width: 100%;    height: 250px;}.homework p {    position: absolute;    font-size: 14px;}.homework em,.homework i {    position: absolute;    font-style: normal;    bottom: 18%;}.homework em {    font-size: 20px;    left: 2%;    color: red;}.homework i {    left: 22%;    font-size: 14px;    color: gray;    text-decoration: line-through;}.homework footer {    width: 100%;    position: absolute;    font-size: 10px;    bottom: 13%;}.bar {    display: inline-block;    width: 170px;    height: 7px;    border: 1px solid red;    border-radius: 5px;    padding: 1px;    margin: 0 5px;}.bar-in {    width: 50%;    height: 100%;    border-radius: 4px;    background-color: red;}.bar:hover .bar-in {    width: 100%;}.homework footer span {    color: red;}.homework button {    position: absolute;    left: 0%;    bottom: 0%;    width: 100%;    height: 12%;    color: white;    background-color: red;    font-size: 18px;    border: 0;}

这样就能做好一个简单的产品界面。

.bar-in {    transition: all 1s;}

鼠标经过变大制作

一排序号，当鼠标放上去时独自放大，其余序号不受影响（如下图所示）。

   
        
    
            
     
                1            
            
     
                2            
            
     
                3            
            
     
                4            
            
     
                5            
            
     
                6            
            
     
                7            
        
    
    
   

先写样式，让每个li有边框，在一排上显示

.suo ul {    width: 500px;    height: 100px;    margin: auto;    text-align: center;    padding-top: 50px;}.suo ul li {    float: left;    width: 36px;    height: 36px;    border: 1px solid rgb(202, 8, 8);    margin: 0 15px;    border-radius: 50%;    list-style: none;    line-height: 36px;}.suo ul li a {    text-decoration: none;    color: black;}

然后写样式，利用:hover选择器，让鼠标选择的li变大

.suo ul li {    transition: all .4s;}

.suo ul li:hover {    width: 72px;    height: 72px;}

但完成之后不难发现并不能完美实现，利用设置width和height虽然能够使li变大，但是会影响后面的li（如下图）。

transform：scale（x，y）；（x 和y用逗号隔开）

2D：

①移动：transform：translate（x，y）；或分开写：transform：translateX（n） transform：translateY（n）；

·translate里面的参数是可以用%

·如果设置了%，移动的距离是以自身宽度或高度为基准

·translate对行内元素无效

②旋转：transform：rotate（45deg）；正数顺时针；负数逆时针

·转换中心点设置：transform-origin：x y；（x 和y用空格隔开；可以是px像素，也可以是方位词top等）

③缩放：transform：scale（x，y）；（x 和y用逗号隔开）

·里面的数字不跟单位，倍数的意思（1即1倍，2即2倍）

·1倍不变，只修改一个另一个不改不变那里可设为1

·等比缩放——同时修改宽高直接写一个数字即可

·正数是放大，小数（小于1）是缩小

·优势：直接设置width和height会影响其他盒子，缩放的时候是往左右和下面延伸；scale的缩放以中心点为准

注：综合写格式为transform：translate（x，y） rotate（45deg） scale（x，y）

①顺序会影响效果

②有位移先写位移

利用缩放transform：scale（x，y）；实现这次的变大效果

.suo ul li:hover {    transform: scale(2);}

转载地址：https://blog.csdn.net/zx2014567296/article/details/116541456 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！