CSS 2D动画效果

最新推荐文章于 2024-04-11 02:28:08 发布
最新推荐文章于 2024-04-11 02:28:08 发布
阅读量770 收藏 2
点赞数 1
分类专栏： HTML与CSS 文章标签： css 2D
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bear_huangzhen/article/details/101025460
版权

示例1（盾牌动画）：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盾牌动画</title>
    <link rel="shortcut icon" href="bkq.ico"  type="image/x-icon"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #ff3040;
        }
        div {
            width: 440px;
            margin: 100px auto;
        }
        div img {
            transition: all 1s;
        }
        div img:nth-child(1) {
            transform: translate(200px,-100px) rotate(60deg);
        }
        div img:nth-child(2) {
            transform: translate(-300px,-150px) rotate(90deg);
        }
        div img:nth-child(3) {
              transform: translate(-100px,180px) rotate(-100deg);
        }
        div img:nth-child(4) {
            transform: translate(-80px,80px) rotate(125deg);
        }
        div img:nth-child(5) {
            transform: translate(200px,-100px) rotate(150deg);
        }
        div img:nth-child(6) {
            transform: translate(180px,180px) rotate(180deg);
        }
        div img:nth-child(7) {
            transform: translate(120px,120px) rotate(120deg);
        }
        div img:nth-child(8) {
            transform: translate(130px,140px) rotate(150deg);
        }
        div img:nth-child(9) {
            transform: translate(500px,-305px) rotate(390deg);
        }
        div:hover img {
            transform: none;
        }
    </style>
</head>
<body>
<div>
    <img src="img/shield_1_01.png" alt=""/>
    <img src="img/shield_1_02.png" alt=""/>
    <img src="img/shield_1_03.png" alt=""/>
    <img src="img/shield_1_04.png" alt=""/>
    <img src="img/shield_1_05.png" alt=""/>
    <img src="img/shield_1_06.png" alt=""/>
    <img src="img/shield_1_07.png" alt=""/>
    <img src="img/shield_1_08.png" alt=""/>
    <img src="img/shield_1_09.png" alt=""/>
</div>
</body>
</html>

 

示例2（楚乔传旋转动画）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>楚乔传</title>
    <style>
     div {
         width: 250px;
         height: 170px;
         /*border: 1px solid pink;*/
         margin: 200px auto;
         position: relative;
     }
        div img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.6s;
            transform-origin: top right;

        }
     /*鼠标经过div 第一张图片旋转*/
     div:hover img:nth-child(1){
         transform: rotate(60deg);
     }
     div:hover img:nth-child(2){
         transform: rotate(120deg);
     }
     div:hover img:nth-child(3){
         transform: rotate(180deg);
     }
     div:hover img:nth-child(4){
         transform: rotate(240deg);
     }
     div:hover img:nth-child(5){
         transform: rotate(300deg);
     }
     div:hover img:nth-child(6){
         transform: rotate(360deg);
     }
    </style>
</head>
<body>
<div>

    <img src="img/6.jpg" alt=""/>
    <img src="img/5.jpg" alt=""/>
    <img src="img/4.jpg" alt=""/>
    <img src="img/3.jpg" alt=""/>
    <img src="img/2.jpg" alt=""/>
    <img src="img/1.jpg" alt=""/>
</div>
</body>
</html>

 

示例3（音乐盒子）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>音乐盒子</title>
	<style type="text/css">
	body{
		background: pink;
	}
	.box{
		width: 300px;
		height: 300px;
		margin:100px auto;
		position: relative;
	}
	.top,.bottom{
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 50%;
		transform-origin:bottom; /*设置旋转元素的基点位置*/
		transition: all 0.5s ease 0s;
	}
	.box:hover .top{
		transform:rotateX(180deg);
	}
	</style>
</head>
<body>
	<div class="box">
		
		<div class="bottom"><img src="img/musicb.jpg" alt=""></div>
		<div class="top"><img src="img/musict.jpg" alt=""></div>
	</div>
