JS中animation和background练习

最新推荐文章于 2024-06-05 10:20:14 发布
最新推荐文章于 2024-06-05 10:20:14 发布
阅读量555 收藏
点赞数
分类专栏： JavaScript 小练习 文章标签： JS中animation JS中background练习 animation background
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hohocj/article/details/102764015
版权

效果图

                                              

会自动移动，当鼠标停在眼睛上时会停止

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>瞅啥呢，说你呢</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#boss{
				width: 200px;
				height: 200px;
				position: relative;
				left: 150px;
				top: 150px;
				transform-style: preserve-3d;
				perspective: 1000px;  
			}
			/* 亮白眼球 */
			#box{
				position: absolute;
				height: 200px;
				width: 200px;
				border-radius: 50%;
				background:-webkit-radial-gradient(100px 100px ,circle,rgba(255,255,255,0.5),rgba(239,239,239,1));
			}
			#box:before{
				content:"";
				position: absolute;
				width: 100%;
				height: 90%;
				border-radius: 50%;
				background: -webkit-radial-gradient(50% 0px ,circle ,#fff,rgba(255,255,255,0.6),rgba(255,255,255,0.8)58%);
			}
		    /* 眼珠子 */
			 #boss #center{
				position: absolute;
				height: 66px;
				width: 66px;
				left: 50%;
				margin-left: -25px;
				top:50%;
				margin-top:-15px;
				border-radius: 50%;
				background:-webkit-radial-gradient(35px 35px,circle,#000000,rgba(8,8,8,1)22%,rgba(1,217,251,1)26%);
				animation: kiki 2s linear infinite;
			}
			/* 眼珠子的旁白 */
			#center:before{
				content: "";
				position: absolute;
				width: 28%;
				height: 28%;
				border-radius: 50%;
				left: 16px;
				top: 19px;
				background: -webkit-radial-gradient(20px 20px,circle,rgba(255, 255, 255, 0.68),rgba(236, 236, 236, 0.24));
			}
			/* 底部阴影 */
			#bot{
				position: absolute;
				height: 150px;
				width: 150px;
				border-radius: 50%;
				background:-webkit-radial-gradient(50% 0px,circle,rgba(158,158,158,0.01),rgba(158,158,158,0.11));
				left: 50%;
				margin-left: -75px;
				transform: rotateX(90deg) translateZ(-130px);
			}
			#boss #center:hover{
				animation-play-state: paused;
			}
			/* 动起来,gogogo!! */
			@-webkit-keyframes kiki{
				0%{transform: translateX(20px) translateY(-40px);}
				50%{transform:translateX(-30px) translateY(25px);}
				75%{transform: translateX(-40px) translateY(10px);}
				100%{transform: translateX(20px) translateY(-40px);}
			}
			p{
				position: absolute;
				left: 400px;
				top: 400px;
			}
		</style>
	</head>
	<body>
		<div id="boss">
			<div id="box"></div>
			<div id="center"></div>
			<div id="bot"></div>
		</div>
	</body>
</html>

坚持每周更新，向全栈大佬进发

这是我的公众号，喜欢的朋友可以关注一下，每周更新，篇篇干货

                                                         

 

