通过设置css3实现摇晃的桃子
- 石家庄邮电职业技术学院专属活动第2期：【校园前端学习笔记】主题征文
- 石家庄邮电职业技术学院社区
学号后四位：0232
知识点
@keyframes规则：创建动画，使 div 元素匀速运动
background-position：设置背景图片初始位置
transform-origin:设置旋转元素的基点位置
transform旋转（过渡动画）：
rotate(angle)定义2D旋转 ——原点为基点
rotateX(angle)X ——X轴为基点
rotateY(angle)Y ——Y轴为基点
transform: rotate3d(x,y,z,angle)定义3d旋转 ——（x,y,z）为基点 +旋转角度animation（自定义动画）：
linear：动画从头到尾的速度是相同的。
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in-out：动画以低速开始和结束。
infinite：指定动画应该播放无限次（永远）
项目名称及描述
项目名称为摇晃的桃子，通过利用@keyframes规则、transform与animation设置桃子摇动的动画
所需资源
项目效果
桃子
项目代码
css部分代码：
HTML：
项目完成思路
完成这一小项目的首要任务便是将桃子一个一个分割出来：通过计算桃子的大小设置高宽将桃子取出来并加以绝对定位确保桃子的位置。当分割出来之后便是设置各个桃子的位置。
完成以上两个任务后便是本次练习的关键：给桃子创建摇晃动画，利用@keyframes规则设置桃子在运动途中的摆动角度再用animation自定义动画的摇晃设置并设置动画以低速开始和结束，再加以infinite使指定动画无限次播放实现桃子一直处于摇摆状态。
到此该项目便基本完成。
项目实现过程中遇到的问题及解决方案
在项目的编写中可能会出现一些琐碎的问题，在此我分享一下在我编写途中遇到最麻烦的问题
桃子的放置：
想要将桃子放置在自己指定的位置可是件烦心事，经过研究其实只需要将图片用电脑的自带的画图工具打开然后将光标放置在自己指定的位置，在画图左下角便会显示出光标位置的定位，通过画图工具提供的定位便可直接在代码中设置桃子的位置（注：算上桃子的大小加以修改）
通过设置css3实现摇晃的桃子相关推荐
- css3中斜杠_使用斜杠语法设置CSS3边界半径
css3中斜杠 What could I possibly say about the CSS3 border-radius property that hasn't been said before ...
- CSS3制作摇晃的吊灯
一个前端,如果因为写JS时间过久而忘记如何写HTML和CSS了,其实也是一种悲哀啊,现在,慢慢的,一步一步的找回吧. 第一站: 摇晃的吊灯 如我的博客所示,右上角有两盏一直摇晃从未停止的吊灯,下面po ...
- html屏幕飘灯笼,HTML5+CSS3实现摇晃的蓝色斋月灯笼动画效果
HTML5 CSS3 蓝色斋月灯笼动画 * { padding: 0; margin: 0; outline: none; -webkit-box-sizing: border-box; -moz-b ...
- 设置css3动画的顺序,CSS3 “瓷砖”顺序飘落的动画
CSS 语言: CSSSCSS 确定 body { background: #555; } div, :before, :after { position: absolute; } .scene { ...
- html摇晃的桃子代码,index.html
这一波爱国头像风我要跟!一起换国庆专属头像吧 var _hmt = _hmt || []; (function() { var hm = document.createElement("sc ...
- CSS3变形、渐变、动画的基本使用
目录 CSS3 变形 2D转换 3D转换 CSS3颜色渐变 CSS3动画 transition过渡 animation动画 案例1:旋转的风车 案例2:摇晃的桃子 案例3:3D开门动画 总结 CSS3 ...
- 项目3-3---摇晃的桃子
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- CSS3中设置动画播放时间
animation-duration主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所 ...
- html文字阴影php中文网,css3如何添加文字阴影效果？text-shadow设置文字阴影效果...
阴影效果是一个常见也很实用的效果,相信有些朋友在使用阴影效果来美观网页页面时,有时会有一些疑问,比如:字体文字阴影是怎样设置的等等.那么本章就给大家谈谈css3是如何设置字体文字阴影的.有一定的参考价 ...
最新文章
- 一种精确从文本中提取URL的思路及实现
- iOS APP日志写入文件（日志收集）
- 5.中文问题（自身，操作系统级别，应用软件的本身），mysql数据库备份
- CSS 修饰图片的5种方法
- mysql 2027_阿里云mysql远程登录报ERROR 2027(HY000)
- python antlr_使用ANTLR在5分钟内用Java解析任何语言：例如Python
- flask对mysql数据库增删改查_Flask学习(三) - Flask-SQLAlchemy对数据库增删改查
- 尚学堂java答案解析 第二章
- 关于c语言循环的格式,关于for循环的格式
- Javaspring 14-18课 spring AOP
- mysql mha好吗_MySQL高可用方案MHA的一些总结和思考
- NLP︱高级词向量表达（二）——FastText（简述、学习笔记）
- jquery可拖拽式内容模块gridder
- 计算机函数语法,clickhouse 函数语法
- 音视频处理、图像处理、图像识别和字符识别全能库JavaCV完整教程（包含完整JavaCV入门、JavaCV实战、ffmpeg、opencv和tesserac教程）
- cad查看_CAD手机看图软件中批注的图片在电脑上如何查看？
- [蓝桥杯-138译码器和74hc573锁存器的关系]
- FatFs 之三 FAT文件系统基础、FAT 数据格式、引导、编码
- 中望3d快捷键命令大全_CAD、3D快捷命令
- 黑群晖DSM安装教程及详细配置