作者：monkeysoft
转发链接：https://mp.weixin.qq.com/s/njyDqKDsPENLT4JRbz5Jsw
图标按钮
这个按钮特效比较简单，通过伪类选择器before和after，通过绝对定位，定位在按钮的两端。
然后通过hover属性，划上时添加动画和阴影，就有了视觉上的特效。
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
background: #14213D;
min-height: 100vh;
}
a{
position: relative;
padding: 10px 30px;
margin: 45px 0;
color: #B7A3E0;
text-decoration: none;
font-size: 20px;
transition: 0.5s;
overflow: hidden;//隐藏溢出的线条
-webkit-box-reflect: below 1px linear-gradient(transparent,#0003);//倒影在文字下方
，线性渐变创建遮罩图像
}
a:hover{
background: #B7A3E0;
color: #111;
box-shadow: 0 0 50px #B7A3E0;//盒子阴影
transition-delay: 0.5s;
}
a::before{
content: '';
position:absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
border-top: 2px solid #B7A3E0;
border-right: 2px solid #B7A3E0;
transition: 0.5s;
transition-delay: 0.25s;
}
a:hover::before{
width: 100%;
height: 100%;
transition-delay: 0s;
}
a::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 10px;
height: 10px;
border-bottom: 2px solid #B7A3E0;
border-left: 2px solid #B7A3E0;
transition: 0.5s;
transition-delay: 0.25s;
}
a:hover::after{
width: 100%;
height: 100%;
transition-delay: 0s;
}
a:nth-child(1){
filter: hue-rotate(100deg); //css滤镜
}
a:nth-child(3){
filter: hue-rotate(200deg);
}
</style>
<body>
<a href="#">按钮</a>
<a href="#">按钮</a>
<a href="#">按钮</a>
</body>跑马灯按钮
基本与上面的按钮类似
只是每个按钮的四个角是用四个span来定位，每个span加上各自的动画，就形成了跑马灯效果
<style> body{
display: flex;
flex-direction: column;
align-items: center;
background: #14213D;
min-height: 100vh;
}
a{
position: relative;
display: inline-block;
padding: 10px 30px;
margin: 45px 0;
color: #6ECF81;
text-decoration: none;
font-size: 20px;
text-transform: uppercase;
transition: 0.5s;
overflow: hidden;
letter-spacing: 4px;
-webkit-box-reflect: below 1px linear-gradient(transparent,#0003);
}
a span{
position: absolute;
display: block;
}
a:hover{
background: #6ECF81;
color: #111;
transition-delay: 0.1s;
box-shadow: 0 0 5px #6ECF81,
0 0 25px #6ECF81,
0 0 50px #6ECF81,
0 0 100px #6ECF81
}
a span:nth-child(1){
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#6ECF81);
animation: animate1 0.5s linear infinite;
}
@keyframes animate1{
0%{
left: -100%;
}
50% ,100%{
left: 100%;
}
}
a span:nth-child(2){
top: 0;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#6ECF81);
animation: animate2 0.5s linear infinite;
animation-delay: 0.125s;
}
@keyframes animate2{
0%{
top: -100%;
}
50% ,100%{
top: 100%;
}
}
a span:nth-child(3){
bottom: 0;
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#6ECF81);
animation: animate3 0.5s linear infinite;
animation-delay: 0.25s;
}
@keyframes animate3{
0%{
right: -100%;
}
50% ,100%{
right: 100%;
}
}
a span:nth-child(4){
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#6ECF81);
animation: animate4 0.5s linear infinite;
animation-delay: 0.375s;
}
@keyframes animate4{
0%{
bottom: -100%;
}
50% ,100%{
bottom: 100%;
}
}
a:nth-child(1){
filter: hue-rotate(120deg);
}
a:nth-child(3){
filter: hue-rotate(270deg);
}
</style>
<body>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
SHINE
</a>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
SHINE
</a>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
SHINE
</a>
</body>
图标旋转
用几个i标签来代表边框，设置不同的透明度，制造重影效果。
<style> body {
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: slategray;
}
/* 图标基本样式 */
a {
display: block;
text-align: center;
text-decoration: none;
margin: 0 50px;
padding: 0 20px;
color: seashell;
}
.container {
width: 60px;
height: 60px;
position: relative;
transition: all .3s;
}
/* 移入旋转 skew 扭曲 斜切变换*/
a:hover .container {
transform: rotate(-35deg) skew(10deg);
}
.iconfont {
font-size: 50px;
line-height: 60px;
text-align: center;
}
i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #fff;
transition: .3s;
}
/* 每个i标签代表一个边框，加上不同的颜色和重影 */
a:hover i:nth-child(1) {
opacity: 0.2;
}
a:hover i:nth-child(2) {
opacity: 0.4;
transform: translate(5px, -5px);
}
a:hover i:nth-child(3) {
opacity: 0.6;
transform: translate(10px, -10px);
}
a:hover i:nth-child(4) {
opacity: 0.8;
transform: translate(15px, -15px);
}
a:hover i:nth-child(5) {
opacity: 1;
transform: translate(20px, -20px);
}
.items:nth-child(1) .container i,
.items:nth-child(1) a p {
border-color: pink;
color: pink;
}
.items:nth-child(2) .container i,
.items:nth-child(2) a p {
border-color: yellowgreen;
color: yellowgreen;
}
.items:nth-child(3) .container i,
.items:nth-child(3) a p {
border-color: sandybrown;
color: sandybrown;
}
.items:nth-child(1) a:hover i {
box-shadow: -1px 1px 3px pink;
}
.items:nth-child(2) a:hover i {
box-shadow: -1px 1px 3px yellowgreen;
}
.items:nth-child(3) a:hover i {
box-shadow: -1px 1px 3px sandybrown;
}
p {
transform: translateY(-30px);
opacity: 0;
transition: .3s;
font-weight: 700;
}
a:hover p {
transform: translateY(0px);
opacity: 1;
}
</style>
<body>
<div class="items">
<a href="#">
<div class=" container">
<i></i>
<i></i>
<i></i>
<i></i>
<i class="iconfont icon-qq"></i>
</div>
<p>QQ</p>
</a>
</div>
<div class="items">
<a href="#">
<div class=" container">
<i></i>
<i></i>
<i></i>
<i></i>
<i class="iconfont icon-weixin"></i>
</div>
<p>WeChat</p>
</a>
</div>
<div class="items">
<a href="#">
<div class=" container">
<i></i>
<i></i>
<i></i>
<i></i>
<i class="iconfont icon-tubiaozhizuo-"></i>
</div>
<p>WeiBo</p>
</a>
</div>
</body>点击页面出现爱心
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
<script>
(function (window, document, undefined) {
var hearts = [];
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
}
})();
init();
function init() { //初始化爱心
css(
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
);
attachEvent();
gameloop();
}
function gameloop() {
for (var i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" +
hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale +
") rotate(45deg);background:" + hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent() { //监听鼠标单击事件
var old = typeof window.onclick === "function" && window.onclick;
window.onclick = function (event) {
old && old();
createHeart(event);
}
}
function createHeart(event) {//创建div存放爱心
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el: d,
x: event.clientX - 5,
y: event.clientY - 5,
scale: 1,
alpha: 1,
color: randomColor()
});
document.body.appendChild(d);
}
function css(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor() { //随机函数
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
.random() *
255)) + ")";
}
})(window, document);
</script>视频悬停特效
<style>
.banner{
position: absolute;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.banner video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.iconfont{
position: relative;
height: 100%;
width: 100%;
background: #fff;
font-size: 30vw;
text-align: center;
line-height: 150%;
color: #000;
mix-blend-mode: screen;
}
.iconfont:hover{
background-color: #000;
color:#fff;
}
@media(max-width: 900px){ //宽度低于900px 排列方向变为垂直
.banner{
flex-direction: column;
}
.banner i .iconfont{
height: 50%;
line-height: 50vh;
font-size: 30vw;
}
}
</style>
<div class= "banner">
<video autoplay loop muted >
<source src = "http://vfx.mtime.cn/Video/2019/03/18/mp4/190318231014076505.mp4" type = "video/mp4">
</video>
<i class="iconfont icon-qq"></i>
<i class="iconfont icon-weixin"></i>
</div>
</body>作者：monkeysoft
转发链接：https://mp.weixin.qq.com/s/njyDqKDsPENLT4JRbz5Jsw