CSS动画，风车案例

风车案例案例：

关键代码：
transform: rotate(120deg); 旋转120度。
transition:2s; 旋转120度花2秒完成。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}#wrap{width: 300px;height: 300px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;transition:2s;border: 1px solid;}#wrap > div{margin: 10px;width: 130px;height: 130px;border: 1px solid;background: deeppink;float: left;box-sizing: border-box;}#wrap > div:nth-child(1),#wrap > div:nth-child(4){border-radius:0 60%;}#wrap > div:nth-child(2),#wrap > div:nth-child(3){border-radius:60% 0;}#wrap:hover{transform: rotate(120deg);}</style></head><body><div id="wrap"><div></div><div></div><div></div><div></div></div></body>
</html>

CSS动画，风车案例相关推荐

＜CSS3练习＞ CSS动画综合案例热点图（含素材）
CSS动画分为两个步骤: 1.先定义动画 2.再调用动画语法如下 1.定义: @keyframs 动画名称 {from(0%){}to(100%){}} 这里的数字可以从0%~100% 可以任意代 ...
css动画小案例弹力球
什么是 CSS3 中的动画? 动画是使元素从一种样式逐渐变化为另一种样式的效果.可以改变任意多的样式任意多的次数.用百分比来规定变化发生的时间,或用关键词 "from" 和 &qu ...
CSS动画奔跑的小熊案例
CSS动画奔跑的小熊案例资源个人学习代码 <!DOCTYPE html> <html lang="zh-CN"><head><meta ...
CSS写三角形和一个小风车案例
CSS实现三角形与小风车案例三角形原理盒子设置宽高为0 边框设置为10px solid 颜色为透明transparent 想要在哪个方向的三角形就根据边框的显示的方向 border-right 右 ...
12个优美的CSS动画案例
大家好,我是前端实验室的大师兄! 对于网页设计师和开发工程师而言,创建一款极具趣味性和实用性的CSS网页动画,能让网站美观不少 CSS动画,就是通过CSS代码搭建网页动画.允许设计师和开发人员,通过编 ...
前端技术周刊 2019-01-07：CSS 动画
2019-01-07 前端快爆 Chrome 72 已经进入了 beta 阶段.新增:公有类成员的声明和初始化.一些 DevTools 新功能(可视化性能指标.高亮 text nodes.复制节点的 ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
css hover变成手_web前端入门到实战：彻底掌握css动画「transition」
马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了 ...
html 气泡动画效果,CSS 动画实现动态气泡背景的方法
今天是节后上班第一天,早上醒来一睁眼,嗯?啊...?什么...?这是哪?我是谁?上什么班? 然鹅,还是被昨晚特意设置的八个闹钟:alarm_clock:吵醒,冬天早上起床的难度...想必各位都心有体会 ...

CSS动画，风车案例

CSS动画，风车案例相关推荐

最新文章

热门文章