CSS特效集锦(9款 , 总有一款是你喜欢的)
主要是: 穿越时空特效, 图片放大镜, 3D相册, 立方体相册, 昼夜更替特效, 飘雪, 七彩雨, 签名生成器, 水波纹动画等
代码部分
<section>
<div class="content">
<h2>Live</h2>
<h2>Live</h2>
</div>
</section>
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
background: #000;
min-height: 100vh;
align-items: center;
justify-content: center;
}
.content {
position: relative;
}
.content h2 {
color: #fff;
font-size: 8em;
position: absolute;
transform: translate(-50%, -50%);
}
.content h2:nth-child(1) {
color: transparent;
-webkit-text-stroke: 2px #03a9f4;
}
.content h2:nth-child(2) {
color: #03a9f4;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate {
0%,
100% {
clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
} 50% {
clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
}
}
.page-footer {
position: fixed;
right: 35px;
bottom: 20px;
display: flex;
align-items: center;
padding: 5px;
color: black;
background: rgba(255, 255, 255, 0.65);
}
.page-footer a {
display: flex;
margin-left: 4px;
}
.touxiang {
bottom: 0px;
width: 30px;
height: 30px;
}
</style>
完整代码可查看 附件
穿越时空特效
图片放大镜特效
3D相册特效
立方体相册特效
昼夜更替特效
飘雪动画
七彩雨特效
签名生成器
水波纹动画
CSS特效集锦(9款 , 总有一款是你喜欢的)的更多相关文章
- CSS特效集锦:视觉魔法的碰撞与融合(二)
引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...
- CSS知识点集锦
CSS知识点集锦 CreateTime--2016年9月29日09:43:10Author:Marydon UpdateTime--2017年3月21日08:03:13 2.CSS样式优先级问题 ...
- 分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
- Github上关于iOS的各种开源项目集合(强烈建议大家收藏,查看,总有一款你需要)
下拉刷新 EGOTableViewPullRefresh - 最早的下拉刷新控件. SVPullToRefresh - 下拉刷新控件. MJRefresh - 仅需一行代码就可以为UITableVie ...
- 10款流行的Markdown编辑器,总有一款适合你
摘要:作为一个开源人,如果你不会使用Markdown语法,那你就OUT了!Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法,非常的简单实用. 作为一个开源 ...
- CSS特效汇集
http://www.lanrenzhijia.com/js/css3/ http://js.mobanwang.com/special/allcss/ 其他效果:http://www.cnblogs ...
- 一个神奇却很简单的css特效
在网上看到一个前端大牛的主页,觉得他有一个特效特别酷,一开始还以为是要用什么javascript代码来实现,但仔细看一下,发觉只是用几行css代码就搞定了,我觉得挺好的. 他这个效果就是鼠标放在左半部 ...
- CSS效果集锦(持续更新中)
高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...
- css中的1px并不总等于设备的1px(高分辨率不等 低分辨等)
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...
- css特效
1.页面淡入淡出 <html style="background:#0086b5"> <!--简易loading--> <div id="l ...
随机推荐
- Inventor 2021保姆级安装教程
Inventor 2021 WIN10 64位安装步骤: 1.先使用"百度网盘客户端"下载INT21_CN_x64安装包到电脑磁盘里,并鼠标右击进行解压缩,安装前先断网,然后找到I ...
- Pairs of Numbers 辗转相除
# 42. Pairs of Numbershttps://blog.csdn.net/qq_43521140/article/details/107853492- 出题人:OJ- 标签:[" ...
- 基于python的数学建模---运输问题
代码 import pulp import numpy as np from pprint import pprint def transport_problem(costs, x_max, y_ma ...
- apktool回编译报错
报错 error: No resource identifier found for attribute 'XXX' in package 'XXX' 解决 将xml文件中 "http:// ...
- 解决Emma中文乱码
vim -/.emma/emmarc 找到 db_encoding=latin1 改为 db_encoding=utf8 然后重新运行emma,此时发现还是乱码,不要着急,在执行所有的sql语句之前加 ...
- 【每日一题】2022年2月10日-NC160 二分查找-I
描述请实现无重复数字的升序数组的二分查找 给定一个 元素升序的.无重复数字的整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标(下标 ...
- 在windows下导入react项目并且打包编译后部署到nginx上
在windows下导入react项目并且打包编译后部署到nginx上 一.安装npm 二.创建react项目 三.安装nginx 四.总结 最近接手了公司的一个django项目,这是应该前后端分离的项 ...
- 利用node快速生成脚本
整理框架时突然发现两个文件从来没有使用过,删除的瞬间仿佛get到了用处. fs 可用于与文件系统进行交互模块 path 提供一些实用工具,用于处理文件和目录的路径 process.argv 返回一个数 ...
- 软件开发架构、构架趋势、OSI七层协议
目录 软件开发架构 构架总结 网络编程前戏 OSI七层协议简介 OSI七层协议值之物理连接层 OSI七层协议之数据链层 网络相关专业名词 OSI七层协议之网络层 IP协议: IP地址特征: IP地址分 ...
- YMOI 2019.6.22
题解 YMOI 2019.6.22 lia麦頔溜了,缺了lia麦頔的排名仅供参考 不过分数还是暴露无遗 T1 邪恶入侵 简易题干: 在三维空间内有一些点,点之间有双向边.每一次询问给出一个m,只有边权 ...