前端学习CSS3(day3)盾牌案例

从零散的碎块到重新合成一个盾牌

原理：非常简单就是一个div里面9张图片然后让他们初始样式旋转当鼠标放在上面的时候样式消失

.box:hover > img{transform: none;}

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{padding: 0;margin: 0;}body{background-color: #31965b;}.box{width: 440px;margin:100px auto;}.box > img{transition: transform 1s;}.box > img:nth-of-type(1){transform: translate(100px,100px) rotate(30deg);}.box > img:nth-of-type(2){transform: translate(-100px,-100px) rotate(-30deg);}.box > img:nth-of-type(3){transform: translate(200px,200px) rotate(60deg);}.box > img:nth-of-type(4){transform: translate(-200px,-200px) rotate(-60deg);}.box > img:nth-of-type(5){transform: translate(150px,150px) rotate(90deg);}.box > img:nth-of-type(6){transform: translate(50px,150px) rotate(-90deg);}.box > img:nth-of-type(7){transform: translate(-150px,-150px) rotate(60deg);}.box > img:nth-of-type(8){transform: translate(10px,-250px) rotate(-90deg);}.box > img:nth-of-type(9){transform: translate(-250px,10px) rotate(45deg);}.box:hover > img{transform: none;}</style>
</head>
<body>
<div class="box"><img src="../images/shield_1_01.png" alt=""><img src="../images/shield_1_02.png" alt=""><img src="../images/shield_1_03.png" alt=""><img src="../images/shield_1_04.png" alt=""><img src="../images/shield_1_05.png" alt=""><img src="../images/shield_1_06.png" alt=""><img src="../images/shield_1_07.png" alt=""><img src="../images/shield_1_08.png" alt=""><img src="../images/shield_1_09.png" alt="">
</div>
</body>
</html>

前端学习CSS3(day3)盾牌案例相关推荐

小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
前端学习日记day3——制作新闻页面
1.HTML文档头部相关标记 ①<meta/>定义页面元素信息,可重复出现在<head>头部标记中,是单标记.<meta/>本身不包括任何内容,通过"名称 ...
Web前端学习笔记——CSS京东案例、BFC
京东项目(一) 京东项目介绍项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需 ...
web前端学习css“北方高温“案例
写于2021/11/12 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
web前端学习28-29（综合案例：圣诞节的那些事）
文章目录综合案例综合案例主要复习: 目录文件夹今日所学标签路径锚点链接根据前面所学知识可以很容易做出下面这个案例:圣诞节的那些事例: 首先可以先建一个文件夹用来保存这个案例建两个.h ...
前端学习-css3的一些属性
一.伪元素伪元素: before,after 相当于是元素内部的两个子元素(盒子),分别是一前一后的两个盒子,默认显示模式是行内式必写项 :伪元素中必须有content属性,属性值可为空. 即,可 ...
好程序员web前端学习路线分享css3中的渐进增强和降级
好程序员web前端学习路线分享css3中的渐进增强和降级,渐进增强和降级这两个概念是在 CSS3 出现之后火起来的.由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器 ...
12个学习 CSS3 网站布局设计的优秀案例
网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...
前端学习——JavaScript抽屉，手风琴，购物车特效案例
一. JavaScript案例介绍这篇我们通过一些JavaScript案例来完成对JavaScript中BOM对象和DOM对象的理解首先我们会学到三种常用的JavaScript案例特效分别是手 ...

前端学习CSS3(day3)盾牌案例

前端学习CSS3(day3)盾牌案例相关推荐

最新文章

热门文章