图片旋转

最新推荐文章于 2022-12-16 16:22:21 发布

gh323093

最新推荐文章于 2022-12-16 16:22:21 发布

阅读量131

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78442408

版权

Web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/jishi_01.css" rel="stylesheet"/>
</head>
<body>
<div class="da">
    <header>
        <img src="img/baidu.jpg"/>
    </header>
    <div class="top">
        <!--文本框-->
        <input type="text" id="inputtext" />
        <!--提交按钮-->
        <input type="submit" value="百度一下" id="annim"/>
    </div>
    <div class="button1">
        <img src="img/weijuchiluntu.jpg" id="img"/>
        <img src="img/yuanjihuasy.png"/>
        <img src="img/sunlinanian.png"/>
        <img src="img/gaoqingdonmanxiaotuzis.jpg"/>
        <img src="img/duoroubanqq.jpg"/>
    </div>
    <div class="button2">
        <img src="img/touxixiaoqinx.jpg" id="img2"/>
        <img src="img/xiaoqingxbanq.jpg"/>
        <img src="img/fengjingxiaotu.jpg" id="img3"/>
        <img src="img/bizhi112.png" id="img4"/>
        <img src="img/banquantupian801.png"/>
    </div>
</div>
</body>
</html>


style文件@charset "utf-8";
/* CSS Document */
.da{
    width: 1340px;
    height: 630px;
    margin: 0 auto;
    background: url("../img/tig.jpg");
}
header{
    width: 50px;
    height: 40px;
    left: 45%;
    top: 30px;
    position: absolute;
}
#inputtext{
    margin-left: 500px;
    margin-top: 120px;
    width: 300px;
    height: 30px;
    background-position: right;
    background-image: url("../img/cap.jpg");
    background-size: 20px;
    background-repeat: no-repeat;
}
#inputtext:hover{
    transform: scale(1.5,1.5);
}
#annim{
    color: #fff;
    border: none;
    background: #7591ff;
    width: 80px;
    height: 36px;
 }
#annim:hover{
    color: red;
    transform: scale(2,2);
}
.button1{
    width: 800px;
    height: 132px;
    margin-left: 360px;
    margin-top: 50px;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
}
.button1 img{
    width: 130px;
    height: 130px;
}
.button2{
    width: 800px;
    height: 132px;
    margin-left: 360px;
    margin-top: 5px;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
}
.button2 img{
    width: 130px;
    height: 130px;
}
#img1{
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
}
.button1:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}
.button2:hover{
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
}
#img3:hover{
    transform: scale(1.5);
}
#img4:hover{
    transform: skew(0,50deg);
}

gh323093

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片旋转

html>html lang="en">head> meta charset="UTF-8"> title>diyititle> link href="css/jishi_01.css" rel="stylesheet"/>head>body>div class="da"> --> --> --> div class="to
复制链接

扫一扫

专栏目录