hohocj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10-animation
冰霜的博客
08-31 421
动画 ​ 由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作 -过渡和动画之间的异同 1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以
HTML与css和js综合练习
weixin_46331127的博客
06-09 475
HTML+JS+CSS综合练习一、 滑动样式二、滑动样式 给大家带来一波干货！！ 希望对大家有用 一、 滑动样式 login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> <link rel="stylesheet" href="default.css"> </he
js_animation
07-11 850
键盘事件//1.onkeydown 键盘事件 按下去一直有 document.onkeydown = function(ev){//ev 形参（名字随意）， //它代表的是本次事件的对象，它里面包含一些这次事件的一些信息 console.log(ev); } //2.onkeypress 能识别大写,不能识别 ctrl alt shift 上 下 左 右 等特殊按键 //3.on...
分享12个强大的 JavaScript 动画库，让你的项目更炫酷
最新发布
前端达人
06-05 824
动画效果，可以快速吸引访客注意力。通过创造性的对象运动和流畅的页面过渡，您不仅可以为您的网站增添独特的美感，还可以增强用户参与度并创造令人难忘的第一印象。在今天这篇文章中，我们跟你分享12个强大的 JavaScript 库，从而让创建动画变得简单。像滚动动画、手写动画、SPA页面过渡、打字动画、彩色动画、SVG动画……它们功能无穷。01、Anime.js地址：https://animejs.co...
background_animation:背景动画
03-22
十 一个新的Flutter应用程序。 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
JS学习（11）----animation
晨识草的博客
07-23 1664
1.在js中修改css样式事件可以在三种情况下发生，分别是： （1）在页面加载的时候 （2）在input区内容改变的时候 （3）点击 下面的栗子是（1）和（3）的结合，注意表达式中添加了style，另外需要注意的是在css中属性名称采用的格式是-（横杆），但是在js中使用的是骆驼式命名法。 index.html<!DOCTYPE html> <html lang="en"> <head>
animation.js
05-16
这个是轮播必要使用的动画函数，将动画函数封装有助于节省代码，而且可以快速的开发项目，完成项目的动画需求
CSSAnimation
04-09
**CSS Animation** CSS动画是网页设计中不可或缺的一部分，它为...为了更深入地学习和实践CSS动画，可以查阅CSSAnimation-main压缩包内的资源，它可能包含了具体的代码示例和练习，帮助你更好地理解和应用这些概念。
使用 animation实现几个小案列
qq_44820039的博客
04-27 312
学习了animation发现它真的好玩，以前写动画必须要JS才能完成，JS复杂性高，需要对DOM频繁操作会导致页面重绘重新排版，造成阻塞。虽然这里说了JS的缺点但是它也有它的优点，今天不作细讲（请看下回分解）。 今天主要用animation来实现几个小动画。 一、安卓手机充电效果 这个图都不陌生吧，今天将用代码来实现它！ 首先写这个需要那些元素： 最外层div ：g-container 装充电...
Lesson7-Animation
03-28
在本课程“Lesson7-...在“Lesson7-Animation-main”文件中，可能包含了实现各种CSS动画效果的示例代码和练习，通过实践和学习，你将更深入地理解并掌握这一强大的设计工具。记住，不断尝试和创新是提升技能的关键。
仿小米商城wed练习HTML+css
05-15
在本项目中，"仿小米商城web练习HTML+css"是一个学习Web开发的实践案例，主要涉及HTML和CSS这两种前端核心技术。这个项目旨在帮助初学者理解网页布局、元素设计以及如何构建一个类似小米商城的电商网站界面。接下来...
animation.html
04-08
自己制作的PC端轮播图，带有缓动动画（可直接使用）在复制的目录上添加名称为my.png的图片文件即可，也可以自己修改对应图片的src路径。优势：1.设置了节流阀，防止多次点击滚动；2.使用svg绘画左右箭头
js动画animation的属性及效果
JYB2106056288的博客
12-11 4298
彻底弄懂animation属性效果 一般来说给一个元素加上animation,加在他的css上就好， 常用的动画属性有： animation-name:test 动画名称，唯一标识，与@keyframes相对接，必选属性； animation-duration:5s 动画的单次生效时间,不包含animation-delay在内，必选 示例： animation-interation-count:2, animation-delay:5s, animation-duration:10s anima
css3中的animation属性、background、overflow属性
bald_proMonkey的博客
11-12 994
animation属性 animation属性是一个简写属性，用于设置六个动画: animation-name:规定需要绑定到选择器的keyframe名称 animation-duration:规定完成动画所花费的时间，以秒或毫秒计 animation-timing-function:规定动画的速度曲线 animation-delay:规定在动画开始之前的延迟 animation-iteratio...
css background各种属性练习
b150461的博客
10-25 314
文中素材出自尚硅谷李立超讲师，看完视频后自己实验记录下。偷懒没有仔细整理，其实用了好几个知识点一块写的。留存，同时感谢尚硅谷的分享！ <!--background属性应用 overflow属性 浮动 position属性--> <!doctype html> <html> <head> <title></title> ...
JavaScript动画库：Anime.js
weixin_41897680的博客
08-07 6983
JavaScript动画库：Anime.js
原生JS实现动画的方法
热门推荐
张致豪
04-15 1万+
有3种方法 setTimeout、setInterval、requestAnimationFrame 前两种方法的缺陷是需要自己设置动画帧的刷新时间。时间太短，浏览器来不及处理，时间太长，动画又不流畅。requestAnimationFrame方法是h5提供的一种专门解决动画更新的API，浏览器会自动以最合适的频率去刷新动画。 下面用3种方法分别实现进度条动画效果 //html和css...
【Anime.js】——用Anime.js实现动画效果
qq_50497708的博客
12-16 2080
第二个动画不是等到第一个动画结束才开始，是在整个时间轴执行30ms之后开始的，设置Number类型的时间偏移量。现在看到的效果就是，它运动完一个点，跑到下一个点的时候就停止了，我们如何让他一直是动态的呢？是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。实现自动选点，对该点进行先缩小后放大如何回到比其他点大一点的状态，并以该点从外向内放大。这两个点不是同时执行的，要让他们有一个交错的效果，给第二个动画设置delay。（1）先实现红色小圆点的动画效果。
【Anime.js】——JavaScript动画库：Anime.js——学习笔记
qq_50497708的博客
12-14 1万+
官网定义：anime.js 是一个简便的JS动画库，用法简单而且适用范围广，涵盖CSS，DOM，SVG还有JS的对象，各种带数值属性的东西都可以动起来。
关于Unity 中Animator 和Animation 区别
05-24
在Unity中，Animator和Animation都是用于控制动画的组件，但它们有一些区别。 1. Animator是一个状态机，可以根据不同的状态来控制动画的播放，可以设置过渡条件和动画参数，具有更灵活的控制能力。而Animation是一个简单的时间线，只能按照预设的顺序播放动画，无法根据不同的状态进行切换。 2. Animator可以控制多个骨骼动画，而Animation只能控制单个对象的动画。 3. Animator可以实时修改动画参数，实现更精细的控制，而Animation只能在编辑器中预设好动画。 4. Animator通常用于角色动画的控制，而Animation适用于独立的对象或简单的UI动画。 总的来说，Animator具有更强大的控制能力和更高的灵活性，而Animation则更适用于简单的动画控制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值