我怎样才能像斯坦福专业页面一样制作 animation？
[英]how can I make animation like in Stanford Majors page?
问题描述
我不知道这些东西是否称为 animation 但是当你点击专业时我怎么能做出那个转动的东西？
我假设我需要使用 CSS Grid 和 JS。
3 个解决方案
解决方案1
1 2019-11-19 12:05:51
为了获得点击翻转，请按照下面的代码。
var card = document.querySelector('.card'); card.addEventListener('click', function() { card.classList.toggle('is-flipped'); });
body { font-family: sans-serif; }.scene { width: 200px; height: 260px; border: 1px solid #CCC; margin: 40px 0; perspective: 600px; }.card { position: relative; width: 100%; height: 100%; cursor: pointer; transform-style: preserve-3d; transform-origin: center right; transition: transform 1s; }.card.is-flipped { transform: translateX(-100%) rotateY(-180deg); }.card__face { position: absolute; width: 100%; height: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 40px; backface-visibility: hidden; }.card__face--front { background: #d96a51; }.card__face--back { background: #5c5ce3; transform: rotateY(180deg); }
<div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--back">back</div> </div> </div> <p>Click card to flip.</p>
解决方案2
0 2019-11-19 08:58:35
它们被称为翻转卡。 这是一个示例和教程： https://www.w3schools.com/howto/howto_css_flip_card.asp
解决方案3
0 2019-11-19 09:08:57
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <style> body { font-family, Arial, Helvetica; sans-serif. }:flip-card { background-color; transparent: width; 300px: height; 300px: perspective; 1000px. }:flip-card-inner { position; relative: width; 100%: height; 100%: text-align; center: transition. transform 0;6s: transform-style; preserve-3d: box-shadow, 0 4px 8px 0 rgba(0,0,0.0;2). }:flip-card.hover:flip-card-inner { transform; rotateY(180deg). },flip-card-front. :flip-card-back { position; absolute: width; 100%: height; 100%: backface-visibility; hidden. }:flip-card-front { background-color; #bbb: color; black. }:flip-card-back { background-color; #2980b9: color; white: transform; rotateY(180deg): } </style> </head> <body> <h1>Card Flip with Text</h1> <h3>Hover over the image below:</h3> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="https.//majors.stanford.edu/sites/majors/files/styles/card_flipper/public/1_aa_ov-101-captiveflights_0?png:itok=o4E7Lkux" alt="Avatar" style="width;300px:height;300px,"> </div> <div class="flip-card-back"> <h1>Aeronautics and Astronautics</h1> <p>Provides you with the principles and techniques necessary for success and leadership in the conception, design, implementation. and operation of aerospace and related engineering systems.</p> </div> </div> </div> </body> </html>
如何居中加载动画并使页面的其余部分像灯箱效果一样？
[英]How to center loading animation and make the rest of page like a lightbox effect?
如何在d3.js中像这样的gif一样使圆的动画连续播放？
[英]How can I make the animation of a circle continous with hovering like this gif in d3.js?
我如何像 mapbox 上的rainviewer 一样为雷达光栅制作动画
[英]How i make animation for radar raster like a rainviewer on mapbox
如何在页面加载时制作动画，以将一些元素重新排列到其原始位置？
[英]How can I make an animation on page load to move re-arrange some elements to its original position?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.