css3多变形,CSS3 多边形 球体随机运动

最新推荐文章于 2023-01-06 17:04:52 发布
最新推荐文章于 2023-01-06 17:04:52 发布
阅读量390 收藏
点赞数
文章标签： css3多变形

CSS

语言：

CSSSCSS

确定

.thing:nth-child(1) {

position: absolute;

width: 4rem;

height: 4rem;

background: transparent;

border-top-right-radius: 4rem;

border-top-left-radius: 4rem;

border-bottom-right-radius: 0;

border-bottom-left-radius: 4rem;

box-shadow: 1px 1px 3px rgba(66, 66, 66, 0.1);

border: 0.75rem solid #fff;

-webkit-animation: thing_animation 5s infinite linear;

animation: thing_animation 5s infinite linear;

-webkit-animation-delay: -0.5s;

animation-delay: -0.5s;

}

.thing:nth-child(2) {

position: absolute;

width: 4rem;

height: 4rem;

background: transparent;

border-top-right-radius: 4rem;

border-top-left-radius: 4rem;

border-bottom-right-radius: 0;

border-bottom-left-radius: 4rem;

box-shadow: 1px 1px 3px rgba(66, 66, 66, 0.1);

border: 0.75rem solid #fff;

-webkit-animation: thing_animation 5s infinite linear;

animation: thing_animation 5s infinite linear;

-webkit-animation-delay: -1s;

animation-delay: -1s;

}

.thing:nth-child(3) {

position: absolute;

width: 4rem;

height: 4rem;

background: transparent;

border-top-right-radius: 4rem;

border-top-left-radius: 4rem;

border-bottom-right-radius: 0;

border-bottom-left-radius: 4rem;

box-shadow: 1px 1px 3px rgba(66, 66, 66, 0.1);

border: 0.75rem solid #fff;

-webkit-animation: thing_animation 5s infinite linear;

animation: thing_animation 5s infinite linear;

-webkit-animation-delay: -1.5s;

animation-delay: -1.5s;

}

.thing:nth-child(4) {

position: absolute;

width: 4rem;

height: 4rem;

background: transparent;

border-top-right-radius: 4rem;

border-top-left-radius: 4rem;

border-bottom-right-radius: 0;

border-bottom-left-radius: 4rem;

box-shadow: 1px 1px 3px rgba(66, 66, 66, 0.1);

border: 0.75rem solid #fff;

-webkit-animation: thing_animation 5s infinite linear;

animation: thing_animation 5s infinite linear;

-webkit-animation-delay: -2s;

animation-delay: -2s;

}

.thing:nth-child(5) {

position: absolute;

width: 4rem;

height: 4rem;

background: transparent;

border-top-right-radius: 4rem;

border-top-left-radius: 4rem;

border-bottom-right-radius: 0;

border-bottom-left-radius: 4rem;

box-shadow: 1px 1px 3px rgba(66, 66, 66, 0.1);

border: 0.75rem solid #fff;

-webkit-animation: thing_animation 5s infinite linear;

animation: thing_animation 5s infinite linear;

-webkit-animation-delay: -2.5s;

animation-delay: -2.5s;

}

.thing:nth-child(6) {

position: absolute;

width: 4rem;

height: 4rem;

background: transparent;

border-top-right-radius: 4rem;

border-top-left-radius: 4rem;

border-bottom-right-radius: 0;

border-bottom-left-radius: 4rem;

box-shadow: 1px 1px 3px rgba(66, 66, 66, 0.1);

border: 0.75rem solid #fff;

-webkit-animation: thing_animation 5s infinite linear;

animation: thing_animation 5s infinite linear;

-webkit-animation-delay: -3s;

animation-delay: -3s;

}

.thing:nth-child(7) {

position: absolute;

width: 4rem;

height: 4rem;

background: transparent;

border-top-right-radius: 4rem;

border-top-left-radius: 4rem;

border-bottom-right-radius: 0;

border-bottom-left-radius: 4rem;

box-shadow: 1px 1px 3px rgba(66, 66, 66, 0.1);

border: 0.75rem solid #fff;

-webkit-animation: thing_animation 5s infinite linear;

animation: thing_animation 5s infinite linear;

-webkit-animation-delay: -3.5s;

animation-delay: -3.5s;

}

