css实现简单的抽奖动画效果和旋转效果,还有春联效果

使用css的animation和transform和transition可以实现简单的图片放大缩小,旋转,位移的效果,由此可以延伸的动画效果还是挺多的,比如图片慢慢放大,图片慢慢旋转并放大,图片慢慢变化位置等等,

抽奖动画效果图

实现的原理也很简单,就是通过使用动画animation和关键动画帧来实现的,可以使用缩放来进行平滑的过渡效果,下面是源码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div class="center"><div>抽奖效果</div><imgsrc="https://img-blog.csdnimg.cn/67fc9799ae8e48749e82cf70b179895b.png"class="card"/></div><style>.center {width: 500px;margin: 0 auto;text-align: center;}.card {width: 260px;height: 400px;animation: showImg 3s linear 1;}@keyframes showImg {0% {transform: scale(0.1) rotate(0);}50% {transform: scale(0.5) rotate(360deg);}100% {transform: scale(1) rotate(720deg);}}</style></body>
</html>

图片旋转360度并放大

图片由小变大,并以y轴为中心旋转360度后展示:

源代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div class="wrap"><div>抽奖效果</div><div class="box"><imgsrc="https://img-blog.csdnimg.cn/67fc9799ae8e48749e82cf70b179895b.png"class="img"/></div></div><style>* {padding: 0;margin: 0;/* height: 100%; */width: 100%;}.wrap {margin: 0 auto;padding-top: 100px;text-align: center;}.box {width: 300px;height: 400px;margin: 0 auto;}.img {width: 220px;height: 300px;transform: rotatey(0deg) scale(0.1);/* transform-origin: center; */transition: all 3s;}.wrap:hover .img {/* transform: scale(1); */transform: rotatey(360deg) scale(1);-webkit-transform: rotatey(360deg) scale(1);-o-transform: rotatey(360deg) scale(1);-moz-transform: rotatey(360deg) scale(1);-ms-transform: rotatey(360deg) scale(1);}</style></body>
</html>

 

图片慢慢旋转动画

图片慢慢旋转是通过rotate来实现的,并且鼠标放上去之后,会有暂停的效果:下面的动图有卡顿的效果,实际情况非常丝滑

旋转图片的源代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div class="wrap"><div class="source"></div><div class="avatar"></div></div></body><style>body {background-color: black;padding-top: 100px;}.wrap {margin: 0 auto;display: flex;flex-direction: row;justify-content: center;align-items: center;}.source {width: 100px;height: 100px;margin-right: 20px;background-image: url('./assets/ball.png');background-position: center;background-size: 100% 100%;animation: circle 1s linear infinite;}.avatar {width: 100px;height: 100px;border-radius: 50%;background-image: url('https://profile-avatar.csdnimg.cn/f6acd04828d84240afc2739fe039fd49_weixin_44786530.jpg!1');background-position: center;background-size: 100% 100%;animation: circle 2s linear infinite;}.source:hover {animation-play-state: paused;}.avatar:hover {animation-play-state: paused;}@keyframes circle {0% {transform: rotate(0deg);}10% {transform: rotate(36deg);}20% {transform: rotate(72deg);}30% {transform: rotate(108deg);}40% {transform: rotate(144deg);}50% {transform: rotate(180deg);}60% {transform: rotate(216deg);}70% {transform: rotate(252deg);}80% {transform: rotate(288deg);}90% {transform: rotate(324deg);}100% {transform: rotate(360deg);}}</style>
</html>

春联效果

春节快要到了,所以春联也整起来吧,使用了变换中的旋转,还有变化中心位置的修改,效果图如下:

