前言：
如今大家对“图片走马灯html怎么做”大概比较重视，小伙伴们都想要学习一些“图片走马灯html怎么做”的相关内容。那么小编同时在网络上网罗了一些有关“图片走马灯html怎么做””的相关内容，希望看官们能喜欢，小伙伴们一起来学习一下吧！作者：monkeysoft
转发链接：
图标按钮
这个按钮特效比较简单，通过伪类选择器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 = "; type = "video/mp4"> </video> <i class="iconfont icon-qq"></i> <i class="iconfont icon-weixin"></i> </div></body>作者：monkeysoft
转发链接：
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #图片走马灯html怎么做
