【全】CSS动画大全之其他【火影忍者动态背景】
效果预览
代码
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8" />
<meta name="author" content="https://www.cnblogs.com/beixuan">
<meta name="version" content="1.0.0">
<meta name="date" content="2021/12/05 17:05:50">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS动画大全之火影忍者动态背景</title>
</head>
</head>
<style>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.page-wrapper {
width: 100%;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
justify-items: center;
flex-direction: row;
flex-wrap: wrap;
box-sizing: border-box;
padding: 3rem;
}
.page-wrapper > div {
width: 20rem;
height: 15rem;
background-color: #55557f;
position: relative;
border-radius: 12px;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100%;
justify-content: center;
justify-items: center;
align-items: center;
cursor: pointer;
}
.circle {
width: 15rem !important;
height: 15rem !important;;
border-radius: 50% !important;;
}
img {
z-index: 10;
transition: all 0.8s ease;
filter: sepia(1);
}
.right img {
transform: scaleX(-1);
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
overflow: hidden;
}
.first > .bg,
.second > .bg {
border-radius: 50%;
}
.bg > span {
position: absolute;
top: 0;
left: 0;
width: 1.8rem;
height: 100%;
background-color: #acacac;
transform: skewX(20deg);
transition: all 0.5s ease;
}
.right > .bg > span {
transform: skewX(-20deg);
}
.bg > span::before {
content: '';
position: absolute;
left: 3rem;
top: 0;
width: 100%;
height: 100%;
background-color: #acacac;
transition: all 0.5s ease;
}
.bg > span::after {
content: '';
position: absolute;
left: -3rem;
top: 0;
width: 100%;
height: 100%;
background-color: #acacac;
transition: all 0.5s ease;
}
.bg > span:nth-child(1) {
left: -3rem;
}
.bg > span:nth-child(2) {
left: 6rem;
}
.bg > span:nth-child(3) {
left: 15rem;
}
.bg > span:nth-child(4) {
left: 24rem;
}
.left:hover img {
filter: drop-shadow(2px 4px 6px black);
transform: scale(1.5) translateY(-30px);
}
.right:hover img {
filter: drop-shadow(2px 4px 6px black);
transform: scaleX(-1) scale(1.5) translateY(-30px);
}
.left:hover .bg > span {
animation: animeSpanLeft 0.5s infinite linear;
}
.right:hover .bg > span {
animation: animeSpanRight 0.5s infinite linear;
}
.page-wrapper > div:hover span,
.page-wrapper > div:hover span::before,
.page-wrapper > div:hover span::after {
background-color: #ffff7f;
}
@keyframes animeSpanLeft {
from{
transform: translateX(0) skew(20deg);
}
to{
transform: translateX(6.25rem) skew(20deg);
}
}
@keyframes animeSpanRight {
from{
transform: translateX(0) skew(-20deg);
}
to{
transform: translateX(6.25rem) skew(-20deg);
}
}
</style>
<body>
<div class="page-wrapper">
<div class="first circle left">
<img src="./鸣人.png" height="280" />
<div class="bg">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="second circle right">
<img src="./鸣人.png" height="280" />
<div class="bg">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="third left">
<img src="./鸣人.png" height="280" />
<div class="bg">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="fourth right">
<img src="./鸣人.png" height="280" />
<div class="bg">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>
图片资源
【全】CSS动画大全之其他【火影忍者动态背景】的更多相关文章
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- Jquery 动态交换两个div位置并添加Css动画效果
前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子 ...
- CSS动画-transition/animation
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- Css 动画的回调
在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...
- 【译】css动画里的steps()用法详解
原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- [转]CSS hack大全&详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
- 全新jquery多点滑动幻灯片——全屏动画animateSlide
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...
- CSS动画属性性能详细介绍
CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...
随机推荐
- python重拾第八天-Socket网络编程
本节内容 Socket介绍 Socket参数介绍 基本Socket实例 Socket实现多连接处理 通过Socket实现简单SSH 通过Socket实现文件传送 作业:开发一个支持多用户在线的FTP程 ...
- 都是全志T113处理器，“-i”和“-S3”有什么区别？
自9个月前,创龙科技"1片含税就79元"的全志T113-i双核ARM Cortex-A7@1.2GHz的工业核心板(SOM-TLT113)推出之后,不少嵌入式软硬件工程师.用户都咨 ...
- linux常见终端命令和一些小问题的解决
此文章为linux常见终端命令汇总和一些小问题的解决方法,会不定期更新. [常见指令] 1. 误按 Ctrl+s 锁住终端. ubuntu16命令行误按 Ctrl + s 导致终端锁定,Ctrl + ...
- FreeRDP使用，快速找出账户密码不正确的服务器地址
最近有个需求,需要找出服务器未统一设置账户密码的服务器,进行统一设置,一共有一百多台服务器,一个个远程登录看,那得都费劲啊,这时候就可以用到FreeRDP这个远程桌面协议工具,FreeRDP下载,根据 ...
- Oracle 锁表查询和解锁方法
system登录 查询被锁表信息 select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, ...
- 防火防盗防CDN流量盗刷
没想到自己的小破站也逃不掉被攻击的命,分分钟就给我刷欠费了. 本来不想写这篇文章的,但看到好多大佬(小林coding. JavaGuide)近期cdn都被盗刷了. 还是来提醒下大家,防火防盗防cdn流 ...
- 洛谷P1365
WJMZBMR打osu! / Easy 题目背景 原 维护队列 参见 P1903 题目描述 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:( 我们来简化一下这个游戏的规则 有 ...
- springboot 3.x MultipartFile 参数总是为空 参数传递不进来
场景: 在写一个统一文件上传的时候,MultipartFile参数一直传递不进来,一直为空. 排错方法: 我先是将业务简化,使用api文档进行测试,测试是前端问题还是后端问题. 简化后业务: 用api ...
- jmeter forEach循环获取response参数值进行接口请求
jmeter forEach循环获取response参数值进行接口请求 注意: 一,ForEach控制器 输入变量前缀:输入正则表达式变量的引用名称即可 Start index for loop(ex ...
- Jmeter函数助手35-property
property函数用于获取jmeter属性值. 属性名称:填入jmeter的属性名称 存储结果的变量名(可选) 默认值:缺省值,当获取属性值为空时则返回该值 1.查看jmeter全局属性,测试计划右 ...