【每日一练】134—一个好玩有趣的CSS 动画效果

最新推荐文章于 2023-03-16 20:18:11 发布
最新推荐文章于 2023-03-16 20:18:11 发布
阅读量241 收藏
点赞数
文章标签： css css3 html 前端 javascript
原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649135430&idx=2&sn=0ebf67598b55b981aba656b89cf6d7cf&chksm=be58beeb892f37fd548e414e592b8d18b4414494710a4f1c4d3bccad17598d9db543e2fdae0b&scene=126&sessionid=0
版权

b5158e26eeca818bc58a3f99edc9a54b.png

今天这个练习是一个用纯CSS实现的动画效果，非常有趣，大家可以看一下它的最终效果：

f904d9b062e706b8478ae7de3a5b6037.gif

HTML代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>【每日一练】134—一个好玩有趣的CSS动画效果</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box">
      <span style="--i:0;"><i></i></span>
      <span style="--i:1;"><i></i></span>
      <span style="--i:2;"><i></i></span>
      <span style="--i:3;"><i></i></span>
      <span style="--i:4;"><i></i></span>
      <span style="--i:5;"><i></i></span>
      <span style="--i:6;"><i></i></span>
      <span style="--i:7;"><i></i></span>
      <span style="--i:8;"><i></i></span>
      <span style="--i:9;"><i></i></span>
      <span style="--i:10;"><i></i></span>
      <span style="--i:11;"><i></i></span>
      <span style="--i:12;"><i></i></span>
      <span style="--i:13;"><i></i></span>
      <span style="--i:14;"><i></i></span>
      <span style="--i:15;"><i></i></span>
    </div>
  </body>
</html>

