Html和css动画及其效果

最新推荐文章于 2024-08-23 10:02:01 发布

程序员的美腻

最新推荐文章于 2024-08-23 10:02:01 发布

阅读量302

点赞数

本文链接：https://blog.csdn.net/qq_40087961/article/details/78178993

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>
    <style type="text/css">

        #div1{
            width:2400px;
            height:1132px;
            padding: 50px;
            background-image:url("bg.jpg");
        }
        .change{
           font-size: 50px;
        }
        .change:hover {
            color: aquamarine;
            font-size: 60px;
        }
       .changes:hover{
            color:indigo;
            -webkit-transform: rotate(-360deg);
            -moz-transform: rotate(-360deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            display:block;
            transition:2s;

        }
/*       @keyframes animat_tans {
           from{
               transform: rotate(0deg);
           }
           to{
               transform: rotate(360deg);
           }
       }*/

        .img1{ width:500px; height:700px; margin-left: 400px}/*效果右侧的手机图片*/
        .img1:hover{transform:skew(0deg,25deg);}/*设置当鼠标划过或停到图片上时图片顺时针倾斜25度*/
    </style>
</head>
<body >
<div id="div1">
    <div style="width:600px;float:left">
        <h1 style="padding-top: 100px;margin-left: 100px;color: snow"><p class="change">Blue App Template</p></h1>
        <h3 style="padding-top: 100px;margin-left: 100px;color: snow"><a class="changes">One page Responsive HTML5 parallax<br> business landing page</a></h3>

        <h4 style="padding-top: 100px;margin-left: 100px ;color: snow">Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Similique autem,<br>atque in voluptatibus repellat nostrum iustoarchitecto vel placeat<br> numquam omnis assumenda.</h4>
        <a href="http://frg.wan.360.cn" target="_blank">
            <img style="margin-left: 100px" src="001.png" height="70" width="286"
                 οnmοuseοver="this. src='001.png'" οnmοuseοut="this. src='003.png'"/>
        </a>

    </div>
    <div style="width:600px;float: left;text-align: center" >
        <img class="img1" src="phone.png" class="changes"/>
    </div>
</div>
</body>
</html>