前言

css实现动画效果
学习资源

结果展现

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS 风扇</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="box"><div><span></span><span></span><span></span><span></span></div></div>
</body>
</html>

body{margin: 0; /*外边距*/padding: 0; /*内边距*/background-color: #607d8b; /*背景颜色*/
}
.box{position:absolute; /*绝对定位*/top: calc(50% - 150px); /*距上部*/left: calc(50% - 100px); /*距左部*/transform: perspective(1000px) rotateY(-45deg); /*动画 视距 Y轴旋转*/width: 200px; /*宽度*/height: 300px; /*高度*/transform-style: preserve-3d; /*保留3D效果*/
}
.box::before{ /*之后添加*/content: ""; /*内容*/position: absolute;bottom: -100px;left: 0;width: 100%;height: 50px;background-color: #000;filter: blur(40px); /**/opacity: 0.5; /*透明度*/transform: rotateX(90deg);
}
.box div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform-style: preserve-3d;animation: cc 5s linear infinite; /*动画名称 5S 时间 重复循环*/
}
.box div span{position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;background: linear-gradient(0deg, #f1f1f1,#bbb,#f1f1f1); /*渐变*/border-radius: 20px; /*圆角*/
}
.box div span:nth-child(1){ /*第一个*/transform: rotateX(0deg);
}
.box div span:nth-child(2){transform: rotateX(45deg);
}
.box div span:nth-child(3){transform: rotateX(-45deg);
}.box div span:nth-child(4){transform: rotateX(90deg);
}
@keyframes cc{ /*动画*/0%{transform: perspective(1000px) rotateX(0deg);}100%{transform: perspective(1000px) rotateX(359deg);}
}

css-动画-旋转大风车相关推荐

CSS——动画{旋转按钮}
前面我们一直在学习样式,学习布局,什么浮动啊,定位呀,还有弹性盒子,那么今天我们来看一点不一样的--动画! 文章目录前言一.动画是什么? 二.动画的属性 1.过渡 2.实际应用和代码演示总结前 ...
点击按钮 css动画旋转切换显示按钮
首先注意:使用transform切换,不可使用display:none, block来切换隐藏,要使用class来控制 ,否则切换动画不显示 <view class="{{isShow ...
倒计时动画 html,HTML+CSS动画实现倒计时
最近想做一个倒计时的动画,来实现圆形时间动画倒计时特效做之前自己的想法是,对像素点的位置用函数进行判断,然后将对应位置的颜色隐藏,但是这样很麻烦,而且自己不知道怎么用函数去实现圆环均匀消失这样的效果 ...
基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div clas ...
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示设计思路与核心技术旋转地球效果实现主要 ...
css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...
如何用CSS动画特效让图片旋转起来
杜老师逆战班学员 2020.02.22 我们通常浏览网页,基本上看过去都是呈现着各种文字加图片的2D效果信息,作为一名前端开发工程师非常重要的工作就是要让用户看到网页时有眼前一亮.耳目一新的感觉,用户 ...
css动画-3d旋转盒子
css动画-3d旋转盒子效果图: 思路: 1.一个容器,装6个子容器放6张图(我是采用的ul列表) <ul class="container"><li id=& ...
css实现旋转的小流星动画
效果如下: 完整代码如下 : <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
html css动画自动旋转,不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...

css-动画-旋转大风车

文章目录

前言

结果展现

代码实现

css-动画-旋转大风车相关推荐

最新文章

热门文章