用css3实现一个会飞的小火箭案例

1、css3中我们常用到的一个属性是transform，也就是我们常常所用的缩放，平移，旋转等2D动画，接下来就用这几个变换个给大家做一个小案例，效果图如下：

2、html代码：

<body><img src="../img/rocket.png" alt="">
</body>

3、css代码：

<style>html, body {width: 100%;height: 100%;padding: 0;margin: 0;}body {overflow: hidden;background: radial-gradient(150px at top right, red, orange, skyblue);}img {position: absolute;left: 20px;bottom: -200px;} body:hover img{transition: all 3s;transform: translate(1400px, -700px)  rotate(45deg) scale(0.2);}</style>

4、注意点：

4.1

  transform: translate(1400px, -700px)  rotate(45deg) scale(0.2);

这一行的代码的书写顺序是有要求的，必须是先translate，然后再能旋转，不能颠倒，因为实现的效果是会受先后顺序所影响的

4.2

这个太阳的生成是采用径向渐变，渐变我们分两种：线性渐变和径向渐变，径向渐变的原理如下：

径向渐变：半径 at 圆心点，color1, color2, color3, 圆形之外的区域用最后一个颜色填充

  background: radial-gradient(150px at top right, red, orange, skyblue);

在这里顺便给大家拓展一下线性渐变：

 background: linear-gradient(to bottom, red, yellow);

线性渐变的方向是固定的，需要指定渐变的方向to bottom，然后指定颜色，用逗号隔开，一般都是用来设置一些浅色的背景，让背景稍微呈现出一种立体的感觉。

总结：其实就是运用了css3中的几种变换属性，以及背景渐变的属性，代码很简单，但对于巩固这几个属性的理解还是比较好玩的~

用css3实现一个会飞的小火箭案例相关推荐

C#实现一个控制台飞行棋小游戏（附源码）
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
html5简单游戏案例,HTML5存储（带一个粗糙的打怪小游戏案例）
本地存储localStorage 设置存储内容setItem(key,value) localStorage.setItem('leo','23'); 更新存储内容对象[key]=value 对象. ...
java打怪游戏_HTML5存储（带一个粗糙的打怪小游戏案例）
本地存储localStorage 设置存储内容setItem(key,value) localStorage.setItem('leo','23'); 更新存储内容对象[key]=value 对象. ...
HTML关于机器猫的小游戏,完美起航-用HTML5+CSS3画一个简易的机器猫头像
用HTML5+CSS3画一个机器猫的头像,原图如下: 代码实现效果如下: 布局使用了绝对定位.相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是 ...
【官方】2023年“中国软件杯”大学生软件设计大赛飞桨小汪赛道基线系统
★★★ 本文源自AlStudio社区精品项目,[点击此处]查看更多精品内容 >>> 一.赛题简介:赋予机器狗感知能力 2023年"中国软件杯"大学生软件设计大赛飞 ...
android飞行棋小程序,快来飞行棋小程序-微信快来飞行棋小程序小游戏-游戏宝手游网...
快来飞行棋小程序是一款好玩的创意小游戏,点击喜欢的角色和其他玩家们来一场刺激的飞行棋大赛,快来飞行棋小程序中不同的冒险玩法和创意休闲体验让你成功完成任务,使用你的专属道具驾驶飞机超过其他的玩家,经典的 ...
C# 飞行棋小游戏 (控制台应用)
目录 C# 控制台飞行棋小游戏简要介绍游戏画面规则说明游戏代码 `Entry.cs` `Operate.cs` `Map.cs` `Player.cs` 其他问题 C# 控制台飞行棋小游戏简 ...
C#双人飞行棋小程序
项目源代码提取码:3306 备注:本程序基于Microsoft Visual Studio 2019,请选择支持本案例解决方案的编辑工具打开. 视频详解请戳:传智播客C#控制台飞行棋小程序 u ...
css3画一个三角形,css3 画三角形
/*箭头向上*/ .arrow-up { width:0; height:0; border-left:20px solid transparent; border-right:20px solid ...

用css3实现一个会飞的小火箭案例

用css3实现一个会飞的小火箭案例相关推荐

最新文章

热门文章