HTML实现简单的动画效果(盒子过渡，扑克旋转)

「爱情、让人受尽委屈。」 2024-04-17 05:37 134阅读 0赞

# HTML实现简单的动画效果(盒子过渡，扑克旋转) #

// 实现一个简单的鼠标点击div触发过渡效果
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>过渡效果</title>
    <style>
    *{  margin:0px; padding:0px;}
    div{ 
    	width:300px;
    	height:300px;
    	position:absolute;
    	background-color:#03F;
    	border:5px solid #FF0;
    	left:100px;
    	top:100px;
    	transition: left 2s linear 0s,background-color 2s linear 0s,border 2s linear 0s;}
    div:active{ 
    	left:1000px;
    	background-color:#F39;
    	border:5px solid #3CF;}
    </style>
    </head>
    
    <body>
    <div></div>
    </body>
    </html>

效果如下  
![在这里插入图片描述][20190822222214707.gif]

// 实现炫酷的扑克旋转，但是如果使用js会更加简单
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>旋转扑克</title>
    <style>
    *{  margin:0; padding:0;}
    .pkBox{ 
    	width:258px;
    	height:360px;
    	position:relative;
    	margin:200px auto;}
    .pkBox > img{ 
    	width:100%;
    	height:100%;
    	position:absolute;
    	left:0;
    	top:180px;
    	transition:transform 2s;
    	transform-origin:right top;}
    .pkBox:hover >img:nth-of-type(1){   //想想这些重复的可以用什么好的方法替换呢
    	transform:rotate(30deg);}
    .pkBox:hover >img:nth-of-type(2){ 
    	transform:rotate(60deg);}
    .pkBox:hover >img:nth-of-type(3){ 
    	transform:rotate(90deg);}
    .pkBox:hover >img:nth-of-type(4){ 
    	transform:rotate(120deg);}
    .pkBox:hover >img:nth-of-type(5){ 
    	transform:rotate(150deg);}
    .pkBox:hover >img:nth-of-type(6){ 
    	transform:rotate(180deg);}
    .pkBox:hover >img:nth-of-type(7){ 
    	transform:rotate(210deg);}
    .pkBox:hover >img:nth-of-type(4){ 
    	transform:rotate(240deg);}
    .pkBox:hover >img:nth-of-type(8){ 
    	transform:rotate(270deg);}
    .pkBox:hover >img:nth-of-type(9){ 
    	transform:rotate(300deg);}
    .pkBox:hover >img:nth-of-type(10){ 
    	transform:rotate(330deg);}
    .pkBox:hover >img:nth-of-type(11){ 
    	transform:rotate(360deg);}
    </style>
    </head>
    
    <body>
    <div class="pkBox">
    <img src="pk.png" alt="">
    <img src="pk.png" alt="">
    <img src="pk.png" alt="">
    <img src="pk.png" alt="">
    <img src="pk.png" alt="">
    <img src="pk.png" alt="">
    <img src="pk.png" alt="">
    <img src="pk.png" alt="">
    <img src="pk.png" alt="">
    <img src="pk.png" alt="">
    <img src="pk.png" alt="">
    </div>
    </body>
    </html>

![在这里插入图片描述][20190822224256603.gif]

[20190822222214707.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/362c5429157045a5a9575396082efa14.gif
[20190822224256603.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/92872b3c41ba48829a1d6afa00e0aa65.gif