图片/图形

带方向感知的鼠标悬停图片动画CSS3特效

也想出现在这里?联系我们
面包多

带方向感知的鼠标悬停图片动画CSS3特效-创客云
这是一款 CSS3 带方向感知的鼠标悬停图片动画特效。该特效在鼠标悬停到一组图片上面时,图片会根据鼠标所在位置发生旋转,并且旋转的角度始终根据鼠标所在位置而变化。

HTML 结构

  1. <div class="cards-container">
  2.     <div class="card"></div>
  3.     <div class="card"></div>
  4.     <div class="card"></div>
  5.     <div class="card"></div>
  6.     <div class="card"></div>
  7. </div>
也想出现在这里?联系我们
创客主机

CSS 样式

  1. * {
  2.     box-sizing: border-box;
  3. }
  4.  
  5. body {
  6.     background-image: url('../img/bg.jpg');
  7.     background-size: cover;
  8.     background-position: center center;
  9.     display: flex;
  10.     flex-direction: column;
  11.     font-family: 'Muli';
  12.     justify-content: center;
  13.     align-items: center;
  14.     height: 100vh;
  15.     text-align: center;
  16. }
  17.  
  18. .cards-container {
  19.     display: flex;
  20.     justify-content: center;
  21.     perspective: 1000px;
  22.     width: 100%;
  23. }
  24.  
  25. .cards-container:hover .card {
  26.     transform: rotateY(30deg);
  27. }
  28.  
  29. .card {
  30.     background-repeat: no-repeat;
  31.     background-size: cover;
  32.     background-position: center center;
  33.     border-radius: 15px;
  34.     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  35.     margin: 20px;
  36.     height: 300px;
  37.     transition: transform 0.2s ease-in-out;
  38.     width: 20%;
  39.     min-width: 100px;
  40. }
  41.  
  42. .card:hover {
  43.     transform: rotateY(0deg) !important;
  44. }
  45.  
  46. .card:hover ~ .card {
  47.     transform: rotateY(-30deg);
  48. }
  49.  
  50. .card:nth-of-type(1) {
  51.     background-image: url('../img/1.jpg');
  52. }
  53.  
  54. .card:nth-of-type(2) {
  55.     background-image: url('../img/2.jpg');
  56. }
  57.  
  58. .card:nth-of-type(3) {
  59.     background-image: url('../img/3.jpg');
  60. }
  61.  
  62. .card:nth-of-type(4) {
  63.     background-image: url('../img/4.jpg');
  64. }
  65.  
  66. .card:nth-of-type(5) {
  67.     background-image: url('../img/5.jpg');
  68. }
  69.  
  70. @media screen and (max-width: 756px) {
  71.     .card:nth-of-type(4), .card:nth-of-type(5) {
  72.         display: none;
  73.     }
  74. }
  75.  
  76.  
  77. /* SOCIAL PANEL CSS */
  78. .social-panel-container {
  79.     position: fixed;
  80.     right: 0;
  81.     bottom: 80px;
  82.     transform: translateX(100%);
  83.     transition: transform 0.4s ease-in-out;
  84. }
  85.  
  86. .social-panel-container.visible {
  87.     transform: translateX(-10px);
  88. }
  89.  
  90. .social-panel { 
  91.     background-color: #fff;
  92.     border-radius: 16px;
  93.     box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
  94.     border: 5px solid #001F61;
  95.     display: flex;
  96.     flex-direction: column;
  97.     justify-content: center;
  98.     align-items: center;
  99.     font-family: 'Muli';
  100.     position: relative;
  101.     height: 169px;  
  102.     width: 370px;
  103.     max-width: calc(100% - 10px);
  104. }
  105.  
  106. .social-panel button.close-btn {
  107.     border: 0;
  108.     color: #97A5CE;
  109.     cursor: pointer;
  110.     font-size: 20px;
  111.     position: absolute;
  112.     top: 5px;
  113.     right: 5px;
  114. }
  115.  
  116. .social-panel button.close-btn:focus {
  117.     outline: none;
  118. }
  119.  
  120. .social-panel p {
  121.     background-color: #001F61;
  122.     border-radius: 0 0 10px 10px;
  123.     color: #fff;
  124.     font-size: 14px;
  125.     line-height: 18px;
  126.     padding: 2px 17px 6px;
  127.     position: absolute;
  128.     top: 0;
  129.     left: 50%;
  130.     margin: 0;
  131.     transform: translateX(-50%);
  132.     text-align: center;
  133.     width: 235px;
  134. }
  135.  
  136. .social-panel p i {
  137.     margin: 0 5px;
  138. }
  139.  
  140. .social-panel p a {
  141.     color: #FF7500;
  142.     text-decoration: none;
  143. }
  144.  
  145. .social-panel h4 {
  146.     margin: 20px 0;
  147.     color: #97A5CE; 
  148.     font-family: 'Muli';    
  149.     font-size: 14px;    
  150.     line-height: 18px;
  151.     text-transform: uppercase;
  152. }
  153.  
  154. .social-panel ul {
  155.     display: flex;
  156.     list-style-type: none;
  157.     padding: 0;
  158.     margin: 0;
  159. }
  160.  
  161. .social-panel ul li {
  162.     margin: 0 10px;
  163. }
  164.  
  165. .social-panel ul li a {
  166.     border: 1px solid #DCE1F2;
  167.     border-radius: 50%;
  168.     color: #001F61;
  169.     font-size: 20px;
  170.     display: flex;
  171.     justify-content: center;
  172.     align-items: center;
  173.     height: 50px;
  174.     width: 50px;
  175.     text-decoration: none;
  176. }
  177.  
  178. .social-panel ul li a:hover {
  179.     border-color: #FF6A00;
  180.     box-shadow: 0 9px 12px -9px #FF6A00;
  181. }
  182.  
  183. .floating-btn {
  184.     border-radius: 26.5px;
  185.     background-color: #001F61;
  186.     border: 1px solid #001F61;
  187.     box-shadow: 0 16px 22px -17px #03153B;
  188.     color: #fff;
  189.     cursor: pointer;
  190.     font-size: 16px;
  191.     line-height: 20px;
  192.     padding: 12px 20px;
  193.     position: fixed;
  194.     bottom: 20px;
  195.     right: 20px;
  196.     z-index: 999;
  197. }
  198.  
  199. .floating-btn:hover {
  200.     background-color: #ffffff;
  201.     color: #001F61;
  202. }
  203.  
  204. .floating-btn:focus {
  205.     outline: none;
  206. }
  207.  
  208. @media screen and (max-width: 480px) {
  209.  
  210.     .social-panel-container.visible {
  211.         transform: translateX(0px);
  212.     }
  213.  
  214.     .floating-btn {
  215.         right: 10px;
  216.     }
  217. }

Codepen 网址:https://codepen.io/FlorinPop17/pen/LYPBQKy

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(1)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商网站模板WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!