桑桑不会写程序 2022-10-21 16:53 采纳率: 100%
浏览 14
已结题

前端css3动画部分有疑问希望友友们帮助解惑

对于这样一段代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-timing-function属性</title>
    <style type="text/css">
        @-webkit-keyframes mytransform
        {
            0%{ }
            100%{width:300px;}
        }
        div
        {
            width:100px;
            height:50px;
            text-align:center;
            line-height:50px;
            border-radius:0;
            background-color:#14C7F3;
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
        div+div
        {
            margin-top:10px;
        }
        #div1{-webkit-animation-timing-function:linear;}
        #div2{-webkit-animation-timing-function:ease;}
        #div3{-webkit-animation-timing-function:ease-in;}
        #div4{-webkit-animation-timing-function:ease-out;}
        #div5{-webkit-animation-timing-function:ease-in-out}
    </style>
</head>
<body>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
</body>
</html>

我想请问一下:
问题1:代码中的这一部分:div+div
{
margin-top:10px;} div+div的意思是一个盒子和另一个盒子之间margin-top部分是10px的距离吗?。/这一段代码的意思是否和在设置第一个div中加入属性margin-top:10px;是一样的效果呐?/
问题2:在这一段代码中webkit是什么意思啊,它在这里的作用是什么?/百度了一下说是公开源代码的搜索器引擎,但我不知道放在这里的含义是什么,有什么作用/
问题3:对于代码div中的:-webkit-animation-name:mytransform;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear; 这一部分,他是写在div中,为什么不写在这里面?

img

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-10-21 17:21
    关注
    1. div+div
      加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素,且A和B必须拥有相同的父元素,所选到的仅为一个B元素标签。

    2.-webkit-xxx是 兼容写法,针对浏览器内核的 。CSS3去兼容不同的浏览器,主要是针对浏览器旧的版本,新浏览器基本不需要。

    img

    https://www.cnblogs.com/lsm-boke/p/14384358.html

    3.因为 这三个 属性 样式 可能 所有div都有 。写在div里 方便简洁 。你要是写在 div1 ....divn岂不是 又多,还累。要是改一个属性 你得改 那么多地方

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月30日
  • 已采纳回答 10月22日
  • 创建了问题 10月21日

悬赏问题

  • ¥15 arcgis中更新地理配准后几个图层分离怎么解决?
  • ¥15 想请教大家关于机器学习的问题
  • ¥15 虚幻UE保存Actor位置失败
  • ¥15 多个.nii合并为.nii.gz格式
  • ¥50 现在需要统计2023年全年 “签收时间(qssj)” 到 “提交时间(tjsj)” 小于半小时的业务量,但是要排除掉周末的时间,同时还要排除中午休息的时间。
  • ¥50 opencv模板匹配为何图像差别大仍然匹配数值高?
  • ¥15 如何成功完成主菜单和分菜单的代码编程C++
  • ¥15 怎样采集或者其它途径拿到全国最新个体工商户数据
  • ¥20 我是一名大学生,想学习java是自学还是报培训班呢
  • ¥15 pycharm该如何爬取网易云歌曲下的评论?