Html和css动画及其效果

来源：互联网发布：入门红酒知乎编辑：程序博客网时间：2024/05/24 03:10
<!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"                 onmouseover="this. src='001.png'" onmouseout="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>
阅读全文
0 0