html-css10 过渡/米兔练习/动画/动画练习/小球动画/平移和小米移动图
2024-03-22 14:38:04
过渡
<!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;}.box1 {width: 800px;height: 800px;background-color: silver;overflow: hidden;}.box1 div {width: 100px;height: 100px;margin-bottom: 100px;}.box2 {background-color: aqua;transition: all 2s;/* transition: height 2s; *//* 1. margin-left: 700px; *//*过渡：通过过渡，我们可以设置一个属性发生变化时的切换方式*//* transition-property: ;指定要过渡的属性,多个属性使用逗号隔开width/height/all(全部过渡)/颜色也可以过渡，但是必须是有效数值比如margin-left一开始设置700，在hover那里改为0，可以看到滑动效果但是如果设置为auto，不是有效数值，就不可以了transition-property: width ;transition-property:all;2.transition-property:height width;*//*transition-duration: 指定过渡效果的持续时间2. transition-duration: 2s 100ms;可以分别指定时间指定过渡时间的持续时间, 1s=1000mstransition-duration: 2s;*//* transition-timing-function:过渡的时序函数，指定过渡执行的方式 ease(默认值)慢速开始，先加速，再减速linear匀速运动ease-in加速运动ease-out 减速运动ease-in-out先加速后减速贝塞尔曲线cubic-bezier（）未指定时序函数 https://www.runoob.com/cssref/func-cubic-bezier.htmlsteps()分布执行过渡效果start:在时间开始时执行过渡end：在时间结束时执行过渡steps(2,end);/steps(2,end);分两步执行，start表示第一秒第二秒开始的时候就执行。end表示结束的时候执行transition-timing-function: cubic-bezier(.24,.95,.82,.-0.88); transition-timing-function:steps(2,end);*//*transition-delay:过渡效果的延迟，等待一段时间之后在执行transition-delay: 2s;*//*一般情况下，直接用transition: 写，可以设置所有的效果，而且没有严格的次序要求如果要写延迟，则两个时间第一个是持续时间值，第二个是延迟值*/}/*后代元素选择器，点击box1,box2的大小会被改变*/.box1:hover .box2 {width: 200px;height: 200px;/*1. margin-left: 0px; */}
</style><body><div class="box1"><div class="box2"></div></div>
</body></html>
米兔练习
<!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>米兔练习</title>
</head>
<style>
.box1{width: 131px;height: 260px;background-image: url(../01/图片/米兔练习.jpg);margin: 50px auto;background-position: 0 0;
transition:all 0.3s steps(3);
/*但是现在是滑动效果*/
}/*传统的hover只能移动一下*/
.box1:hover{background-position: -396px 0;
}
</style>
<body><div class="box1"></div>
</body>
</html>
动画
<!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;}.box1 {width: 800px;height: 800px;background-color: silver;overflow: hidden;}.box1 div {width: 100px;height: 100px;margin-bottom: 100px;margin-left: 0;}.box2 {background-color: aqua;transition: 2s;/*设置box2的动画*//* animation-name:要对当前元素生效的关键帧的名字 */animation-name: test;/*动画的执行时间*/animation-duration: 4s;/*动画的延时*/animation-delay: 2s;/*变化方式*/animation-timing-function: ease-in-out;/*动画执行的次数可选值:infinite无限执行*/animation-iteration-count: 2;/* animation-direction指定动画运行的方向normal从from向to执行，每次都是这样reverse从to向from运行alternate 从from向to执行，回来的时候反向执行alternate-reverse 从to向from执行animation-direction:alternate;*//* animation-play-state 设置动画执行的状态可选值：running 默认值 动画执行paused 动画暂停*/animation-play-state: paused;/* animation-fill-mode: 动画的填充模式 可选值:none默认值 动画执行完毕元素回到原来位置forwards 动画执行完毕，会停在结束的位置backwards 动画延时等待时，元素就会处于开始的位置不设置，延时的时候就是绿色，设置了，颜色会先变成开始的橙色both 结合了两种特点animation-fill-mode: none; *//* animation:;可以把全部的写下来 */}.box1:hover div {animation-play-state: paused;}/*动画动画和过渡类似，都是可以实现一些动态的效果不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发动态效果设置动画效果，必须先要设置一个关键帧，关键帧设置动画执行的每一个步骤*/@keyframes test {/*from表示动画的开始位置,也可以用0%表示*/from {background-color: orange;margin-left: 0;}/*ro表示动画的结束位置，也可以用100%表示*/to {background-color: red;margin-left: 700px;}}
</style><body><div class="box1"><div class="box2"></div></div>
</body></html>
<!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>奔跑的少年</title>
</head>
<style>.box1{height: 260px;width: 131px;background-image: url(../01/图片/米兔练习.jpg);margin: 50px auto;animation: run 1s steps(4);}/*创建关键帧*/
@keyframes run{from{background-position: 0 0;}to{background-position:-514px 0;/*在第514那个位置应该是空白，但是我们的背景图片会平铺，所以在514那个位置是第一个图片*/}
}
</style><body><div class="box1"></div>
</body>
</html>
小球动画
<!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>动画补充</title>
</head><style>.out {height: 500px;border-bottom: 10px solid black;margin: 0 auto;overflow: hidden;/*外边距重叠了*/}.out div{float: left;}.out div {width: 100px;height: 100px;background-color: #bfa;border-radius: 50%;animation: fall 1.5s forwards ease-in infinite alternate;/*自由落体加速*/}div.box2{background-color: antiquewhite;animation-delay: 0.1s;}div.box3{background-color: rgb(218, 149, 59);animation-delay: 0.1s;}div.box4{background-color: rgb(63, 199, 22);animation-delay: 0.2s;}div.box5{background-color: rgb(17, 134, 202);animation-delay: 0.3s;}div.box6{background-color: rgb(175, 59, 12);animation-delay: 0.4s;}div .box7{background-color: rgb(90, 56, 12);animation-delay: 0.5s;}div.box8{background-color: rgb(151, 13, 71);animation-delay: 0.6s;}/*创建小球下落的画面*/@keyframes fall {from {margin-top: 0;}33% {margin-top: 400px;animation-timing-function: ease-out;/*减速*/}66% {margin-top: 100px;}to {margin-top: 400px;animation-timing-function: ease-out;}}
</style><body><div class="out"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div><div class="box7"></div><div class="box8"></div></div>
</body></html>
XY 平移和小米移动图
<!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>变形平移</title>
</head>
<style>.box1{width: 200px;height: 200px;background-color: rgb(243, 26, 98);margin: 0px auto;margin-top: 200px;transform: translateY(50%);}/*变形就是指通过CSS来改变元素的形状或位置 变形不会影响到页面的布局，只会移动自己，即使盖住别的元素，也不会使别的元素移动transform:用来设置元素的变形效果translateX()沿着XYZ轴平移translateY(-100px)translateZ(50%) 百分比是相对于自身计算的，而不是相对于包含块*/.box2{width: 200px;height: 200px;background-color: rgb(28, 127, 214);margin: 0px auto;}.box3{background-color: orchid;position: absolute;/*当不设置大小，大小默认被元素撑开，我们怎么让它居中？*/left:50%;top:50%;transform: translateX(-50%) translateY(-50%);}.box4, .box5{width: 220px;height: 300px;background-color: yellowgreen;float: left;margin-right: 10px;transition: all .3s;}.box4:hover{transform: translateY(-6px);box-shadow: 0 0 10px rgba(0, 0, 0, .3);}
</style><body>
<div class="box1"></div>
<!-- <div class="box2"></div>
<div class="box3">aaa</div> --><div class="box4"></div>
<div class="box5"></div></body>
</html>
<!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>Z轴平移</title>
</head><style>html {/*不设置视距的话，就没办法看到*//*设置当前网页的视距为800，人距离网页的距离*/perspective: 800px;}body{border: 2px solid red;}.box1 {width: 250px;height: 200px;background-color: aqua;margin: 50px auto;/*为了能看到效果的变化，加上这句话*/transition: all 2s;}
body:hover .box1{/*通过旋转可以使XYZ轴旋转指定的角度180deg=1turnrotateX()rotateY()rotateZ()*//* transform: rotateZ(90deg);transform: rotateZ(.25turn); */transform: rotateY(150deg) translateZ(100px);
/* background-color: orchid ; */
/* backface-visibility:设置是否显示元素的背面 */
/* backface-visibility: hidden; */
}</style><body><div class="box1"><img src=".//picture/1 (1).png" alt=""></div>
</body></html>
transform三大属性 rotate、scale、translate
transform: scale(2); X、Y分别放大两倍
transform: scaleX(2);水平方向放大两倍
transform: scaleY(2);垂直方向放大两倍
html-css10 过渡/米兔练习/动画/动画练习/小球动画/平移和小米移动图相关推荐
- 米兔机器人 自由模式_成人床下也可以有玩具：MI 小米 米兔积木机器人 开箱体验...
成人床下也可以有玩具:MI 小米 米兔积木机器人 开箱体验 2016-11-24 22:00:05 320点赞 550收藏 172评论 目录前言 购买过程 开箱 图纸下载 机器人形态 恐龙形态 米兔积 ...
- 初学CSS动画之行走的米兔
米兔练习比较经典,利用css中的animation就可以实现 做的步骤如下: 第一步:找到需要使用的米兔图片,如下图: 第二部,打开ps,测量图片的大小,如图: 这里宽为528px,高为271像素 第 ...
- flash一个按钮控制动画_flutter闪屏过渡动画，闪光占位动画
在程序设计的理念中,讲究一切都来源于物理世界,在现实世界中,人们在每接触到一个新的事物或者说在手指触碰到一个事物时,总是心里默许期望有一个反馈效果,这就是来源于心底深处常常被人忽略的一个潜在期望. 在 ...
- flutter闪屏过渡动画，闪光占位动画
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息 网易云[玩转大前端]配套课程 EDU配套 教程 Flutter开发的点滴积累系列文章 实现的效果 1 添加依 ...
- android 延时播放动画,HollyTransition: 让APP丝滑般流畅：深入解读Android过渡动画Transition. 共享元素动画、场景动画、过场动画、延时动画...
HollyTransition 零.导读 深入解读Android过渡动画Transition: 页面切换动画(过场动画) 共享元素动画 延时动画 场景动画 一.Transition前世今生 为了支持各 ...
- fiash星空动画制作_三维动画制作的详细流程
三维动画制作的详细流程: 随着互联网的发展,三维动画技术更新,三维动画制作技术在生活中运用十分广泛,我们经常在一些电视广告,影视电影中会看到一些三维特效,因为震撼的真实感很受大众喜欢.三维动画技术让视 ...
- Flutter 动画全解析（动画四要素、动画组件、隐式动画组件原理等）
本文通过拆解 Flutter 中动画的实现方式以及原理来介绍动画实现的整个过程. 1. 动画四要素 动画在各个平台的实现原理都基本相同,是在一段时间内一系列连续变化画面的帧构成的.在 Flutter ...
- 4.QML动画——概念、动画应用方式和动画的缓动曲线
一.动画 动画将应用于属性更改. 动画通过对属性值定义插值曲线,控制属性值从一个值到另一个值平滑过渡. Qt Quick中的所有动画均由同一计时器控制,因此动画是同步的. 这样可以提高动画的性能和视质 ...
- Android源码解析(一)动画篇-- Animator属性动画系统
Android源码解析-动画篇 Android源码解析(一)动画篇-- Animator属性动画系统 Android源码解析(二)动画篇-- ObjectAnimator Android在3.0版本中 ...
最新文章
- javascript中this那些事
- 在C++中for、if...内定义的变量在其之外就失效了~
- 计算机应用技术多久退休,Windows 7正式退休 这些解决办法你必须了解
- 每日一笑 | 对不起，我还没下班...
- pytorch 使用DataParallel 单机多卡和单卡保存和加载模型时遇到的问题
- 判断语句_如何学好C语言判断语句？攻略if语句是第一步
- 华北水利水电大学计算机实验报告怎么写,考试类：华北水利水电大学C语言实验报告.doc...
- matlab运行时风扇,TCFD和CAESES耦合优化案例-轴流风扇
- leetcode-全排列详解（回溯算法）
- 卷积过滤器的宽度_卷积神经网络简析
- 有关于腾讯地图服务端IP定位接口的获取当前城市的处理
- XOCDE构建提示Command /usr/bin/codesign failed with exit code 1的解决办法
- sm3 算法java_java sm3加密算法
- c语言中compar的用法,C/C++中关于std::string的compare陷阱示例详解
- 做LeetCode题的感悟 (1-10题)
- Java Static关键字详解
- 算法学习系列(贪心算法)—机器人攀登问题
- 机器学习基础整理(第2章) - 模式分类
- 小程序的WXML WXSS
- DAB-DETR: DYNAMIC ANCHOR BOXES ARE BETTER QUERIES FOR DETR翻译