CSS代码：

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body 
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
}
.box 
{
  position: relative;
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
}
.box span 
{
  position: absolute;
  width: 10px;
  height: 250px;
  border-bottom: 40px solid transparent;
  transform-origin: bottom;
  transform: rotate(calc(22.5deg * var(--i))) translateX(0px);
}
.box span::before 
{
  content: '';
  position: absolute;
  width: 100%;
  height: 50px;
  background: #03a9f4;
  box-shadow: 0 0 20px #03a9f4;
  border-radius: 10px;
  transform: translateY(160px);
  animation: animate 1.5s linear infinite;
  animation-delay: calc(0.1s * var(--i));
}
@keyframes animate 
{
  0% 
  {
    transform: translateY(160px) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  50%
  {
    transform: translateY(0px);
  }
  100%
  {
    transform: translateY(160px) rotate(360deg);
    filter: hue-rotate(360deg);
  }
}
.box span::after 
{
  content: '';
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 17px;
  background: #03a9f4;
  transform-origin: bottom;
  transform: rotate(102deg);
  animation: animateColor 1.5s linear infinite;
}
.box span i 
{
  position: absolute;
  width: 15px;
  height: 100px;
  transform-origin: top;
  transform: rotate(79deg);
  animation: animateSide 1.5s linear infinite,animateColor 1.5s linear infinite;
  animation-delay: calc(0.1s * var(--i));
  border-left: 2px solid #03a9f4;
  border-right: 2px solid #03a9f4;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes animateSide 
{
  0%,25%,50.1%,100%
  {
    background: transparent;
  }
  25.1%,50%
  {
    background: #03a9f4;
  }
}
@keyframes animateSide 
{
  0%,40%,65.1%,100%
  {
    background: #333;
  }
  40.1%,65%
  {
    background: #03a9f4;
  }
}
@keyframes animateColor
{
  0%
  {
    filter: hue-rotate(0deg);
  }
  100%
  {
    filter: hue-rotate(360deg);
  }
}

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

推荐阅读

【每日一练】01~100练大合集汇总

学习更多技能

请点击下方公众号

fcd6aea2595442b932113b2a8c0d13c1.gif

55ca1b5dd921d9ea4008c7398a1c6ed9.jpeg

a93332531084b4c5f2b556a24d15206c.png

web前端开发V
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5+CSS3练习小实例：发光果冻泡泡动画
qq_46031523的博客
08-12 425
HTML5+CSS3练习实例：发光果冻泡泡动画
发现两个有趣的CSS3动画效果
09-25
在这个例子中，设计师构建了一个包含天空、地面和云朵的场景，通过CSS3的`@keyframes`规则来定义动画帧，使得云朵在背景中缓缓移动，营造出动态的视觉效果。这个动画效果不仅展示了CSS3动画的流畅性，还利用了`...
CSS --- 动画练习
weixin_58470558的博客
03-16 215
练习CSS的动画效果
练手基础的css小动画汇总
weixin_46249441的博客
12-15 509
1. 3D书本翻页动画 完整代码点击链接：css3D书本翻页动画 2. 3D动画卡片翻转 完整代码点击链接：3D动画翻转 - 鱿鱼游戏卡片制作 3.颜色渐变小动画 完整代码点击链接：css颜色渐变小动画 4.加载旋转动画 完整代码点击链接：css加载旋转小动画 5. 条形加载动画 完整代码点击链接：css条形加载动画 6.用box-shadow属性写加载动画 完整代码点击链接：box-shadow加载动画 7....
简单的 HTML + CSS Loading 效果
broken_promise的博客
05-23 981
简单的 HTML + CSS Loading 效果 先看结果 HTML <body> <div class="loading"> <span style="--i: 0;"></span> <span style="--i: 1;"></span> <span style="--i: 2;"></span> <span style="--i: 3;"></s
24个适合初学者练习的CSS 和 Javascript 动画效果案例
web前端开发
10-15 5227
英文 | https://niemvuilaptrinh.medium.com/24-css-javascript-animation-effects-a4c5b6e98a59翻译 | 杨...
微信小程序--几个有趣的css3动画
03-29
拿第一个双块舞动画研究一下好啦。 mxml:     class="sk-wandering-cubes"> class="sk-cube sk-cube1"> class="sk-cube sk-cube2">   css:   .sk-wandering-cubes .sk-cube { background-color: #67cf22; ...
3D效果CSS柱状图动画特效
06-24
"3D效果CSS柱状图动画特效"是一个全屏个性化的设计，能够吸引用户的注意力，为数据展示带来生动有趣的视觉体验。 首先，CSS3的3D效果主要通过transform属性来实现，其中transform中的rotateX()、rotateY()和rotateZ...
一个复杂的懒人原生css3动画效果
06-12
前几天正好看到手机APP上有这样一个闹钟提醒的动画效果很不错 就试着用css3模拟出来 看似比较难，只要耐心分析，将七八个动画叠加起来后就可以看到复杂的效果 使用方法： 1、将head中的css样式拷贝...
[css]利用css动画制作心跳
weixin_42582523的博客
12-06 276
html: <main> <div class="heart"></div> </main> css: *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100vw; height: 50vh; ...
【每日一练】30—用 HTML + CSS 实现仿WhatsApp 的聊天界面效果
web前端开发
07-19 847
上周到湖南长沙待了一周，在行走的过程中，发现目前最重要就是你的码一定要是绿码，如果是黄码，哪里都去不了，为啥说这个事情呢，因为我自己有2台手机，一台安卓小米，一台苹果，发现我到了长沙以后，核酸还是72小时内的，小米机就直接变黄码了。然后，我赶紧打开苹果手机看一下，真心感谢，还是绿码。在这个过程中我就很好奇，一个人居然可以同时又黄又绿，我也真是服了，这个两个账户都是我自己实...
关于对CSS动画的练习
谦谦的博客
08-20 270
今天我们使用css3 animation 做一个3D立方图。 CSS样式结构： <title>魔方</title> <link rel="icon" href="./img/logo_32.ico"> <!-- 引入网页标题的图标 --> <style> /* 设置的目前网页背景颜色 */ html{ background-color: black;
html-css10 过渡/米兔练习/动画/动画练习/小球动画/平移和小米移动图
Kerryliuyue的博客
09-15 488
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
CSS3动画属性练习-小熊跑跑
angry_rooster的博客
06-06 722
小熊跑跑 通过CSS的动画属性"animation"和at-rule关键帧@keyframe实现一个小熊在雪山奔跑的效果 图片素材见文末 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
css动画效果练习-steps
qq_36939013的博客
08-26 207
打字机效果
CSS动画的练习案列
weixin_46421045的博客
03-14 385
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;height: 0;} .con1{width: 116px;height:19...
css动画练习
weixin_30781107的博客
05-13 119
HTML部分 <body><div></div></body> CSS部分 div{width:200px;height:130px;background-color:red;padding:20px;text-align:center;font-size:18px;/*设置动画及播放时间*/animation:myfirst ...
css3 html5 3D动画练习
小甜甜专栏
01-10 1858
New Document div{ margin-bottom:10px; width:200px; height:100px; } @keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background:
简单css3动画效果练习
伪伪的喵喵。。
03-03 1849
简单css3动画效果练习知识点 简单伪元素的使用 布局练习 动画效果练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="../reset.css"> <!-- <link
css画一个圆动画效果
最新发布
06-07
要画一个 CSS 圆动画效果，可以使用以下步骤： 1. 创建一个 div 元素，并设置它的宽度和高度相等，并设置为圆形。 ```css .circle { width: 100px; height: 100px; border-radius: 50%; } ``` 2. 设置元素的边框宽度和颜色，以及 border-style 为 dashed 或 solid，这些属性将在动画中被改变。 ```css .circle { width: 100px; height: 100px; border-radius: 50%; border: 10px dashed #ccc; /* 或者 border: 10px solid #ccc; */ } ``` 3. 创建一个 keyframes 动画，并在其中改变边框的宽度和颜色，以及元素的旋转角度。 ```css @keyframes circle-animation { 0% { border-width: 10px; border-color: #ccc; transform: rotate(0deg); } 50% { border-width: 20px; border-color: #f00; transform: rotate(180deg); } 100% { border-width: 10px; border-color: #ccc; transform: rotate(360deg); } } ``` 4. 将动画应用到元素上，并设置动画的持续时间、重复次数等属性。 ```css .circle { width: 100px; height: 100px; border-radius: 50%; border: 10px dashed #ccc; /* 或者 border: 10px solid #ccc; */ animation-name: circle-animation; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } ``` 这样就可以创建一个 CSS 圆动画效果了。可以根据需要调整动画的持续时间、重复次数、颜色、旋转角度等属性，来实现不同的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值