前端小案例汇总(附上原码)
bigegpt 2024-09-24 07:34 3 浏览
一.交叉动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交叉动画实现</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrapper {
background-color: #222;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.dot {
width: 2em;
height: 2em;
margin: 1em;
border-radius: 50%;
background-color: red;
position: relative;
}
.dot::before {
width: 100%;
height: 100%;
position: absolute;
background-color: inherit;
border-radius: inherit;
content: "";
animation: wave 2s ease-out infinite;
}
/* .dot:nth-of-type(1)::before {
animation-delay: .2s;
}
.dot:nth-of-type(2)::before {
animation-delay: .4s;
} */
/* .dot:nth-of-type(3)::before {
animation-delay: .6s;
}
.dot:nth-of-type(4)::before {
animation-delay: .8s;
}
.dot:nth-of-type(5)::before {
animation-delay: 1s;
} */
/* .dot:nth-of-type(1) {
background-color: green;
}
.dot:nth-of-type(2) {
background-color: yellow;
}
.dot:nth-of-type(3) {
background-color: blue;
}
.dot:nth-of-type(4) {
background-color: yellowgreen;
}
.dot:nth-of-type(5) {
background-color: white;
} */
@keyframes wave {
50% {
transform: scale(2.5);
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function()
{
var $dot=$(".dot");
for(var i=0;i<$dot.length;i++)
{
$(`.dot:nth-of-type(${i+1})`).css({
"background-color":`rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
})
// $(`.dot:nth-of-type(${i+1})::before`).css({
// "animation-delay":i*0.2+"s"
// })
$("head").append(
`<style>
.dot:nth-of-type(${i+1})::before
{
animation-delay:${i*0.2}s
}
</style>`
)
}
})
function random(min,max)
{
return Math.floor(Math.random()*(max-min)+min)
}
</script>
</body>
</html>二.闪光按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>闪亮按钮</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
.btn{
padding: 1rem 3rem;
font-size: 1rem;
line-height: 1.5;
color: #fff;
--hue:190;
background: hsl(var(--hue), 100%, 40%);
border: 1px solid hsl(var(--hue), 100%, 40%);
text-transform: uppercase;
}
.btn:hover{
background: hsl(var(--hue), 100%, 20%);
/* --hue:150; */
}
.btn.btn-ghost{
background: transparent;
}
.btn.btn-shine{
position: relative;
overflow: hidden;
}
.btn.btn-shine::before{
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background: linear-gradient(120deg,transparent,
hsla(var(--hue), 100%, 40%,0.5),transparent);
content: "";
transform: translateX(-100%);
transition: 0.8s;
}
.btn.btn-shine:hover::before{
transform: translateX(100%);
}
.btn.btn-shine:hover{
box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 40%,0.5);
}
.btn.btn-success
{
--hue:350;
}
</style>
</head>
<body>
<button class="btn btn-ghost btn-shine btn-success">hover me</button>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>想和你一起去看雪</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
height: 100vh;
background: radial-gradient(ellipse at bottom,
#1b2735 0, #090a0f 100%);
filter: drop-shadow(0 0 10px white);
position: relative;
}
.snow {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
position: absolute;
}
.mywords
{
position: fixed;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 1.5em;
line-height: 2em;
font-weight: 500;
display: flex;
flex-wrap: wrap;
}
.mywords span{
animation: jumpin 0.5s ease-out both;
}
@keyframes jumpin {
from{
transform: translateY(-20%);
opacity: 0;
}
to{
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<p class="mywords">
余生我只想和你看雪看星星看月亮，从诗词歌赋谈到人生理想。
</p>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function () {
var words=$(".mywords").text().split("");
$(".mywords").empty();
words.forEach((w,i)=>{
$(`<span>${w}</span>`).css({
"animation-delay": 0.1*i+'s'
}).appendTo($(".mywords"));
});
for(var i=0;i<200;i++)
{
var x=Math.random()*100;
var y=Math.random()*100;
var scale=Math.random();
var opacity=Math.random();
var t1=Math.random()*20+10;
var t2=Math.random()*30;
var o=Math.random()*20-10;
var x1=x+o;
var x2=x+o/2;
$(`<style> @keyframes fall${i} {
${y}%{
transform: translate(${x1}vw, ${y}vh) scale(${scale});
}
to{
transform: translate(${x2}vw,100vh) scale(${scale});
}
}
</style>`).appendTo($("head"));
$('<div class="snow"></div>')
.css({
"transform": `translate(${x}vw, -10px) scale(${scale})`,
"opacity": opacity,
"animation": `fall${i} ${t1}s -${t2}s linear infinite`
})
.appendTo($("body")).end()
}
})
</script>
</body>
</html>四.红色闪光月亮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红色的月亮</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background: black;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.moon
{
width: 8em;
height: 8em;
border-radius: 50%;
background: black;
box-shadow: inset 0.5em -0.5em crimson;
position: relative;
animation: move 2s linear infinite;
}
.moon::before,.moon::after
{
position: absolute;
width: 100%;
height: 100%;
background: inherit;
box-shadow: inherit;
border-radius: inherit;
content: "";
}
.moon::before{
filter: blur(5px);
}
.moon::after{
filter: blur(10px);
}
@keyframes move {
to{
transform: rotate(1turn);
}
}
</style>
</head>
<body>
<div class="moon"></div>
</body>
</html>五.文字效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本效果</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #0f0f0f;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.mywords {
color: #fff;
font-size: 1.5em;
line-height: 1.8em;
margin: 0 1em;
}
.mywords span {
animation: lightin 0.8s both;
}
@keyframes lightin {
from {
opacity: 0;
}
65% {
opacity: 1;
text-shadow: 0 0 30px #fff;
}
75% {
opacity: 1;
}
to {
opacity: 0.7;
}
}
</style>
</head>
<body>
<p class="mywords">
不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。
</p>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function()
{
var words=$(".mywords").text().split("");
$(".mywords").empty();
words.forEach((w,i)=>{
$(`<span>${w}</span>`)
.css({
"animation-delay": 0.05*i+'s'
})
.appendTo($(".mywords"));
})
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字遮罩效果</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #0f0f0f;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.mywords {
color:transparent;
font-size: 1.5em;
line-height: 1.8em;
position: relative;
animation: fontcolor 2s 1.6s forwards;
}
@keyframes fontcolor {
to{
color: #fff;
}
}
.mywords.from {
margin: 1em 0;
}
.mywords::before{
content: "";
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
background-color: cyan;
transform: scaleX(0);
transform-origin:left ;
animation: move 2s cubic-bezier(0.75,0,0,1) forwards;
}
.mywords.from::before{
background-color: orange;
animation-delay: 2s;
/* animation: move 2s 2s cubic-bezier(0.75,0,0,1) forwards; */
}
.mywords.from
{
animation-delay: 3.2s;
}
@keyframes move {
50%{
transform-origin: left;
transform: scaleX(1);
}
50.1%
{
transform-origin: right;
}
100%
{
transform-origin: right;
transform: scaleX(0);
}
}
</style>
</head>
<body>
<p class="mywords">我不知道将去何方，但我已在路上</p>
<p class="mywords from">千与千寻</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字蒙版效果实现</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
height: 100vh;
position: relative;
}
img,h1{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
img{
object-fit: cover;
}
h1{
font-size: 20vw;
text-align: center;
line-height: 100vh;
mix-blend-mode: screen;
background-color: #fff;
}
</style>
</head>
<body>
<img src="bg.gif" alt="">
<h1>花未眠</h1>
</body>
</html>相关推荐
- 5分钟调色大片的方法（5分钟调色大片的方法有哪些）
-
哈喽大家好。在大家印象中一定觉得ps非常难学非常难。大家不要着急，小编的教学都是针对ps零基础的同学的，而且非常实用哦。只要大家跟着图文练习一两遍，保证大家立马学会~！好了，废话少说，下面开始我们今天...
- 闪白特效原来是这么用的（闪白特效怎么使用）
-
作者|高艳侠订阅|010-86092062闪白特效是影视作品中应用比较多的效果之一，那么具体该在哪些场景使用闪白特效？具体该如何操作？下面就以AdobePremiere（以下简称PR）为例，...
- ppt常用小图标去哪里找?3个矢量素材网站推荐!
-
ppt是一个注重可视化表达的演示载体，除了高清图片，ppt中另一类常用的素材是各种小图标，也叫矢量图标，巧妙运用小图标能提升整体美观度和表现力，那么ppt常用小图标去哪里找呢？为方便各位快速找到合适的...
- 有什么好用的截图录屏工具?试试这9款
-
经常有朋友反馈苦于缺乏截屏和录屏的趁手工具，本期我们分享几个相当好用的截屏和录屏工具，希望能帮到大家。ScreenToGifScreenToGif是一款免费且开源的录屏工具。此款工具最大的特点是可以...
- 配色苦手福音!专业快速色环配色PS插件
-
今天橘子老师给的大家介绍的是一款快速配色的插件，非常强大配色苦手福音来啦！（获取方式见文末）【插件介绍】配色在后期设计中占有主导地位，好的配色能让作品更加抢眼Coolorus这款专业的配色插件，能够...
- 如何用PS抠主体?（ps怎么抠主体）
-
1.主体法抠图-抠花苞和花梗导入一张荷花苞的照片，点击上图中顶部“选择”菜单栏，下拉单击“主体”。可以看到，只有花苞被选中，但是花梗并没有被选中。接下来单击上图中左侧工具栏的“快速选择工具”，上图中顶...
- 2799元的4K电视，有保障吗?（买4k电视机哪个品牌好）
-
在上一期《电脑报》的3·15专题报道中，我们揭露了一款不靠谱的42英寸4K智能电视——TCLD42A561U。这款售价2699元的4K智能电视不仅4K画质方面存在严重问题，而且各种功能和应用体验也不理...
- 苹果电脑的Touch Bar推出一段时间了 这款工具可以帮你开发适用于它的APP
-
距离苹果推出带有TouchBar的MacBookPro已经有一段时间了，除了那些像Adobe、Google和Microsoft大公司在开发适用于TouchBar的应用之外，其实还有很多独立的开...
- 如魔法般吸取颜色的桌灯（如魔法般吸取颜色的桌灯叫什么）
-
色彩为生活带来的感官刺激，逐渐被视为理所当然。一盏桌灯运用它的神奇力量，将隐藏于物件中的颜色逐一释放，成为装点环境的空间魔法师。ColorUp是一款可以改变颜色的吸色台灯，沿用传统灯泡的造型，融入了拾...
- 一篇文章带你用jquery mobile设计颜色拾取器
-
【一、项目背景】现实生活中，我们经常会遇到配色的问题，这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。我们可以通过jquerymobile去设计颜色的拾取器...
- ps拾色器快捷键是什么?（ps2019拾色器快捷键）
-
ps拾色器快捷键是什么?文章末尾有获取方式，按照以下步骤就能自动获得！学会制作PS特效需要一定程度的耐心和毅力。初学者可以从基本的工具和技术开始学习，逐渐提高他们的技能水平。同时，观看更多优秀的特效作...
- 免费开源的 Windows 截图录屏工具，支持 OCR 识别和滚动截图等
-
功能很强大、安装很小巧的免费截图、录屏工具，提供很多使用的工具来帮我么能解决问题，推荐给大家。关于ShareXShareX是一款免费的windows工具，起初是一个小巧的截图工具，经过多年的迭...
- 入门到精通系列PS教程:第13篇 · 拾色器、颜色问题说明及补充
-
入门到精通系列PS教程：第13篇·拾色器、颜色问题说明及补充作者|侯潇问题说明我的第12篇教程里，有个小问题没有说清楚。要说是错误，又不算是错误，只是没有说准确。写完那篇教程后，因为已经到了深...
- PS冷知识:用吸管工具吸取屏幕上的任意颜色
-
今天，我们给大家介绍PS中的一个冷知识：用吸管工具可以吸取屏幕上的任意颜色。其实，操作起来是非常简单的。大多数情况下，我们认为，PS的吸管工具只能吸取PS软件作图区域范围内的颜色，最多加上画布四周的...
- Windows 11 将提供内置颜色选择器工具
-
Windows11内置了颜色选择器，可以扫描并识别屏幕上的颜色并生成颜色代码。此外，微软还利用人工智能技术，让屏幕上的文本扫描和选择变得更加便捷。这两项功能均已在SnippingToolv1...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- libcrypto.so (74)
- linux安装minio (74)
- ubuntuunzip (67)
- vscode使用技巧 (83)
- secure-file-priv (67)
- vue阻止冒泡 (67)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)