关键词：
实现效果：
点一变四
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*
margin: 0;
padding: 0;
#box
width: 180px;
height: 180px;
/*border: 1px solid red;*/
margin: 200px auto;
position: relative;
#box .small
width: 80px;
height: 80px;
position: absolute;
text-align: center;
line-height: 80px;
border-radius: 50%;
background-color: #ff25ec;
transform: scale(0);
/*小按钮的延时操作*/
transition: 0.3s 0.4s;
#box .menu
width: 100px;
height: 100px;
position: absolute;
top: 40px;
left: 40px;
text-align: center;
line-height: 100px;
border-radius: 50%;
background-color: #3b29ff;
/*给大按钮缩小加个过滤，让他执行慢点*/
transition: 0.3s;
/*写个大按钮隐藏的属性，在下面点击时加为大按钮的属性*/
#box .menu.hide
transform: scale(0);
/*为实现点击大按钮之后，小按钮从中间往外发散的效果*/
#box .i1left:50px;top: 50px;
#box .i2left:50px;bottom:50px;
#box .i3right:50px;top:50px;
#box .i4right:50px;bottom:50px;
/*发散的最终位置*/
#box.show .i1left:0;top: 0;
#box.show .i2left:0;bottom:0;
#box.show .i3right:0;top:0;
#box.show .i4right:0;bottom:0;
/*写个小按钮显示的属性，在下面点击大按钮之后加为小按钮的属性*/
#box.show .smalltransform: scale(1);
</style>
</head>
<body>
<div id="box">
<p class="menu">大按钮</p>
<p class="i1 small">1</p>
<p class="i2 small">2</p>
<p class="i3 small">3</p>
<p class="i4 small">4</p>
</div>
</body>
<script>
var oMenu = document.getElementsByClassName("menu")[0];
oBox = document.getElementById("box");
oMenu.onclick = function ()
this.classList.add("hide");
oBox.classList.add("show");
</script>
</html>
帧动画插件(代码片段)
...单的动画插件来巩固自己所学。动画插件的实现方式对于前端来说，主要实现动画的方式就是css(transition,animation)，js(setTimeout,setInterval,requestAnimationFrame)，canvas，svg等方式，在这里我主要是通过requestAnimationFrame来实现动画效果的... 查看详情
纯css做一个吃豆人动画(代码片段)
我们先来看看将要实现的效果： 可以单击这个链接打开查看效果和代码：https://codepen.io/sd237720488/pen/LMyNxJ 接下来我们来看看怎么实现的，首先它可以分为两个部分，“吃豆人”和“豆子”首先HTML部分长这样：<divcl... 查看详情
harmonyos-纯css实现吹灭蜡烛动画(代码片段)
...，吸引了不少的眼球，为了体验鸿蒙应用开发，决定动手实现一个案例——通过css动画实现吹灭蜡烛动画，看了一下鸿蒙应用开发文档，有js和ets两种开发方式，综合考量了一下，决定采用js方式实现。效果展示实现思路通过变... 查看详情
前端每日实战：127#视频演示如何用纯css创作一个圆环旋转错觉动画(代码片段)
...dge打开观看。https://scrimba.com/p/pEgDAM/cbvPWHM源代码下载每日前端实战系列的全部源代码请从github下 查看详情
纯前端实现—鼠标轮播图(代码片段)
实现效果：前面有篇文讲解过手动轮播图——https://gu-han-zhe.blog.csdn.net/article/details/121314887，还得鼠标点，有点麻烦，所以这篇给B格提升些！实现鼠标轮播图！鼠标轮播图1源码：<!DOCTYPEhtml><htmllan... 查看详情
纯css实现元素融合效果(代码片段)
...，今天我们来做一个有意思的动画效果，通过css3实现元素融合效果，下面一起看看吧。实现效果完整源码<template><divclass="parentBox"><divclass="contantBox"></div></div></template><styl... 查看详情
纯css实现那些超炫酷的动画效果(代码片段)
...其实大家看到的动画其实很大一部分都是通过js或者插件实现的，但你知道吗，我们所熟知的css就可以制作炫酷的动画效果，嗯？css?是的，你没有听错，就是css，下面分享的几款动画效果就是用css实现... 查看详情
前端每日实战：160#视频演示如何用纯css创作一个打开内容弹窗的交互动画(代码片段)
...dge打开观看。https://scrimba.com/p/pEgDAM/cNzVnAL源代码下载每日前端实战系列的全部源代码请从github下载 查看详情
前端每日实战：102#视频演示如何用纯css创作一个小和尚(代码片段)
...dge打开观看。https://scrimba.com/p/pEgDAM/cydezCM源代码下载每日前端实战系列的全部源代码请从github下载 查看详情
纯前端实现—“王者荣耀开局十秒倒计时效果”(代码片段)
实现效果：源码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>ptext-align:center;font-size 查看详情
css实现炫酷文本过渡动画(代码片段)
...觉挺复杂呢，通常这个过渡效果通过较为复杂的可用WebGl实现，本文通过另一种方式实现，文章尾部有神奇的代码，快来瞧瞧看吧～代码实现文字不断的在切换，确定的是有一个包含纯文字的数组，在此我们定义如下的html代码，... 查看详情
javascript实现简单的图片处理(代码片段)
目录图片在前端的存储形式前端上传图片图片处理灰度操作负片效果压缩膨胀马赛克字符画参考资料图片在前端的存储形式图片以Uint8ClampedArray的格式存储.这是一个一维数组,每四位组成一个像素点,分别代表rgba四个参数,每个参... 查看详情
纯css实现波纹效果(代码片段)
...，今天我们来做一个有意思的动画效果，通过css3实现波纹效果，下面一起看看吧。实现效果完整源码<template><divclass="parentBox"><divclass="contantBox">点击进入直播间</div></div></templ... 查看详情
纯css实现波纹效果(代码片段)
...，今天我们来做一个有意思的动画效果，通过css3实现波纹效果，下面一起看看吧。实现效果完整源码<template><divclass="parentBox"><divclass="contantBox">点击进入直播间</div></div></templ... 查看详情
从打字机效果的n种实现看js定时器机制和前端动画(代码片段)
首先，什么是打字机效果呢？打字机效果即为文字逐个输出，实际上就是一种Web动画。一图胜千言，诸君请看： 在Web应用中，实现动画效果的方法比较多，JavaScript中可以通过定时器setTimeout来实现，css3可以使用transition... 查看详情
纯css3动画按钮效果5种漂亮样式
...己喜欢的颜色样式。在线演示源码下载让我们一起来看看实现这5中样式动画按钮的HTML代码和CSS代码吧。以第一个按钮为例，其他按钮的代码大家可以下载源代码来研究，并不是很难。HTML代码：&l 查看详情
如何用纯css创作一个变色旋转动画(代码片段)
...看。https://scrimba.com/p/pEgDAM/cawq6cB源代码下载本地下载每日前端实战系列的全部源代码请从 查看详情
github精选使用纯css实现动画加载效果
...习、实用与各种有趣的内容。本期推荐的是一个使用纯CSS实现动画加载效果的项目——SpinKit。SpinKit通过使用transform和opacity属性实现了包括方块翻转、圆点旋转、圆环缩放和九宫格渐变等10余种动画加载的效果。部分效果代码：... 查看详情