css实现盾牌的动画效果

直接上代码：用伪类选择器去选择每个图片，再进行2d动画的实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: blueviolet;}.div1{width: 450px;height: 500px;/*border: 1px solid black;*/margin: 100px auto;}.div1 img:nth-child(1){transform: translate(-100px,50px) rotate(45deg);transition: all 2s linear;}.div1 img:nth-child(2){transform: translate(-300px,180px) rotate(145deg);transition: all 2s linear;}.div1 img:nth-child(3){transform: translate(200px,-40px) rotate(245deg);transition: all 2s linear;}.div1 img:nth-child(4){transform: translate(150px,50px) rotate(45deg);transition: all 2s linear;}.div1:hover img{transform: translate(0,0) rotate(0deg);}</style></head><body><div class="div1"><img src="img/shield_1_01.png" /><img src="img/shield_1_02.png" /><img src="img/shield_1_03.png" /><img src="img/shield_1_04.png" /><img src="img/shield_1_05.png" /><img src="img/shield_1_06.png" /><img src="img/shield_1_07.png" /><img src="img/shield_1_08.png" /><img src="img/shield_1_09.png" /></div></body>
</html>

css实现盾牌的动画效果相关推荐

纯html+css炫酷地球仪动画效果
纯html+css炫酷地球仪动画效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
uniapp小程序实现录音 uniapp小程序长按录音点击播放等功能（CSS实现语音音阶动画效果）
最近项目使用uniapp开发微信小程序,需要实现一个长按时进行语音录制,限制录制时间最大为60秒,录制完成后,可点击播放,播放时再次点击停止播放,录制完成长按实现删除功能,删除后又可重新录制(如上图所 ...
html翻牌动画效果,css实现旋转翻牌动画效果
css动画之旋转翻牌效果,具体内容如下所示: 1.我们先设置两个盒子大小,颜色等等,然后定位重叠在一起,最后再进行动画设置例子如下: .box { height: 300px; width: 300 ...
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示设计思路与核心技术旋转地球效果实现主要 ...
闪烁点击效果css,CSS3自定义闪烁动画效果实例
都说HTML5和CSS3的出现直接终结了FLASH时代,不管这其中有没有夸张的成分,但是CSS3的动画功力还真不可小觑.下面我们就分享一下CSS3的自定义闪烁动画实现方法,先定义好动画样式代码:@-w ...
基于Bootstrap和animate.css的模态框动画效果
最近在网上看到了可以对Bootstrap模态框增加打开和关闭的动画效果,故记录一下.原文地址点这里此动画效果需要引入animate.css,可以在animate.css官方网址中点击下载animat ...
matlab实现振动弹簧的实时动画,CSS如何实现弹簧动画效果
CSS Animation在Web Animation中已不是新技术,不过在制作动画的时候,或许常常纠结timing-function如何使用.一般情况之下,都会使用animation-timing- ...
CSS3技巧30：简单而实用的CSS导航下划线动画效果
2021 结束了迎来了 2022 回望这一年,收获了不少,也失去了很多. -------------------------------------------------------------- ...

css实现盾牌的动画效果

css实现盾牌的动画效果相关推荐

最新文章

热门文章