.thing:nth-child(8) {

position: absolute;

width: 4rem;

height: 4rem;

background: transparent;

border-top-right-radius: 4rem;

border-top-left-radius: 4rem;

border-bottom-right-radius: 0;

border-bottom-left-radius: 4rem;

box-shadow: 1px 1px 3px rgba(66, 66, 66, 0.1);

border: 0.75rem solid #fff;

-webkit-animation: thing_animation 5s infinite linear;

animation: thing_animation 5s infinite linear;

-webkit-animation-delay: -4s;

animation-delay: -4s;

}

.thing:nth-child(9) {

position: absolute;

width: 4rem;

height: 4rem;

background: transparent;

border-top-right-radius: 4rem;

border-top-left-radius: 4rem;

border-bottom-right-radius: 0;

border-bottom-left-radius: 4rem;

box-shadow: 1px 1px 3px rgba(66, 66, 66, 0.1);

border: 0.75rem solid #fff;

-webkit-animation: thing_animation 5s infinite linear;

animation: thing_animation 5s infinite linear;

-webkit-animation-delay: -4.5s;

animation-delay: -4.5s;

}

.thing:nth-child(10) {

position: absolute;

width: 4rem;

height: 4rem;

background: transparent;

border-top-right-radius: 4rem;

border-top-left-radius: 4rem;

border-bottom-right-radius: 0;

border-bottom-left-radius: 4rem;

box-shadow: 1px 1px 3px rgba(66, 66, 66, 0.1);

border: 0.75rem solid #fff;

-webkit-animation: thing_animation 5s infinite linear;

animation: thing_animation 5s infinite linear;

-webkit-animation-delay: -5s;

animation-delay: -5s;

}

.thing:before {

position: absolute;

z-index: -1;

top: 100px;

left: 100px;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

content: '';

display: inline-block;

width: 1.6rem;

height: 1.6rem;

border-radius: 1.6rem;

background: #474747;

-webkit-animation: thing2_animation 10s infinite linear;

animation: thing2_animation 10s infinite linear;

}

.thing:after {

position: absolute;

z-index: -1;

top: 60px;

left: 80px;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

content: '';

display: inline-block;

width: 0.8rem;

height: 0.8rem;

border-radius: 0.8rem;

background: #949494;

-webkit-animation: thing3_animation 4s infinite linear;

animation: thing3_animation 4s infinite linear;

-webkit-animation-direction: reverse;

animation-direction: reverse;

}

