Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
@import url("https://fonts.googleapis.com/css?family=Droid+Sans+Mono"); * { box-sizing: border-box; } body { margin: 0; } #root { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; width: 100%; min-height: 100vh; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #FBAB7E; background-image: -webkit-linear-gradient(28deg, #FBAB7E 0%, #F7CE68 100%); background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); } header { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } header h1 { font-family: "Droid Sans Mono", monospace; font-weight: lighter; text-transform: uppercase; letter-spacing: 0.1em; color: white; } .flipClock { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 500px; } .flipUnitContainer { display: block; position: relative; width: 140px; height: 120px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-perspective: 300px; perspective: 300px; background-color: white; border-radius: 3px; box-shadow: 0px 10px 10px -10px grey; } .upperCard, .lowerCard { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; border: 1px solid whitesmoke; } .upperCard span, .lowerCard span { font-size: 5em; font-family: "Droid Sans Mono", monospace; font-weight: lighter; color: #333333; } .upperCard { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; border-bottom: 0.5px solid whitesmoke; border-top-left-radius: 3px; border-top-right-radius: 3px; } .upperCard span { -webkit-transform: translateY(50%); transform: translateY(50%); } .lowerCard { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border-top: 0.5px solid whitesmoke; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .lowerCard span { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .flipCard { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 0; width: 140px; height: 60px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flipCard span { font-family: "Droid Sans Mono", monospace; font-size: 5em; font-weight: lighter; color: #333333; } .flipCard.unfold { top: 50%; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); background-color: white; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: 1px solid whitesmoke; border-top: 0.5px solid whitesmoke; } .flipCard.unfold span { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .flipCard.fold { top: 0%; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); background-color: white; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 0.5px solid whitesmoke; border-bottom: 0.5px solid whitesmoke; } .flipCard.fold span { -webkit-transform: translateY(50%); transform: translateY(50%); } .fold { -webkit-animation: fold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards; animation: fold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .unfold { -webkit-animation: unfold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards; animation: unfold 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s 1 normal forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } @-webkit-keyframes fold { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @keyframes fold { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } 100% { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } } @-webkit-keyframes unfold { 0% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } @keyframes unfold { 0% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } }
JavaScript
'use strict'; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var AnimatedCard = function (_React$Component) { _inherits(AnimatedCard, _React$Component); function AnimatedCard() { _classCallCheck(this, AnimatedCard); return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); } AnimatedCard.prototype.render = function render() { var _props = this.props; var position = _props.position; var digit = _props.digit; var animation = _props.animation; return React.createElement( 'div', { className: 'flipCard ' + position + ' ' + animation }, React.createElement( 'span', null, digit ) ); }; return AnimatedCard; }(React.Component); var StaticCard = function (_React$Component2) { _inherits(StaticCard, _React$Component2); function StaticCard() { _classCallCheck(this, StaticCard); return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments)); } StaticCard.prototype.render = function render() { var _props2 = this.props; var position = _props2.position; var digit = _props2.digit; return React.createElement( 'div', { className: position }, React.createElement( 'span', null, digit ) ); }; return StaticCard; }(React.Component); var FlipUnitContainer = function (_React$Component3) { _inherits(FlipUnitContainer, _React$Component3); function FlipUnitContainer() { _classCallCheck(this, FlipUnitContainer); return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments)); } FlipUnitContainer.prototype.render = function render() { var _props3 = this.props; var digit = _props3.digit; var shuffle = _props3.shuffle; var unit = _props3.unit; var now = digit; var before = digit - 1; // to prevent a negative value if (unit !== 'hours') { before = before === -1 ? 59 : before; } else { before = before === -1 ? 23 : before; } // add zero if (now < 10) now = '0' + now; if (before < 10) before = '0' + before; // shuffle digits var digit1 = shuffle ? before : now; var digit2 = !shuffle ? before : now; // shuffle animations var animation1 = shuffle ? 'fold' : 'unfold'; var animation2 = !shuffle ? 'fold' : 'unfold'; return React.createElement( 'div', { className: 'flipUnitContainer' }, React.createElement(StaticCard, { position: 'upperCard', digit: now }), React.createElement(StaticCard, { position: 'lowerCard', digit: before }), React.createElement(AnimatedCard, { position: 'first', digit: digit1, animation: animation1 }), React.createElement(AnimatedCard, { position: 'second', digit: digit2, animation: animation2 }) ); }; return FlipUnitContainer; }(React.Component); var FlipClock = function (_React$Component4) { _inherits(FlipClock, _React$Component4); function FlipClock(props) { _classCallCheck(this, FlipClock); var _this4 = _possibleConstructorReturn(this, _React$Component4.call(this, props)); _this4.state = { hours: 0, hoursShuffle: true, minutes: 0, minutesShuffle: true, seconds: 0, secondsShuffle: true }; return _this4; } FlipClock.prototype.componentDidMount = function componentDidMount() { var _this5 = this; this.timerID = setInterval(function () { return _this5.updateTime(); }, 50); }; FlipClock.prototype.componentWillUnmount = function componentWillUnmount() { clearInterval(this.timerID); }; FlipClock.prototype.updateTime = function updateTime() { // get new date var time = new Date(); // set time units var hours = time.getHours(); var minutes = time.getMinutes(); var seconds = time.getSeconds(); // on hour chanage, update this.state.minutes if (hours !== this.state.hours) { var hoursShuffle = !this.state.hoursShuffle; this.setState({ hours: hours, hoursShuffle: hoursShuffle }); } // on minute chanage, update this.state.minutes if (minutes !== this.state.minutes) { var minutesShuffle = !this.state.minutesShuffle; this.setState({ minutes: minutes, minutesShuffle: minutesShuffle }); } // on second chanage, update this.state.seconds if (seconds !== this.state.seconds) { var secondsShuffle = !this.state.secondsShuffle; this.setState({ seconds: seconds, secondsShuffle: secondsShuffle }); } }; FlipClock.prototype.render = function render() { var _state = this.state; var hours = _state.hours; var minutes = _state.minutes; var seconds = _state.seconds; var hoursShuffle = _state.hoursShuffle; var minutesShuffle = _state.minutesShuffle; var secondsShuffle = _state.secondsShuffle; return React.createElement( 'div', { className: 'flipClock' }, React.createElement(FlipUnitContainer, { unit: 'hours', digit: hours, shuffle: hoursShuffle }), React.createElement(FlipUnitContainer, { unit: 'minutes', digit: minutes, shuffle: minutesShuffle }), React.createElement(FlipUnitContainer, { unit: 'seconds', digit: seconds, shuffle: secondsShuffle }) ); }; return FlipClock; }(React.Component); var Header = function (_React$Component5) { _inherits(Header, _React$Component5); function Header() { _classCallCheck(this, Header); return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments)); } Header.prototype.render = function render() { return React.createElement( 'header', null, React.createElement( 'h1', null, ' React Flip Clock' ) ); }; return Header; }(React.Component); var App = function (_React$Component6) { _inherits(App, _React$Component6); function App() { _classCallCheck(this, App); return _possibleConstructorReturn(this, _React$Component6.apply(this, arguments)); } App.prototype.render = function render() { return React.createElement( 'div', null, React.createElement(Header, null), React.createElement(FlipClock, null) ); }; return App; }(React.Component); ReactDOM.render(React.createElement(App, null), document.querySelector('#root'));
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>翻页时钟-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号