css一下特效

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:14460

css3特效
{}
<!DOCTYPE html><html>\r\n\t<head>\t\t<meta charset=\UTF-8\>\t\t<meta name=\google\ value=\notranslate\>\r\n\t\t<title>CodePen - Button Hover Effects</title>\r\n\t\t<...

目录

<!DOCTYPE html>

<html>

<head> <meta charset="UTF-8"> <meta name="google" value="notranslate">

<title>CodePen - Button Hover Effects</title>

<style> html { padding-top: 50px; font-family: 'Open Sans', Helvetica, arial, sans-serif; text-align: center; background-color: #eeeeee; } html *, html *:before, html *:after { box-sizing: border-box; -webkit-transition: 0.5s; transition: 0.5s; } html i, html em, html b, html strong, html span { -webkit-transition: none; transition: none; } *:before, :after { z-index: -1; } h1, h4 { font-family: 'Raleway', 'Open Sans', sans-serif; margin: 0; line-height: 1; } a { text-decoration: none; line-height: 80px; color: black; } .centerer { width: 100%; max-width: 600px; margin: 0 auto; } .wrap { width: 50%; float: left; } [class^="btn-"] { position: relative; display: block; margin: 20px auto; width: 100%; height: 80px; max-width: 250px; text-transform: uppercase; overflow: hidden; border: 1px solid currentColor; } .btn-0 { color: #925073; } .btn-0:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: #4c1d36; } .btn-0:hover { color: #dfccd6; } .btn-0:hover:before { width: 250px; } .btn-0:active { background: #7f315a; } .btn-1 { color: #af4e49; } .btn-1:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #611c19 transparent transparent transparent; position: absolute; top: 0; left: 0; } .btn-1:hover { color: #e8cbca; } .btn-1:hover:after { border-width: 330px 330px 0 0; } .btn-1:active { background: #a12f29; } .btn-1-2 { color: #61cdbe; } .btn-1-2:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #29766b; position: absolute; bottom: 0; left: 0; } .btn-1-2:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent #29766b transparent; position: absolute; right: 0; bottom: 0; } .btn-1-2:hover { color: #d1f0ec; } .btn-1-2:hover:before { border-width: 206.25px 0 0 206.25px; } .btn-1-2:hover:after { border-width: 0 0 206.25px 206.25px; } .btn-1-2:active { background: #45c4b3; } .btn-2 { color: #306570; } .btn-2:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #072c34; position: absolute; bottom: 0; left: 0; } .btn-2:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #072c34 transparent transparent; position: absolute; top: 0; right: 0; } .btn-2:hover { color: #c2d2d5; } .btn-2:hover:before { border-width: 165px 0 0 165px; } .btn-2:hover:after { border-width: 0 165px 165px 0; } .btn-2:active { background: #0c4a57; } .btn-3 { color: #c45561; } .btn-3:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #6f2129; position: absolute; bottom: 0; left: 0; } .btn-3:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #6f2129 transparent transparent; position: absolute; top: 0; right: 0; } .btn-3 span:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent #6f2129 transparent; position: absolute; right: 0; bottom: 0; } .btn-3 span:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #6f2129 transparent transparent transparent; position: absolute; top: 0; left: 0; } .btn-3:hover { color: #eecdd1; } .btn-3:hover:before { border-width: 165px 0 0 165px; } .btn-3:hover:after { border-width: 0 165px 165px 0; } .btn-3:hover span:before { border-width: 0 0 165px 165px; } .btn-3:hover span:after { border-width: 165px 165px 0 0; } .btn-3:active { background: #b93745; } .btn-4 { color: #7d8d5c; } .btn-4:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #3d4926 transparent transparent; position: absolute; top: 0; right: 0; } .btn-4:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #3d4926; position: absolute; bottom: 0; left: 0; } .btn-4:before, .btn-4:after { border-color: #3d4926; } .btn-4 span:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: #3d4926 transparent transparent transparent; position: absolute; top: 0; left: 0; } .btn-4 span:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent #3d4926 transparent; position: absolute; right: 0; bottom: 0; } .btn-4 span:before, .btn-4 span:after { border-color: #3d4926; } .btn-4:hover { color: #d9decf; } .btn-4:hover:before { border-width: 20px 62.5px; } .btn-4:hover:after { border-width: 20px 62.5px; } .btn-4:hover span:before { border-width: 20px 62.5px; } .btn-4:hover span:after { border-width: 20px 62.5px; } .btn-4:active { background: #66793f; } .btn-5 { color: #2a4770; } .btn-5:after { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent #021734 transparent transparent; position: absolute; top: 0; right: 0; } .btn-5:before { content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0; border-color: transparent transparent transparent #021734; position: absolute; bottom: 0; left: 0; } .btn-5:hover { color: #c0c9d5; } .btn-5:hover:before, .btn-5:hover:after { border-width: 80px 262.5px; } .btn-5:active { background: #042757; } .btn-6 { color: #a751d0; } .btn-6 span { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background: #5b1e78; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: width 0.4s, height 0.4s; transition: width 0.4s, height 0.4s; z-index: -1; } .btn-6:hover { color: #e5ccf1; } .btn-6:hover span { width: 562.5px; height: 562.5px; } .btn-6:active { background: #9832c8; } .btn-7 { color: #41c46a; } .btn-7:before, .btn-7:after, .btn-7 span:before, .btn-7 span:after { content: ''; position: absolute; top: 0; width: 63.5px; height: 0; background: #136f30; } .btn-7:before { left: 0; } .btn-7:after { left: 125px; } .btn-7 span:before, .btn-7 span:after { top: auto; bottom: 0; } .btn-7 span:before { left: 62.5px; } .btn-7 span:after { left: 187.5px; } .btn-7:hover { color: #c7eed3; } .btn-7:hover:before, .btn-7:hover:after, .btn-7:hover span:before, .btn-7:hover span:after { height: 80px; } .btn-7:active { background: #1fb950; } .btn-8 { color: #377660; } .btn-8:before, .btn-8:after { content: ''; position: absolute; top: 0; left: 0; width: 250px; height: 0; background: #0c3829; } .btn-8:after { top: auto; bottom: 0; } .btn-8:hover { color: #c4d7d0; } .btn-8:hover:before, .btn-8:hover:after { height: 40px; } .btn-8:active { background: #145e44; } .btn-9 { color: #9b5097; } .btn-9:before, .btn-9:after, .btn-9 span:before, .btn-9 span:after { content: ''; position: absolute; top: 0; left: 0; width: 250px; height: 0; background: rgba(82, 29, 80, 0.25); -webkit-transition: 0.4s; transition: 0.4s; } .btn-9:after, .btn-9 span:before { top: auto; bottom: 0; } .btn-9 span:before, .btn-9 span:after { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .btn-9:hover { color: #e2cce1; } .btn-9:hover:before, .btn-9:hover:after, .btn-9:hover span:before, .btn-9:hover span:after { height: 80px; } .btn-9:active { background: #893185; } .btn-10 { color: #4ab36a; } .btn-10:before, .btn-10:after, .btn-10 span:before, .btn-10 span:after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 80px; background: rgba(25, 99, 48, 0.25); -webkit-transition: 0.4s; transition: 0.4s; } .btn-10:after, .btn-10 span:before { left: auto; right: 0; } .btn-10 span:before, .btn-10 span:after { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .btn-10:hover { color: #cae9d3; } .btn-10:hover:before, .btn-10:hover:after, .btn-10:hover span:before, .btn-10:hover span:after { width: 250px; } .btn-10:active { background: #2aa550; } @-webkit-keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @-webkit-keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } .btn-11 { position: relative; color: #9248bc; } .btn-11:before, .btn-11:after { position: absolute; top: 50%; content: ''; width: 20px; height: 20px; background: #7f28b0; border-radius: 50%; } .btn-11:before { left: -20px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); / animation: criss-cross-left 0.8s reverse; / } .btn-11:after { right: -20px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); / animation: criss-cross-right 0.8s reverse; / } .btn-11:hover:before, .btn-11:hover:after { / @include size($btn-width); */ } .btn-11:hover:before { -webkit-animation: criss-cross-left 0.8s both; animation: criss-cross-left 0.8s both; } .btn-11:hover:after { -webkit-animation: criss-cross-right 0.8s both; animation: criss-cross-right 0.8s both; } </style>

</head>

<body>

<div class="centerer">

Just Some More

Button Hover Effects

By: <a href="http://kylebrumm.com">Kyle Brumm</a>

<div class="wrap"> <a class="btn-0" href="#">Swipe</a> <a class="btn-1" href="#">Diagonal Swipe</a> <a class="btn-1-2" href="#">Double Swipe</a> <a class="btn-2" href="#">Diagonal Close</a> <a class="btn-3" href="#">Zoning In</a> <a class="btn-4" href="#">4 Corners</a> <a class="btn-5" href="#">Slice</a> </div> <div class="wrap"> <a class="btn-6" href="#">Position Aware</a> <a class="btn-7" href="#">Alternate</a> <a class="btn-8" href="#">Smoosh</a> <a class="btn-9" href="#">Vertical Overlap</a> <a class="btn-10" href="#">Horizontal Overlap</a> <a class="btn-11" href="#">Collision</a> </div> </div>

<script src='http://zaole.net/sliding.js'></script>

<script> $(function() { $('.btn-6').on('mouseenter', function(e) { var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top; $(this).find('span').css({ top: relY, left: relX }); }).on('mouseout', function(e) { var parentOffset = $(this).offset(), relX = e.pageX - parentOffset.left, relY = e.pageY - parentOffset.top; $(this).find('span').css({ top: relY, left: relX }); }); $('[href=#]').click(function() { return false; }); }); //@ sourceURL=pen.js </script>

<script> if(document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script>

</body>

</html>

转载于:https://www.cnblogs.com/fanjun/p/6396742.html

原文地址：https://blog.csdn.net/diashu2626/article/details/101583316?ops_request_misc=&request_id=b4e155df3eae457d9a47a66d8fb79e46&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-1-101583316-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/779f3f339f2f43a38aee9da2eed4c200
最新评论
当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复