css动画

来源：互联网发布：淘宝店铺上新模板编辑：程序博客网时间：2024/06/04 18:07
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        body{            background-image: url("bg.jpg");        }        .d1{            margin-top: 100px;            width: 900px;            height: 600px;            float: left;        }        .d2{            height: 600px;            float: left;            width: 400px;        }        .p1{            color: white;            margin-top: 50px;            margin-left: 30px;            font-size: 50px;        }        .p1:hover{            transform:scale(1,1.2);            color: black;        }        .p2{            margin-top: 30px;            margin-left: 30px;            color: white;        }        .p2:hover{            color: aquamarine;            transform: rotate(-360deg);            display: block;            transition: 2s;        }        .p3{            margin-top: 50px;            margin-left: 30px;        }        .img1{            margin-left: 30px;            margin-top: 50px;        }        .img2:hover{            transform:skew(0deg,25deg);        }    </style></head><body>        <div class="d1">            <p class="p1">Blue App Template</p>            <p class="p2">One page Responsive HTML 5 parallax<br/>business landing page</p>            <p class="p3">Lorem ipsum dolor sit amet,consectetur adipiscing elit.Simillque autem,<br>            atque in voluptatibus repellat nostrum iusto architecto vel placeat<br>numquam omnis assumenda            </p>            <img class="img1" src="003.png" onmouseout="this.src='003.png'" onmousemove="this.src='001.png'">        </div>        <div class="d2">            <img class="img2" src="phone.png">                    </div></body></html>
阅读全文
0 0