源代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div class="wrap"><div class="card"><div class="text">春</div></div><div class="two"><div class="text">到</div></div><div class="three"><div class="text">万</div></div><div class="for"><div class="text">家</div></div></div><style>* {padding: 0;margin: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;background-color: skyblue;}.wrap {width: 100px;/* margin-top: 200px; */margin: 100px auto;}.card {width: 100px;height: 100px;background-color: red;transform: rotate(45deg);transform-origin: left top;animation: shark 3s infinite ease-in-out -6s;}.two {width: 100px;height: 100px;margin-top: 45px;background-color: red;transform: rotate(45deg);transform-origin: left top;animation: shark 2s infinite ease-in-out -5s;}.three {width: 100px;height: 100px;margin-top: 45px;background-color: red;transform: rotate(45deg);transform-origin: left top;animation: shark 3s infinite ease-in-out -4s;}.for {width: 100px;height: 100px;margin-top: 45px;background-color: red;transform: rotate(45deg);transform-origin: left top;animation: shark 2s infinite ease-in-out -3s;}.text {font-size: 50px;color: white;transform: rotate(-45deg) translate(10px, 10px);}@keyframes shark {0% {transform: rotate(30deg);}50% {transform: rotate(60deg);}100% {transform: rotate(30deg);}}</style></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/192590.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

重新认识Word——样式

重新认识Word Word样式给所有一级标题加上一级标题样式修改标题一样式&#xff0c;符合要求 正文样式标题前的小黑点导航窗格样式的相互复制Word一键转PPT 话说回来&#xff0c;一个程序员平时可能还看不起office全家桶的软件&#xff0c;但是&#xff0c;在实际的生活运用中&a…

苍穹外卖面试题-下

17. 项目参与人员角色 项目经理&#xff08;1人&#xff09;&#xff1a;对整个项目负责&#xff0c;任务分配、把控进度 产品经理&#xff08;1人&#xff09;&#xff1a;进行需求调研&#xff0c;输出需求调研文档、产品原型等 UI设计师&#xff08;1人&#xff09;&#…

电商产品经理常用的ChatGPT通用提示词模板

电商产品规划和策略&#xff1a;请帮助我规划和制定电商产品的策略和计划&#xff0c;包括市场调研、用户需求分析、产品定位、竞争对手分析等方面的内容&#xff0c;以便我能够更好地把握市场机会并制定相应的发展策略。 电商产品设计和开发&#xff1a;请帮助我进行电商产品…

Canvas和SVG有什么区别?a元素除了用于导航外,还有什么作用?如何在页面上实现一个圆形的可点击区域?

Canvas和SVG有什么区别? svg 绘制出来的每一个图形的元素都是独立的 DOM 节点&#xff0c; 能够方便的绑定事件或用来修改。 canvas输出的是一整幅画布。 svg 输出的图形是矢量图形&#xff0c;后期可以修改参数来自由放大缩小&#xff0c;不会失真和锯齿 。而canvas 输出标量…

springboot 整合 RocketMQ 可用于物联网,电商高并发场景下削峰,保证系统的高可用

本文根据阿里云 RocketMQ产品文档整理&#xff0c;地址:https://help.aliyun.com/document_detail/29532.html?userCodeqtldtin2 RocketMQ是由阿里捐赠给Apache的一款低延迟、高并发、高可用、高可靠的分布式消息中间件。经历了淘宝双十一的洗礼。RocketMQ既可为分布式应用系统…

内部培训平台的系统 PlayEdu搭建私有化内部培训平台

PlayEdu是由白书科技团队多年经营的线上教育系统&#xff0c;专为企业提供的全新企业培训方案 我们的目标是为更多的企业机构搭建私有化内部培训平台&#xff0c;以满足不断增长的培训需求 通过PlayEdu&#xff0c;企业可以有效地组织和管理培训资源&#xff0c;提供高质量的…

PriorityQueue类

PriorityQueue类 Java中的PriorityQueue是一个基于优先级堆的无界优先级队列。它是一个队列&#xff0c;可以按照元素的优先级顺序对元素进行排序&#xff0c;并且允许快速访问具有最高优先级的元素。它实现了Queue接口&#xff0c;继承了AbstractQueue类。 主要函数和方法&a…

AIGC: 关于ChatGPT中基于API实现一个客户端Client

Java版的GPT的Client 可作为其他编程语言的参考注意: 下面包名中的 xxx 可以换成自己的 1 &#xff09;核心代码结构设计 src main java com.xxx.gpt.client entity ChatCompletion.javaChatCompletionResponse.javaChatChoice.java… util Proxys.java… ChatApi.javaChatG…

C++的lambda语法

仿函数的最大缺点是&#xff1a; 如果命名不合规范并且没有给出注释&#xff0c;直接阅读难以理解&#xff08;排序的调用过程中&#xff0c;不查看仿函数细节&#xff0c;则很难直接得知是升序排序还是降序排序&#xff09;每次实现仿函数都需自己构建一个类 因此C从其他语言…

