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

最新推荐文章于 2024-05-10 09:31:47 发布

冷色调的夏天

最新推荐文章于 2024-05-10 09:31:47 发布

阅读量2.8w

点赞数 20

分类专栏：编程&软件&人工智能文章标签： HTML CSS 动画反转

本文链接：https://blog.csdn.net/qq_40695642/article/details/100025868

版权

编程&软件&人工智能专栏收录该内容

16 篇文章 3 订阅

订阅专栏

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>

效果如下
在这里插入图片描述

// 实现炫酷的扑克旋转，但是如果使用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>

在这里插入图片描述

冷色调的夏天

关注

20
点赞
踩
82

收藏

觉得还不错? 一键收藏
0
评论
HTML实现简单的动画效果(盒子过渡，扑克旋转)

HTML实现简单的动画效果(盒子过渡，扑克旋转)// 实现一个简单的鼠标点击div触发过渡效果<!doctype html><html><head><meta charset="utf-8"><title>过渡效果</title><style>*{ margin:0px; padding:0px;}...
复制链接

扫一扫

专栏目录