@-webkit-keyframes thing_animation {

50% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes thing_animation {

50% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes thing2_animation {

50% {

-webkit-transform: translateY(-500px) scale(0.1, 0.1);

transform: translateY(-500px) scale(0.1, 0.1);

}

}

@keyframes thing2_animation {

50% {

-webkit-transform: translateY(-500px) scale(0.1, 0.1);

transform: translateY(-500px) scale(0.1, 0.1);

}

}

@-webkit-keyframes thing3_animation {

50% {

-webkit-transform: translateX(300px) scale(0.1, 0.1);

transform: translateX(300px) scale(0.1, 0.1);

}

}

@keyframes thing3_animation {

50% {

-webkit-transform: translateX(300px) scale(0.1, 0.1);

transform: translateX(300px) scale(0.1, 0.1);

}

}

.wrap {

width: 5.5rem;

height: 5.5rem;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-2rem, -2rem);

-ms-transform: translate(-2rem, -2rem);

transform: translate(-2rem, -2rem);

}

.wrap:before {

position: absolute;

z-index: 10;

top: 50%;

left: 50%;

-webkit-transform: translate(-2rem, -2rem);

-ms-transform: translate(-2rem, -2rem);

transform: translate(-2rem, -2rem);

content: '';

display: block;

width: 4rem;

height: 4rem;

border-radius: 4rem;

background: tomato;

}

body {

background: #f2f2f2;

overflow: hidden;

}

行走的发动机
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3+less随机动画总结
aide315的博客
03-08 2216
前言有个动画需求，有几个div，需要不同时，不同幅度移动，用了css3+less实现重点使用~``，``内可嵌入js代码，获得的内容可以做keyframes 名字，也可以当作数字参与less的其他计算，但是获得的内容不能当作class名字编译前.move (@random) { @name: ~`'an-div-move-@{random}'`; @keyframes @name ...
css动效：气泡在屏幕上随机漂浮
叶小树咯
10-31 2421
css实现多个气泡在屏幕上随机漂浮的效果
css表现 行星 椭圆 球
c_qianxia5040的博客
01-06 363
通过长方形，并将圆角设置为50%，画椭圆。背景色渐变，凸显球形。
css动画 实验,CSS动画-旋转球
weixin_35688303的博客
08-03 358
style="width: 100%; height: 100%; position: fixed; background-color: rgb(255, 255, 255); z-index: 807; top: 0px; opacity: 0.9; display: block;">/*!Loading CSS*/#contain {width: 300px;height: 100px;...
纯css3多边形地球仪特效
07-24
纯CSS3多边形地球仪特效是一种利用现代Web技术实现的视觉效果，它结合了CSS3的特性，如转换（transform）、过渡（transition）和3D变换，来创建一个动态的、具有立体感的地球模型。这个特效展示了地球在网页上的自转...
纯css3多边形地球仪特效.zip
10-15
【标题】"纯css3多边形地球仪特效.zip"所涉及的知识点主要集中在CSS3技术上，尤其是3D变换、伪元素、以及渐变效果的运用。CSS3是CSS的最新版本，提供了许多增强的功能，使网页设计更加丰富多彩。 首先，3D变换是这...
CSS3基本图形
06-15
CSS3允许在一个元素上设置多个背景，每层可以有不同的颜色、图像、渐变或模式，这样可以创建复杂且富有深度的背景效果。 9. **伪元素与伪类（Pseudo Elements and Pseudo Classes）** 使用`:before`和`:after`伪...
HTML5 3D旋转球体
最新发布
10-25
以上就是关于“HTML5 3D旋转球体”的主要知识点，实际项目中还需要结合CSS3、响应式设计等技术，以适应不同设备的显示需求。通过不断实践和学习，你将能够创建出更加复杂和引人入胜的3D图形效果。
HTML+CSS3写弹力球
caiqirui的博客
05-31 892
主要CSS3样式代码如下：#tan{ /*宽度*/ width: 100px; /*高度*/ height: 100px; /*设置背景颜色*/ background-color: red; /*画一个圆形*/ border-radius: 50%; /*使用绝对定位*/ position: absolute; ...
CSS3实现的鼠标移动到图片上后随机切换效果
06-12
鼠标移动到图片上后，图片可以随机切换，鼠标移走后显示最后一张图片，类似抽奖的效果； 请在支持CSS3的高版本浏览器下预览
css图片自动移动效果
08-16
可以放在首页的自动移动图片样式，很漂亮。
H5 DIV圆圈内随机运动
09-29
资源主要为两层DIV,外层DIV为一个圆形，内层DIV为一个方形。方形在外层DIV随机直线轨迹运动，不超出圆边界。
css3中的动画特效--跳动的篮球
qq_53983648的博客
11-11 2369
html+css实现有趣的动画案例
CSS3多重背景结合动画打造会飘动的热气球
最爱喝怡宝的博客
11-28 459
1、引入所需要的图片，分别定义他们的位置，其中background-position: x轴 y轴，x轴 y轴;注意要和图片一一对应。 2、添加动画与关键帧 布局： <div id="wrap"> <h1>飞喽</h1> <div class="banner"></div> </div> 样式： *{ margin: 0; paddi
CSS3&&JS中随机生成数字和随机位置移动图片
liuzhenghui666666的博客
06-22 3070
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点名系统</title> <script type="text/javascript"> var arr = new Array();...
CSS 3 弹跳的小球动画的制作
weixin_72303943的博客
07-21 833
CSS 3 弹跳的小球动画的制作
笔记七（随机运动）
草木黄尘
11-16 501
将单个正弦波发展至两个正弦波，分别改变对象不同的属性，一个用于改变x轴坐标，一个用于改变y轴坐标，造成的结果像随机运动（其实可以预测轨迹）。文件名：random.html。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>随机运动</title> </head> <style type="text/css">
CSS3鼠标移入移出图片生成随机动画
choujingcui9780的博客
03-05 388
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画，我们先看最终效果图（截图为静态效果，做出来可是动态的哟） 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代码所代表含义，我这里就给出一些思路及关键代码： 1、首先使用ul li展...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值