学习html总结（四）

王海宇53638332

伪元素：
        一个每日有标签的元素，不能独立存在，要依附于其他真实元素
        元素内容由content属性提供
        伪元素的其他特征跟真实元素没区别
        xxx::after{......}/xxx::before{.....} --------两种写法,可以同时生成两个伪元素
        生成的伪元素会出现在主元素的内部，也就是相当于它的子元素
css3动画：
        transition（过渡）
                transition: 3s;-----------过渡三秒，可以在秒前加方向或者别的
        translate(变形)
                rotate()----旋转---------rotateX(20deg)/rotateY(45deg)/rotateZ(30deg)-----deg代表角度名叫杜为正时候顺时针旋转
                translate()--位移--------translateX(20px)/translateY(20px)/translateZ(20px)---在原来的基础上产生的位移偏移，该偏移不会对网页布局产生任何影响
                scale()------缩放--------scale(2.5)--放大至2.5倍----scale(0.7)--缩小至0.7倍
                ps:     transfrom:translateX(50px) rotateZ(360deg) scale(1.4);---------三种变形效果可以同时叠加，注意编写顺序，会影响执行顺序
        @keyframes:
                第一种编写方式：该动画表示的含义是，元素的背景颜色从红色变为绿色
                        @keyframes bgchange{
                                from{
                                      background:red;
                                }
                                to{
                                      background:green;
                                }
                        }
                第二种编写方法：该动画表示的含义是：元素的背景色，从红色开始，在40%的时候变为黄色，70%时候变为粉色，在100%时候变为绿色
                        @keyframes bgchange{
                                0%{
                                       background:red;
                                }
                                40%{
                                       background:yellow;
                                }
                                70%{
                                       background:pink;
                                }
                                100%{
                                       background:green;
                                }
                如何调用帧动画？
                        div.info{
                             animation:bgchange 5s infinite;----------------------元素使用了bgchange这个动画，并且持续5秒完成，动画无限循环播放
                        }
补充：：
css属性的简写
        背景相关：
                background:  gray  url(XXX/XX.png)    norepeat;
                            (背景色)   (背景照片)          (平铺方式)
        边框相关：
                border :    1px   solid     #D31402;
                        (边框宽度)(边框样式)(边框颜色)
        字体相关：                 (字体大小)  (默认字体)        (备用字体)
                font: italic bold 20px/35px arial,sans-serif,"微软雅黑"；
                     (斜体字)(加粗)       (行高)         (备用字体)
        外边距(内边距同理)：
                margin: 10px  15px   10px   15px;
                              (上)   (右)     (下)      (左)
                margin: 10px  15px    15px;
                              (上)   (左右)      (下)
                margin: 10px  15px;
                              (上下)   (左右)
                margin: 10px;---(上下左右)



HTML和CSS部分更新完了，接下来更新JS部分了，也夹杂着java的部分知识~


学习html总结（一）
学习html总结（二）
学习html总结（三）

d199212

加油！坚持下去就能学到很多东西

然并卵zh

学过一点，看着头疼