html复习3

最新推荐文章于 2024-04-19 04:39:41 发布

换个名字换个心情

最新推荐文章于 2024-04-19 04:39:41 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/qq_29087535/article/details/84957195

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>html5和css3</title>
</head>
<style>
   section{
        width:300px;
        height:300px;
        margin:40px auto;
        padding:20px;
   }

    .sec1{
       background: linear-gradient(to right, green, yellow);
    }
    .sec2{
       background: linear-gradient(to right, green , yellow, red);
    }
    .sec3{
       background: linear-gradient(to top left, yellow, red);
    }
    .sec4{
       background: linear-gradient(30deg, green, red);
    }

    .sec5{
       height:200px;
       background: radial-gradient(circle, aqua , green);
    }
    .sec6{
       height:200px;
       background: radial-gradient(ellipse at center, aqua , green);
    }
    .sec7{
       height:200px;
       background: radial-gradient(circle at right top, aqua , green);
    }
    .sec8{
       height:200px;
       background: radial-gradient(circle 40px at bottom left , aqua , green);
    }
    .sec9{
       height:200px;
       background: radial-gradient(100% 60% at right , aqua , green); /* 百分比混合形状，如 circle 100% 60%, aqua, green 不生效, 混合像素有效果 */
    }

    @keyframes xz{
       100%{transform: rotate(360deg); background: lightgreen;}
    }
    @keyframes change{
       0%{opacity:1;}
       25%{opacity:0.25;}
       50%{opacity:0.5;}
       75%{opacity:0.75;}
       100%{opacity:1;}
    }

    .sec11{
       width:100px;
       height:100px;
       background: aqua;
       animation: xz 2s ease-in-out infinite both, change 2s ease infinite;
    }

    .sec10{
       border-radius:50%;
       background: radial-gradient(circle at 100px 20px, aqua ,green);   /* 这里的位置写关键字行，写像素也行 */
    }

    .trasec{
       margin:0;
       width:100px;
       height:40px;
       background: lightgreen;
       transition: all 2s ease-in-out 3s;
    }
    .trasec:hover{
       width:200px;
       height:50px;
       background: red;
    }

    .nav1,.nav2{
       border:2px solid orange;
       width:100px;
       height:100px;
        transition:all 1s;

    }
    .nav1:hover{
       transform: translate(40px,0px) scale(1.4) skew(20deg,10deg) rotate(180deg);
       transform-origin: left top;
    }
    .nav2:hover{
       transform: rotate3d(1,1,1,50deg);
    }

    /*正方体样式*/
    #wrap{
       border:2px solid blue;
       width:400px;
       height:400px;
       position:relative;
        margin:200px auto;
        perspective: 1000px;    /* 这个值也比较重要 */
    }

    #item{
       animation: item 2s linear infinite 7s both;
       width:200px;
       height:200px;
        transform-style: preserve-3d;
        perspective-origin: left top;
    }

    .item{
       position:absolute;
       width:200px;
       height:200px;
       border:2px solid #000;
       opacity:0.5;
       background: lightblue;
        text-align: center;
        line-height: 200px;
        font-size: 150px;
        color:green;

}

    @keyframes item1{
       100%{transform: rotateY(-90deg);}
    }
    @keyframes item2{
       100%{transform: rotateY(90deg);}
    }
    @keyframes item3{
       100%{transform: rotateX(90deg);}
    }
    @keyframes item4{
       100%{transform: rotateX(-90deg);}
    }
    @keyframes item5{
       100%{transform:translateZ(200px);}
    }
    @keyframes item6{
       100%{transform: rotateY(180deg);}
    }
    @keyframes item{
       100%{transform: rotate3d(1,1,1,360deg);}
    }

    #item1{
       z-index: 6;
       animation:item1 1s linear 1s both;
       transform-origin: left;
    }
    #item2{
       z-index: 5;
       animation: item2 1s linear 2s both;
       transform-origin: right;
    }
    #item3{
       z-index: 4;
       animation: item3 1s linear 3s both;
       transform-origin: top;
    }
    #item4{
       z-index: 3;
        animation: item4 1s linear 4s both;
       transform-origin: bottom;
    }
    #item5{
       z-index: 2;
       animation: item5 1s linear 5s both;
       transform-origin: center;
    }
    #item6{
       z-index: 1;
       animation: item6 1s linear 6s both;
       transform-origin: center;
    }

</style>
<body>

<h1>oninput事件和 output的用法</h1>

<form action="" οninput="b.value=a.value">
选择一个范围：<input type="range" name="a" id="" value="20">
<output name = "b">0</output>
</form>

<h1>background</h1>

<div style="width:700px; height:700px; padding:20px; margin:50px auto; border:10px dotted red;
background:pink url(images/erha.jpg) no-repeat center/contain padding-box content-box;" >
background:背景颜色 url(图片地址) 是否平铺背景显示位置/background-size background-origin background-clip;
background 背景也能添加多张
</div>

<div style="width:700px; height:700px; outline:4px solid green; color:#ffffff; background:url(images/xing.jpg) no-repeat,url(images/erha.jpg) no-repeat,url(images/erha2.jpg) no-repeat right bottom;">div2,背景多图片示例</div>

<section class="sec10" >利用径向渐变渲染个球形</section>

<hr />

<h1>透明度</h1>
<div style="margin:0 auto; width:400px; height:400px; opacity:0.8; filter:alpha(opacity=80);">opacity这个透明度会影响到子元素<img src="images/erha2.jpg" width="300" alt="pic"></div>
<div style="margin:0 auto; width:400px; height:400px; ">word<img src="images/erha2.jpg" width="300" alt="pic"></div>

<hr />
<h1>transition过渡</h1>
<section class="trasec">
transition
</section>

</body>
</html>

换个名字换个心情

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html复习3

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;html5和css3&lt;/title&gt;&lt;/head&gt;&lt;style&gt; se
复制链接

扫一扫