</body>
</html>

 

Bear
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 2D动画
m0_70877859的博客
08-17 575
设置left（定位，内边距，外边距等等）属性会频繁的造成浏览器回流重拍，而transform和opacity（半透明属性）属性不会，因为它是作为合成图层发送到GPU上，由显卡执行的渲染，这样做的优化如下。对角移动：右下角移动translate（tx,ty）,右上角移动translate（tx，-ty），左上角移动translate（-tx，-ty）和左下角移动translate（-tx，ty）这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变种触发，并圆滑的以动画效果改变css的属性值。...
CSS制作移动动画效果
w__qwwq的博客
09-09 6710
CSS制作移动动画效果
CSS2D动画效果
m0_46338330的博客
08-02 275
初略的介绍一下一些css相关的2D动画效果 （旋转:rotate,缩放:scale,倾斜:skew,移动:translate） 一.旋转 rotate 用法：transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。 二.缩放 scale 用法：transform: scale(0.5) transform: scale(0.5, 2); 参数表示缩放倍数； 一个参数时：表示水平和垂直同时缩放
一文搞懂css 2D动画效果
一个非常Cool的人
01-28 1670
讲述了css中的2d动画效果中的定位、旋转、缩放,以及过渡，合理的使用动画效果会极大地提高用户使用体验。
一文搞懂css 2D动画效果，怎么入门Python
2401_83621541的博客
03-31 430
前言今天要介绍的是2D动画效果,主要包括2D动画的定位、旋转、缩放。先来一波动画效果展示,后面会具体到每一个案例。进度条盒子旋转盒子放缩一、过渡动画效果简述 transition:1、代码示例过渡属性,过渡时间,过渡曲线,停止间隔（上述没有书写过渡函数,过渡函数不常使用）2、效果展示二、定位translate1、2D定位 transform: translate(50%, 50%);百分比是相对于盒子左上角为原点,向右向下移动了多少。
一文搞懂css 2D动画效果，真的已经讲烂了
2401_84181501的博客
04-08 912
固定盒子的方式有定位,浮动,外边距等以上方式盒子定位容易影响到其他盒子的位置2D盒子定位的盒子不会影响到其他盒子的位置,只会覆盖其他盒子–>背景盒子为浅蓝色,中间盒子为棕色,中间盒子大小为原来盒子的50%而棕色盒子向右下偏移的长度又为棕色盒子的50%2、2D定位 transform: translateY(-20px);【抬高】在x轴或y轴移动一定的像素，有个兄弟是translateY在这里就是进行了竖直方向的移动代码如下：三、2D旋转 transform: rotate(180deg);=========
一文搞懂css 2D动画效果，面试时手撕代码
2401_84247849的博客
04-11 774
不知道你们用的什么环境，我一般都是用的Python3.6环境和pycharm解释器，没有软件，或者没有资料，没人解答问题，都可以免费领取（包括今天的代码），过几天我还会做个视频教程出来，有需要也可以领取~给大家准备的学习资料包括但不限于：Python 环境、pycharm编辑器/永久激活/翻译插件python 零基础视频教程Python 界面开发实战教程Python 爬虫实战教程Python 数据分析实战教程python 游戏开发实战教程Python 电子书100本。
css2d炫酷效果,利用CSS3实现炫酷的飞机起飞动画
weixin_34204530的博客
08-04 321
先来看看效果图有点遗憾的是云朵不好画，用图片代替了实例源码复制代码代码如下:Plane*{margin:0;padding:0;}body{height: 700px;background: rgb(42, 121, 146);background: linear-gradient(to top right,rgba(209,228,234,1),rgb(42, 121, 146));overfl...
css实现2D/3D效果
weixin_46058007的博客
03-01 365
html+css实现2D和3D效果，旋转便签，人物介绍卡片，照片旋转正方体，代码可直接使用
CSS3的2D动画属性
super码力的博客
10-25 762
动画是css中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
好玩的css3动画效果
08-22
根据给定的信息，我们可以详细解析CSS3动画效果的相关知识点，主要围绕标题“好玩的css3动画效果”以及描述“只适合菜鸟”的内容展开。 ### CSS3 动画基础 CSS3 引入了一系列新的特性来增强网页的表现力，其中动画...
css3动画图标效果
10-31
CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了许多新的特性和功能，其中最引人注目的就是动画效果。在本主题“CSS3动画图标效果”中，我们将深入探讨如何利用CSS3来创建富有动态感的图标...
html+css 动画效果
04-11
本篇文章将深入探讨如何利用HTML和CSS创建各种动画效果，包括渐变、旋转、翻转以及显示和隐藏元素。 首先，让我们从渐变动画开始。在CSS中，我们可以使用`transition`属性来实现元素状态改变时的平滑过渡。例如，当...
CSS3实现3D文字动画效果
12-04
在本文中，我们将深入探讨如何使用CSS3来创建引人注目的3D文字动画效果。CSS3是现代网页设计中的一个重要工具，它提供了丰富的样式功能，包括2D和3D转换、过渡和动画，使我们可以制作出动态且交互性强的网页元素。 ...
2D动画效果演示
10-27
总结来说，2D动画效果是通过HTML5的`<canvas>`元素和CSS3的动画特性来实现的，包括平移动画、旋转动画等多种效果。这些技术让网页开发者能够创建出富有吸引力和互动性的用户界面，提升网站的用户体验。通过不断学习...
CSS 3D动画效果
bear_huangzhen的专栏
09-20 1042
示例1（两面翻转的图片）： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两面翻转的图片</title> <style> div { width: 2...
CSS文字效果
bear_huangzhen的专栏
09-16 1024
这里是一些文字效果总结。 示例1（竖版从右至左的古文顺序）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>竖版文言文</title> <style type="text/css"> #content{ ...
CSS特殊形状
bear_huangzhen的专栏
09-18 784
示例1（简单特殊图形）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>特殊形状</title> <style type="text/css"> div{ display: inline-block...
css和html做灰太狼2D动画
最新发布
06-11
CSS（层叠样式表）和HTML（超文本标记语言）结合可以用来创建简单的2D动画，但要制作复杂的灰太狼动画，特别是涉及到逐帧动画或交互式动画，可能需要使用更专业的工具如JavaScript、CSS3动画（包括关键帧动画@keyframes）以及可能的前端库（如GreenSock, Anime.js等）。 下面是简单的步骤概述： 1. **HTML基础**: - 使用HTML创建灰太狼角色的基本形状，比如圆形头部、身体、四肢等，并为每个元素添加唯一的ID或class，方便CSS操作。 ```html <div class="wolfgang head"></div> <div class="wolfgang body"></div> <div class="wolfgang leg left"></div> <div class="wolfgang leg right"></div> ``` 2. **CSS样式**: - 设置基本样式，包括颜色、尺寸等。 - 利用CSS3动画，例如改变transform属性（旋转、平移），或者使用关键帧动画来控制动画的开始和结束状态。 ```css .wolfgang { position: relative; } .head { /* 添加头部样式 */ } .body { /* 添加身体样式 */ } @keyframes run { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } } ``` 3. **JavaScript（可选）**: - 如果需要更复杂的交互或动画控制，JavaScript可以帮助你响应用户的输入或触发特定动画。 4. **布局和交互**: - 可能还需要考虑CSS布局，如absolute, relative, fixed等来调整动画元素的位置。 为了制作灰太狼的完整2D动画，你需要不断实验和调整代码，可能还需要学习一些基础的动画原理和实践技巧。如果你是初学者，建议从简单的动画开始，逐渐提升技能。 **相关问题**: 1. 如何在CSS中应用CSS3动画？ 2. JavaScript如何与CSS动画协作？ 3. CSS布局中有哪些不同的定位方式？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值