Html-照片的逐步出现、心形动画制作、3d立方体魔方、鼠标划过box阴影练习

一、照片的逐步出现

<!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>照片的逐步出现  </title>
</head>
<style>
.linear_1{margin: 0 auto;
}
img{-webkit-filter: brightness(30) grayscale(1);transition-duration: 5s;
}
img:hover{-webkit-filter: brightness(1) grayscale(1);
}
</style>
<body><div class="linear_1"><img src="../imag/魔女.jpg" alt=""></div></body>
</html>

效果图

二、心形动画制作

2.心型动画
<!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>心型动画  </title>
</head>
<style>
h2{line-height: 100px;position: absolute;color: aliceblue;z-index: 1;
}
.control{margin: 100px auto;width:200px;height: 200px; text-align: center;animation: heart 1.5s linear infinite;
}
.staturate{width: 100px;height: 100px;margin: 0 auto;position: relative;
}
.staturate::before{width: 100px;height: 160px;content: "";display: block;transform: rotate(45deg);left: 25%;background-color:   rgb(250, 8, 8);position: absolute;border-radius: 50px 50px 0 0;
}
.staturate::after{position: absolute;width: 100px;height: 160px;content: "";display: block;transform: rotate(-47deg);border-radius: 50px 50px 0 0;right: 20%;background-color: rgb(250, 8, 8);
}
@keyframes heart{0%{-webkit-transform: scale(1);}50%{-webkit-transform: scale(0.8);}100%{-webkit-transform: scale(1);}
}
</style>
<body><div class="control"><div class="staturate"><h2>可可</h2></div></div>
</body>
</html>

效果图

三、3d魔方

<!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>Document</title>
</head>
<style>
body{perspective: 1000px;
}
.cube{margin: 200px auto;width: 200px;height: 200px;position: relative;transform-style: preserve-3d;transform: rotate3d(1,1,1,0deg);transition: all 15s;
}
.cube:hover{transform: rotate3d(0,1,1,720deg);}
.content{position: absolute;opacity: 0.6;left: 0; top: 0;width: 200px;height: 200px;
}
.front{background-image: url("../imag/a.jpg");background-size: 100% auto;transform: translateZ(100px);
}
.back{background-image: url("../imag/b.jpg");background-size: 100% auto ;transform: translateZ(-100px);
}
.left{background-image: url("../imag/c.jpeg");background-size:  auto 100%;transform: rotateY(-90deg) translateZ(100px) ;
}
.right{background-image: url("../imag/f.jpeg");background-size:  auto 100%;transform: rotateY(90deg) translateZ(100px) ;
}
.top{background-image: url("../imag/d.jpg");background-size:  auto 100%;transform: rotateX(90deg) translateZ(100px) ;
}
.bottom{background-image: url("../imag/e.jpeg");background-size: auto 100%;transform: rotateX(-90deg) translateZ(100px) ;
}</style>
<body><div class="cube"><div class="content front"></div><div class="content back"></div><div class="content left"></div><div class="content right"></div><div class="content top"></div><div class="content bottom"></div></div>
</body>
</html>

效果图

四、鼠标划过box阴影练习

<!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>Document</title></head><style>.control {width: 200px;height: 300px;margin: 100px auto;}.content {width: 200px;height: 300px;background-color: pink;transition-duration: 0.5s;box-shadow: 0 0 0 #ccc;}.content:hover {box-shadow: 0px 5px 20px #999;}</style><body><div class="control"><div class="content"></div></div></body>
</html>

效果在之前展示过了~

Html-照片的逐步出现、心形动画制作、3d立方体魔方、鼠标划过box阴影练习相关推荐

css盒心形的代码过程,如何使用CSS和D3实现用文字组成的心形动画效果（附代码）...
本篇文章给大家带来的内容是关于如何使用CSS和D3实现用文字组成的心形动画效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://gith ...
html5动态效果随鼠标动,html5+CSS3心形动画跟随鼠标光标运动特效
html5+CSS3心形动画跟随鼠标光标运动特效代码片段: this.update = function () { var lastPoint = { x: _this.x, y: _this.y ...
【SwiftUI模块】0033、SwiftUI创建用户双击帖子时的心形动画
SwiftUI模块系列 - 已更新33篇 SwiftUI项目 - 已更新3个项目往期Demo源码下载技术:SwiftUI.SwiftUI4.0.双击动画.心形动画.动画运行环境: SwiftUI ...
css 心形动画爱心动画
1.PC 爱心动画(预览地址:http://www.yueqingfang.cn/heart/pc.html) <!DOCTYPE html> <html lang="e ...
iOS 仿YY直播心形动画烟花动画
YY直播点赞效果烟花演示效果会持续更新动画相关的小效果点我下载工程-感觉不错点个Star 代码展示 self.view.backgroundColor = [UIColor blackColor] ...
android 画布心形,用CANVAS实现的心形动画效果
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var c = document.getElementById("c"); var ct ...
notepad拼心形_用shell脚本写个心形动画表格
说回游戏,游戏通关后,本来都还好,让我产生情绪波动的是最后那个与纯子对话的档案,读完就感觉这个角色瞬间升华了,莫名情绪随之而来 set fso=createobject("scripting ...
java心形动画效果_java swing实现动态心形图案的代码下载
package com.zuidaima.swing; import java.awt.Color; import java.awt.Graphics; import java.awt.Image; ...
python表白爱心_python 心形动画表白（turtle）
Paste_Image.png python画图库turtle import turtle import math wn = turtle.Screen() wn.setworldcoordinate ...

Html-照片的逐步出现、心形动画制作、3d立方体魔方、鼠标划过box阴影练习

Html-照片的逐步出现、心形动画制作、3d立方体魔方、鼠标划过box阴影练习

一、照片的逐步出现

二、心形动画制作

三、3d魔方

四、鼠标划过box阴影练习

Html-照片的逐步出现、心形动画制作、3d立方体魔方、鼠标划过box阴影练习相关推荐

最新文章

热门文章

Html-照片的逐步出现 、心形动画制作、3d立方体魔方、鼠标划过box阴影练习

Html-照片的逐步出现 、心形动画制作、3d立方体魔方、鼠标划过box阴影练习

一、照片的逐步出现

二、心形动画制作

三、3d魔方

四、鼠标划过box阴影练习

Html-照片的逐步出现 、心形动画制作、3d立方体魔方、鼠标划过box阴影练习相关推荐

最新文章

热门文章

Html-照片的逐步出现、心形动画制作、3d立方体魔方、鼠标划过box阴影练习

Html-照片的逐步出现、心形动画制作、3d立方体魔方、鼠标划过box阴影练习

Html-照片的逐步出现、心形动画制作、3d立方体魔方、鼠标划过box阴影练习相关推荐