分类详情 API 返回值说明

为了进行此平台API的调用&#xff0c;首先我们需要做下面几件事情。 1、 获取一个KEY&#xff0c;点击获取测试key和secret 2、 参考API文档里的接入方式和示例。 3、查看测试工具是否有需要的接口&#xff0c;响应实例的返回字段是否符合参数要求。 4、利用平台的文档中心…

[前 5 名] 最顶级的数据恢复软件解决方案列表

您是否在互联网上找到适用于 Windows PC 的前 5 名最受好评的数据恢复软件解决方案&#xff1f;嗯&#xff0c;在线市场上有很多工具可以恢复已删除的文件。但并不是所有的应用程序都值得使用它。值得信赖的文件恢复工具将有助于快速检索丢失、删除、格式化的数据并从计算机恢复…

JVM之基本概念(一)

(1) 基本概念&#xff1a; JVM 是可运行 Java 代码的假想计算机 &#xff0c;包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收&#xff0c;堆 和 一个存储方法域。JVM 是运行在操作系统之上的&#xff0c;它与硬件没有直接的交互。 (2) 运行过程&#xff1a; 我们都…

[传智杯 #4 决赛] 小智的疑惑

题目描述 传智专修学院给了小智一个仅包含小写字母的字符串 s&#xff0c;他想知道&#xff0c;里面出现了多少次子串 chuanzhi 呢。 我们称一个字符串 t 是 s 的子串&#xff0c;当且仅当将 s 的开头若干个&#xff08;可以为 0 个&#xff09;连续字符和结尾若干个&#xf…

讲一下mysql的锁

MySQL 中的锁机制是数据库管理系统用于控制并发访问的重要组成部分。锁是一种资源访问的机制&#xff0c;通过它可以确保在同一时间只有一个事务能够对资源进行操作&#xff0c;从而维护数据的一致性和完整性。在 MySQL 中&#xff0c;锁主要分为共享锁&#xff08;Shared Lock…

听GPT 讲Rust源代码--src/tools(7)

File: rust/src/tools/rust-analyzer/crates/ide/src/inlay_hints/chaining.rs 在Rust源代码中&#xff0c;rust-analyzer/crates/ide/src/inlay_hints/chaining.rs这个文件的作用是生成Rust代码中的链式调用提示。 具体来说&#xff0c;当我们使用链式调用时&#xff0c;例如A…

Python练习题(三)

&#x1f4d1;前言 本文主要是【Python】——Python练习题的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一句&am…

51单片机PWM讲解

前言 51单片机我已经很久没用过了&#xff0c;毕竟是十年前的产物了&#xff0c;但是由于工作室的学弟学妹需要学习&#xff0c;加之马上就要举行循迹小车比赛&#xff0c;很多人反映看不懂PWM&#xff0c;或者看了不会用&#xff0c;于是写一篇文章简单介绍一下。 PWM普遍应…

Kubernetes学习笔记-Part.08 安装k8s环境

目录 Part.01 Kubernets与docker Part.02 Docker版本 Part.03 Kubernetes原理 Part.04 资源规划 Part.05 基础环境准备 Part.06 Docker安装 Part.07 Harbor搭建 Part.08 K8s环境安装 Part.09 K8s集群构建 Part.10 容器回退 第八章 K8s环境安装 8.1.准备安装文件 在外网服务器…

IDEA如何配置Git 遇到问题的解决

新建项目 点击 会变红 会生成.git隐藏文件 配置远程仓库路径&#xff1a;点击Manage Remotes&#xff1a;将远程仓库的链接放到这里&#xff1a; 得到如下样式&#xff1a; 此时提交到本地仓库 点击add&#xff0c;添加到暂存文件&#xff1a; 此时文件变绿&#xf…

【Ratis】Grpc.proto文件里定义的一些RPC

一、 总览 Raft的提供了三种类型的RPC。分别如下&#xff1a; RaftClientProtocolService&#xff1a;client与server之间的交互RPC&#xff0c;分为ordered和unordered&#xff0c;一种是有序的异步请求流、一种是无序的异步请求流。RaftServerProtocolService&#xff1a;r…