【HTML】动画合集--跟着pink老师学习

1.奔跑小熊

奔跑小熊

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body{background-color: #000;}div{position: absolute;width: 200px;height: 100px;background: url(img/bear.png) no-repeat;/* 多个动画之间用逗号隔开 */animation: bear 1s steps(8) infinite,move 5s forwards;}@keyframes bear{0%{background-position: 0 0;}100%{background-position: -1600px 0;}}@keyframes move{0%{left:0;}100%{left:50%;margin-left: -100px;}}</style>
<body><div></div>
</body>
</html>

2.旋转木马

【旋转木马】萧炎后宫

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body{/* 近小远大 */perspective:1400px;}section{/* 保持3D效果 */transform-style: preserve-3d;position: relative;width: 400px;
height: 170px;
margin: 150px auto;
/* 添加动画 */
animation:rotate  13s linear infinite;
background: url(img/中间.png ) no-repeat;
/* Background-size属性：改变背景图片大小 */}/* 鼠标放上去动画停止 */section:hover{animation-play-state: paused;}@keyframes rotate{
0%{transform: rotateY(0deg);
}
100%{transform: rotateY(360deg);
}}section div{position: absolute;top:0;left:0;width: 100%;height: 100%;}section div:nth-child(1){
background:url(img/1662791246215.png) no-repeat;
/* 第一个旋转0°,剩下的每张旋转60° */
transform: rotateY(0deg)translateZ(400px);}section div:nth-child(2){
background:url(img/1662878143384.png) no-repeat;transform: rotateY(60deg) translateZ(400px);}section div:nth-child(3){
background:url(img/1667109864158.png) no-repeat;transform: rotateY(120deg) translateZ(400px);}section div:nth-child(4){
background:url(img/IMG_20221023_141701.jpg) no-repeat;transform: rotateY(180deg) translateZ(400px);}section div:nth-child(5){
background:url(img/IMG_20221106_221334.png) no-repeat;transform: rotateY(240deg) translateZ(400px);}section div:nth-child(6){
background:url(img/IMG_20221204_215521.jpg) no-repeat;transform: rotateY(300deg) translateZ(400px);}</style>
<body><section><div></div><div></div><div></div><div></div><div></div><div></div></section>
</body>
</html>

素材：

3.翻转卡

翻转卡

.photo-container {perspective: 1200px; /* 透视视图 */float:left;width:45%;}.rotate-box {position:relative;transform-style: preserve-3d; /* 3D 转换 */transition:1s ease; /* 转换效果持续 1秒 */margin:10%;}/* 背面文本样式，透明背景，并设置默认为反转180度，其次要将图像置于图像的背面，所以这里我们利用z轴来控制，CSS代码如下： */.text {position:absolute;top:0;width: 400px;height: 510px;;transform: rotateY(180deg) translateZ(1px); /* 反转180度 并设置z轴让其置于图片背面 */color:#666;text-align:center;opacity:.06;background:rgba(255,255,255,.9);transition: 1s opacity;}/* 使用Hover来触发动画 */.photo-container:hover .rotate-box{transform: rotateY(-180deg);}.photo-container:hover .text{opacity:1}/* 通过伪元素（:after）给图像添加一个透视阴影，使整体更有3D立体感觉。 */.rotate-box:after {content:' ';display:block;width:100%;height:7vw;/* vw是移动设计备窗体单位 */transform:rotateX(90deg);background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); /* radial-gradient 是径向渐变 */}.rotate-box img{width:400px ;height: 510px;}

4.3D动态导航

动态导航

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>*{margin: 0;padding: 0;}ul{margin: 100px; auto;list-style: none;}a{text-decoration: none;color:#fff;}ul li{float: left;margin: 0 10px;width: 120px;height: 35px;/* box旋转也需要透视效果,因此给父级加上： */perspective: 1300px;}.box{transform-style: preserve-3d;position: relative;width: 100%;height: 100%;transition: all .8s;}.box:hover{transform:rotateX(90deg) ;}.front,.bottom{
position: absolute;
left:0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 35px;}.front{background-color: pink;transform: translateZ(1px);z-index: 1;/* 向前移动,把中心点放在中心 ，z轴向前为正*/transform:  translateZ(17.5px);}.bottom{background-color: rgb(7, 78, 233);/* 如果是多种样式,移动必须写在最前面 */transform:  translateY(17.5px) rotateX(-90deg);}</style>
<body><ul><li><div class="box"><div class="front"><a href="#">食品</a></div><div class="bottom"><a href="#">点击</a></div></div></li><li><div class="box"><div class="front"><a href="#">食品</a></div><div class="bottom"><a href="#">点击</a></div></div></li><li><div class="box"><div class="front"><a href="#">食品</a></div><div class="bottom"><a href="#">点击</a></div></div></li><li><div class="box"><div class="front"><a href="#">食品</a></div><div class="bottom"><a href="#">点击</a></div></div></li></ul>
</body>
</html>

【HTML】动画合集--跟着pink老师学习相关推荐

跟着Pink老师学前端——学成在线
最近跟着pink老师学习html+css,做了一个学成在线页面,后边根据老师的框架更改了一些图片代码部分: <!DOCTYPE html> <html lang="en ...
pink老师学习之Echarts
pink老师学习之Echarts 可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加 ...
swift 动画合集
本例参照objective-c的动画合集进行swift的转换,objective-c地址参照地址 https://github.com/yixiangboy/IOSAnimationDemo 1 ...
一款炫酷的相册动画合集【源码分享】
这是一款炫酷的相册动画合集,集合了粒子.雪花.气泡.蝴蝶心形路径.星星.相册翻页等效果,有需要的可以点击下方名称链接下载. 效果图炫酷的相册动画合集整理不易,欢迎大家交流学习.
Android 之动画合集之属性动画 -- 又见
本节引言: 上节我们对Android的属性动画进行了初步的学习,相信大家对于属性动画已经不再是一知半解的状态了,本节我们继续来探究Android属性动画的一些更高级的用法! 1.Evaluator自 ...
20P37 Premiere预设200种文字标题介绍动画合集包 200 Titles Collection下载
20P37 Premiere预设200种文字标题介绍动画合集包 200 Titles Collection下载包含内容: – 15个快速标题 – 15个迷你小标题 – 30金色标题 – 30个标注介 ...
电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录
放假在家没事,跟着b站黑马前端课程手把手做了个电商平台数据可视化实时监控系统.老师课讲得非常好,几乎是保姆级别,对我这种小白非常友好.在这里记录一些自己遇到的问题,欢迎批评指正. 问题记录 1.ECh ...
vue 引入canvas_canvas动画合集Vue组件
vue-canvas-effect canvas动画合集Vue组件 [? online demo](https://chenxuan0000.github.io/vue-canvas-effect/i ...
【小程序动画合集】10种小程序动画效果实现方法，文章太长建议收藏！
前言一提小程序与动画,首先想到的是什么?嗯,微信小程序独创了一套动画玩法,官方支持3种动画方案,分别是 createAnimation . this.animate 和 CSS3动画 . 1. cr ...

【HTML】动画合集--跟着pink老师学习

1.奔跑小熊

2.旋转木马

3.翻转卡

4.3D动态导航

【HTML】动画合集--跟着pink老师学习相关推荐

最新文章

热门文章